Easing specifies the rate of change of a parameter over time. Different objects in real life do not travel at a constant speed. In the programming world that just means that over a set period of time the value given to a function will return a different value based upon the formula it's plugged into.
This is why easing
is used with Animated.timing
. We have a start value, a toValue
and a duration
of time.
To get access to Easing
grab it off of react-native
import like import { Easing } from "react-native"
. All of the available easings can be found here https://facebook.github.io/react-native/docs/easing.html in the documentation.
Easing.bounce
is one of the few that just takes a specific time. So you can simply pass that as the easing
property on an Animated.timing
call.
Animated.timing(this._animation, { toValue: 1, duration: 500, easing: Easing.bounce, }).start();
You can see the demo of what that pattern would look like by visiting http://easings.net/#easeInBounce
All of the easing functions have their place, and we will touch on when to use an easing and how it will effect your animations when doing the animations. The React Native documentation on Easing actually does a great job of outlining what is available, and previewing it on the web.