Animated functions

Okay, so we've defined our animations in state and created Animated.View with corresponding styles for each circle. Now, it's time to start animation. In order to do so, we will use Animated functions.

Let's start our animations on componentDidMount():

componentDidMount(){
  const { timing } = Animated;
  const { scaleAnim, fadeAnim, slideAnim } = this.state;
  timing(
    fadeAnim, { toValue: 1 }
  ).start();
  timing(
    slideAnim, { toValue: 0 }
  ).start();
  timing(
    scaleAnim, { toValue: 1 }
  ).start();
}

Here, we will use the Animated.timing function. This function, as other Animated functions--which we will cover in a bit--is used to configure and compose our animations if needed. Animated.timing can be configured with a duration parameter and easing parameter. Default easing is easeInOut, but can be configured using Easing functions exported...