Animation: animation is a method in which puppets, figures, drawings, etc., appear as moving creatures, making an illusion that things are moving. It is a unique way of expressing something smoothly. It makes things more impressive as it is not expressed by a stagnant flowchart or block diagram. Things are moving continuously, making our idea clear about whatever they want to show. In the case of conventional pictorial representation, things are not as clear as in animation. The animator is someone who creates animation. The film industry has gained massive popularity in the modern era because of its excellent animation.

There are the following type of animation-

Traditional animation
2D animation
3D animation
Motion graphics (typographic,animated logo etc)
Stop motion
Computer animation.

Brief introduction of different types of animations

Traditional animation is one of the oldest forms of animation, where every frame must be drawn on transparent paper. And this seems the same as a flipbook, but there are some differences, and it also seems the same as 2D animation.

2D animation seems the same as traditional animation, but they are vector-based. The benefit of using the vector-based image is that we do not need to worry about resolution, and that's the drawback of the pixel-based picture. Their resolution is a major concern.

Nowadays, whichever animations we see are 3D animation here, computer-made pictures are used, but it is not necessary that as the computer is used here, so it will be easy to do 3D animation, things are different. 3D animation is indeed complex and very long process and requires more concentration and details.

Motion graphics is nothing but the only illusion of images. It creates the illusion that things are moving and sound is often connected.

Animation in react-native :

Animation is important if we want our app to have a great user experience. This is a great way to convey your message to the user. It makes the user interface more interactive.

There are mainly two types of complementary animation systems present in react native, and they are -

Animated API
Layout animated.

Animated: this is focused on a tiny level of interaction. The animated API of react native is excellent. We can make different animations using it. Here we got some methods to control time-based execution, which is again beneficial and impressive.

Layout animated: global layout transactions can be controlled using layout animated.

Lets see some basic animation before we move further :

App.js code

import React, { Component } from 'react'
import { View, StyleSheet, Animated, TouchableOpacity } from 'react-native'


class Animations extends Component {
   componentWillMount = () => {
      this.animatedWidth = new Animated.Value(20)
      this.animatedHeight = new Animated.Value(50)
   }
   animatedBox = () => {
      Animated.timing(this.animatedWidth, {
         toValue: 200,
         duration: 3000
      }).start()
      Animated.timing(this.animatedHeight, {
         toValue: 500,
         duration: 1000
      }).start()
   }
   render() {
      const animatedStyle = { width: this.animatedWidth, height: this.animatedHeight }
      return (
         <TouchableOpacity style = {styles.container} onPress = {this.animatedBox}>
            <Animated.View style = {[styles.lol, animatedStyle]}/>
         </TouchableOpacity>
      )
   }
}
export default Animations


const styles = StyleSheet.create({
   container: {
      justifyContent: 'center',
      alignItems: 'center',
      flex: 1
   },
   lol: {
     width: 10,
    height: 10,
    borderRadius:5 ,
    backgroundColor: "pink",
    transform: [{ scaleX: 1}],
      
   }
})

Output :

If you click on that, you can see a small dot there; it would transform as same as the picture beside it .so the interesting part is how this happens.

Let's take a little glimpse of the working code :

The working of code is quite simple. If you know touchable opacity and stylesheet, things will be clearer to you. We have imported View, StyleSheet, Animated, TouchableOpacity, and components because we will use them throughout the app.

   componentWillMount = () => {
      this.animatedWidth = new Animated.Value(20)
      this.animatedHeight = new Animated.Value(50)
   }

You must have seen the small dot which is transformed into a big one by clicking on it, so we are using componentWillMount for it. this.animatedWidth and this.animatedHeight is used for deciding the height and width of that basic structure or the first structure which is initial part of the output the animation starts when we click on the button.

animatedBox = () => {
      Animated.timing(this.animatedWidth, {
         toValue: 200,
         duration: 3000
      }).start()
      Animated.timing(this.animatedHeight, {
         toValue: 500,
         duration: 1000
      }).start()
   }

You can see two parts: animatedWidth and the second one is this.animatedHeight these two have their respective contribution to transformation.

You must have observed how height and width change after just a click. Let's simplify what is happening here. We are just changing the width and height of the respective structure so, after a click, the height and width expand simultaneously, but there should be something that signifies how much the expansion will appear. These two functions will control the expansion of height and width. The first attribute value: 200, defines the amount of expansion, and duration: 3000, signifies how much time it will require to attend this expansion. The longer the time, the slow the transformation. This is how the expansion is occurring.

<TouchableOpacity style = {styles.container} onPress = {this.animatedBox}>
            <Animated.View style = {[styles.lol, animatedStyle]}/>
         </TouchableOpacity>

This renders the app. We have defined one touchable opacity, which makes the button responsive. We know onpress decides the response after clicking, so here we have provided {this.animatedBox} in onpress, which means when the user clicks the button animated box function will be called, which will result in an expansion of height and width.

Configuring animation

There are three types of animation present. Each has its specification and certain curves to achieve the final value from the initial value. These three types will control the transformation.

Animated. Decay (): it starts with an initial velocity and stops when the transformation is completed.
Animated. Timing (): it defines the total time taken for animation.
Animated. Spring (): this can be used to animate value over time.

Native driver

This initial tool is used to share the initial information about animation with natives before starting the animation. This can be used to perform the animation in the user interface, which is user-friendly. We do not need to go through the bridge for every frame. We can easily block the JS thread without affecting the animation. Using it is also simple. You need to use native driver = true, enabling the native driver. This makes animation smooth and faster.

Combining animated value

If there are multiple animations in any app, then we have to combine those values together for simultaneous animation. Normally a very ordinary app uses multiple animation figures, so understanding this is important.

Methods of combining the animation values-

Animated.add()
Animated.subtraction()
Animated.divide()
Animated.modulo()
Animated.multiply()

We will be using these methods in upcoming examples there you can understand this more practically.

Example of animation using string

Create a file named circleAnimation.js

circleAnimation.js code :

import React, { Component } from 'react';
import { View, Animated } from 'react-native';


class circle animation extends Component {


    componentWillMount() {
        this.position = new Animated.ValueXY(0, 0);
        Animated.spring(this.position, {
            toValue: { x: 225, y: 100 }
        }).start();
    }


    render() {
        return (
            <Animated.View style={ this.position.getLayout() }>
                <View style={ styles.circle } />
            </Animated.View>
        );
    }
}


const styles = {
   circle: {
        height: 100,
          width: 100,
      borderRadius: 100,
        backgroundColor: 'red'
    }
}
export default circleAnimation;

App.js code:

import React, { Component } from 'react';
import { View,StyleSheet } from 'react-native';
import SquareAnimation from './circleAnimation';


export default class App extends Component {
  render() {
    return (
      <View style={{backgroundcolor:'pink',flex:1}}>
        <circleAnimation />
      </View>
    );
  }
}
const styles = StyleSheet.create({
   container: {
      justifyContent: 'center',
      alignItems: 'center',
      flex: 1
   },
   ll: {
     width: 10,
    height: 10,
    borderRadius:5 ,
    backgroundColor: "pink",
    transform: [{ scaleX: 1}],
      
   },
    circlex: {
     width: 10,
    height: 10,
    borderRadius:5 ,
    backgroundColor: "pink",
    transform: [{ scaleX: 1}],
      
   }
})

Output:

Here the circle figure moves vertically.

Explanation :

Firstly we have imported all the necessary components. Let's look at the code which has a major contribution to animation.

this.position = new Animated.ValueXY(0, 0);
        Animated.spring(this.position, {
            toValue: { x: 225, y: 100 }
        }).start();

The start is the call to animation. The first animated.values decide the starting point from where the animation will be started. Next, we signify up to where the figure will move, and it would be decided by { x: 225, y: 100 }. x and y can be considered as the axis of the graph, and the figure moves by following the values of x and y. Lastly, we called the start function, which will make the figure move or start the animation. We are using mounting for the execution of animation.

circle: {
        height: 100,
          width: 100,
      borderRadius: 100,
        backgroundColor: 'red'
    }

This part is responsible for the creation of a figure. We can create any figure as per our requirement. Here I have created a circle, and the above code is the syntax for constructing a circle. This was the basic introduction to the animation API of react-native. we will be using more animation in further parts examples when we will be creating some responsive applications.

React Native Tutorial

Misc