React Native Animations uses the Animated API

Tram Ho

Animations are very important for the user experience, so almost every application is required. React Native provides 2 animations systems: Animated and LayoutAnimation but today I will just introduce you to Animated.

Animated

The Animated API is designed to accurately represent animations with very effective interactions. Animated focuses on the declared relationship between input and output, using start / stop methods to control time-based animation execution.

Animated has 6 types of animatable components: View , Text , Image , ScrollView , FlatList and SectionList , but you can also create your own using Animated.createAnimatedComponent() .

There are 3 main methods that you can use to create animations:

  1. Animated.timing () : Mapping with time range to easing value
  2. Animated.decay () : Start with an initial velocity and gradually stop
  3. Animated.spring () : Provides a basic spring physical model

Along with the Animated methods above, there are composing methods to combine animations in complex ways:

  1. Animated. parallel () : Perform animations at the same time
  2. Animated.sequence () : Performs the animation sequentially
  3. Animated.stagger () : Perform animations with a combination of sequential and parallel

Animated.timing ()

The first animation we will create is a spinning animation using Animated.timing () .

To create the animation above, we first need to import Animated , Image , and Easing from react-native .

Easing is a module that allows us to use methods for easing such as linear, ease, quad, cubic, sin, elastic, bounce, back, bezier, in, out, inout …

First we need to initialize an animated value for the spinning value, we will set the value in the constructor:

Next, we will create a spin method to perform the spinning animation and call it at componentDidMount to execute right after opening the screen.

The spin () function will call the Animated.timing function to execute the animation from value 0 -> 1, with a duration of 4 seconds. The Animated.timing function needs to pass a value and a config object, the config object can get toValue, duration, easing, delay. We call the start () function and pass the spin callback () which will be called as soon as the animation completes.

Once we have the methods we will need to render the animations in the UI:

Above we create a spin variable and use the interpolate function, this is the function that helps us map the value from 0 -> 1, the output will be from 0 degrees -> 360 degrees. In styles of Animated.Image we have added the transfrom property and attached the spin value to the rotate property

So we have done an animation already!

Animated.allel ()

Animated. parallel () will execute an array of animation at the same time.

To create the animation as shown with Animated.allel, we will first create 3 animated values ​​in the constructor:

Next, we will create a method to execute the animation and call it at componentDidMount

In the render method we will create the interpolate value:

Finally, we will render the Animated.View:

We use scaleText to scale the first View, spinText to rotate the second View, and the introButton to change the marginTop of the 3rd View. When the animate () function is called, all of this animation will be done at once.

Conclude

In this article, I only showed you about Animated.timing () for single animation implementation and Animated. parallel () to combine the animation implementation. You can refer to at:

https://reactnative.dev/docs/animated

https://reactnative.dev/docs/animations

https://medium.com/react-native-training/react-native-animations-using-the-animated-api-ebe8e0669fae

Share the news now

Source : Viblo