retween
A functional take on the interpolation kernel of Shifty. Ideally something highly-performant that Shifty proper and/or Rekapi could use. Optimized for fast repeated execution of similarly-shaped interpolations. Explicitly not optimized for end-user ease-of-use; it should generally be wrapped with something else.
Functional inspiration taken from Redux.
Design notes
Interpolators
interpolator
Creates and returns an interpolator function for a state shaped like
state
and using the easing functions in easing
. The interpolator
function has the signature:
outputState
fromState
and toState
must be objects with the same shape as the
state
argument to createInterpolator
, and all values being
number
s. position
must be a number between 0.0
and 1.0
inclusive. The interpolated result is copied into the object provided
in outputState
and returned.
Preprocessors
A preprocessor is a function with the following signature:
outputState outputEasing decoder
inputState
is an object with zero or more properties, and
inputEasing
is an object containing easing functions for properties
in inputState
. The preprocessor must return an outputState
which
is "closer" to a state accepted by an interpolator
, an
outputEasing
for the outputState
, and a decoder
function which
will perform a reverse transformation on a state shaped like
outputState
to produce a state shaped like inputShape
. The
preprocessor should pass properties it does not deal with through
verbatim.
The signature of decoder
is:
inputState
Composing preprocessors
Preprocessors may be composed with the following function:
preprocessor
This will compose the preprocessors in the ...preprocessors
arguments right-to-left, returning a new preprocessor
which performs
the composed transformation.
Usage strawman
; const fromState = x: 10 y: 30 ;const toState = x: 40 y: 10 ;const easing = x: linear y: linear ; const interpolator = ; ; // { x: 2.5, y: 2.0 }// Works for any states shaped like toState:; // { x: 0.25, y: 0.25 } ;const customEasing = pos -> Math; const tokenState tokenEasing tokenDecoder = ;// tokenState ~= {// transform__0: 10,// transform__1: 10,// }// tokenEasing ~= {// transform__0: [Function linear],// transform__1: [Function customEasing],// } ; // 'translateX(2.3px) rotate(57deg)' ;; const easingPreprocessor = ; const easedState easedEasing easedDecoder = ;// easedState === fromState// easedEasing ~= {// x: [Function customEasing],// y: [Function easeInOutSine],// }// easedDecoder === identity ; const easedTokenPP = ; const easedTokenState easedTokenEasing easedTokenDecoder = ;// easedTokenState ~= {// transform__0: 10,// transform__1: 10,// }// easedTokenEasing ~= {// transform__0: [Function linear],// transform__1: [Function customEasing],// }// easedTokenDecoder === tokenDecoder
License
MIT.