Easing
Analog of the Easing
module from React Native.
API
step0()
A stepping function, returns 1 for any positive value of n
.
step1()
A stepping function, returns 1 if n
is greater than or equal to 1.
linear()
A linear function, f(t) = t
. Position correlates to elapsed time one to one.
http://cubic-bezier.com/#0,0,1,1
ease()
A basic inertial interaction, similar to an object slowly accelerating to speed.
http://cubic-bezier.com/#.42,0,1,1
quad()
A quadratic function, f(t) = t * t
. Position equals the square of elapsed time.
http://easings.net/#easeInQuad
cubic()
A cubic function, f(t) = t * t * t
. Position equals the cube of elapsed time.
http://easings.net/#easeInCubic
poly()
A power function. Position is equal to the Nth power of elapsed time.
n = 4: http://easings.net/#easeInQuart n = 5: http://easings.net/#easeInQuint
sin()
A sinusoidal function.
http://easings.net/#easeInSine
circle()
A circular function.
http://easings.net/#easeInCirc
exp()
An exponential function.
http://easings.net/#easeInExpo
elastic()
A basic elastic interaction, similar to a spring oscillating back and forth.
Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.
http://easings.net/#easeInElastic
back()
Use with Animated.parallel()
to create a basic effect where the object animates back slightly as the animation starts.
bounce()
Provides a basic bouncing effect.
http://easings.net/#easeInBounce
bezier()
Provides a cubic bezier curve, equivalent to CSS Transitions' transition-timing-function
.
A useful tool to visualize cubic bezier curves can be found at http://cubic-bezier.com/
in()
Runs an easing function forwards.
out()
Runs an easing function backwards.
inOut()
Makes any easing function symmetrical. The easing function will run forwards for half of the duration, then backwards for the rest of the duration.