The Easing
module implements common easing functions. This module is used by Animate.timing() to convey physically believable motion in animations.
You can find a visualization of some common easing functions at http://easings.net/
The Easing
module provides several predefined animations through the following methods:
back
provides a simple animation where the object goes slightly back before moving forwardbounce
provides a bouncing animationease
provides a simple inertial animationelastic
provides a simple spring interactionThree standard easing functions are provided:
The poly
function can be used to implement quartic, quintic, and other higher power functions.
Additional mathematical functions are provided by the following methods:
bezier
provides a cubic bezier curvecircle
provides a circular functionsin
provides a sinusoidal functionexp
provides an exponential functionThe following helpers are used to modify other easing functions.
in
runs an easing function forwardsinOut
makes any easing function symmetricalout
runs an easing function backwardsA stepping function, returns 1 for any positive value of n
.
A stepping function, returns 1 if n
is greater than or equal to 1.
A linear function, f(t) = t
. Position correlates to elapsed time one to one.
http://cubic-bezier.com/#0,0,1,1
A simple inertial interaction, similar to an object slowly accelerating to speed.
http://cubic-bezier.com/#.42,0,1,1
A quadratic function, f(t) = t * t
. Position equals the square of elapsed time.
http://easings.net/#easeInQuad
A cubic function, f(t) = t * t * t
. Position equals the cube of elapsed time.
http://easings.net/#easeInCubic
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
A sinusoidal function.
http://easings.net/#easeInSine
A circular function.
http://easings.net/#easeInCirc
An exponential function.
http://easings.net/#easeInExpo
A simple 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
Wolfram Plots:
Use with Animated.parallel()
to create a simple effect where the object animates back slightly as the animation starts.
Wolfram Plot:
Provides a simple bouncing effect.
http://easings.net/#easeInBounce
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/
Runs an easing function forwards.
Runs an easing function backwards.
Makes any easing function symmetrical. The easing function will run forwards for half of the duration, then backwards for the rest of the duration.
© 2015–2017 Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://facebook.github.io/react-native/docs/easing.html