React native animation with Animated API

For React Native, when you want to create an animation, the Animated API is the most effective way.

There are three main methods that you will use to create animations

1. Animated.timing() – Connects time intervals to linear values
2. Animated.decay() – Start with a certain acceleration after the puzzle decreases until it stops.
3. Animated.spring() – A simple single-spring physical model based on Rebound and Origami . Check the acceleration state to create a floating motion when the toValue value is updated and can be connected.

We will learn about Animated.timing() and Animated.spring() as they are most popular.

Along with the above three methods, there are three ways to call these animations. We will learn all three.

1. Animated.parallel() – Start with an array of animations all at once.
2. Animated.sequence() – Start with an array of animations in order, waiting for one to finish. If the current animation is stopped, no animation will start.
3. Animated.stagger() – Similar to Animated.parallel() but allows us to add delay between animations.

1. Animated.timing ()

The first animation we will create is this rotating animation using Animated.timing() .

This kind of permanent animation is well suited to creating loading icons. To get started naturally we need to create a React Native project.

In this folder, open the index.android.js or index.ios.js file

Now that we have a new project created, the first thing we need to do is import Animated , Image and Easing into:

Animated is the library we need to create animations.

Image required to create image in UI

Easing is a module that allows us to create linear forms such as linear, ease, quad, cubic, sin. elastic, bounce, back, benzier, in, out, inout and more. Here we will use linear .

Next, we need to set an initial value for the rotation value:

We set spinValue the new value of Animated.Value and pass 0.

Next we need to create a spin function and call this function in componentDidMount to let it run at app load.

The spin() function will do the following:

1. Set this.spinValue to 0
2. Call Animated.timing and set this.spinValue to 1 of about 4000 milliseconds with linear easing.
3. Call start() in the following method and put this.spin() into the callback to call the eternal loop.

Next we need to render it:

Finally, the style component in the middle.

2. A few more examples of Animated.timing

Now that we know the basics of Animated.timing , let’s look at a few more examples of interpolate ( interpolate values) and create them.

In the next example, we will create single animation values, and use them to create multiple animations in the following styles:

1. marginLeft
2. opacity
3. fontSize
4. rotateX

The first thing that we still have to do is create initialization value.

Then create animation function in componentDidMount()

In the render function, we create 5 different interpolation values:

Dog interpolate allows us to use this.animatedValue in many different ways. Because its value is only 0 to 1, we can change it to many different values ​​for different styles like opacity, margin, text size, rotation.

Then we return the following:

Can add style

Above is part 1 of the tutorial on creating animations, in the next section we will learn more ways to create more interesting animations.

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