React Native Advance Animation

In this tutorial, we used react native parallel function to do an advance animation to combine spring and timing function together. We have used the some concepts like Animated.timing and interpolation from our previous tutorials. You look at them if you don't understand what they are.

1. Spring function to simulate real word object falling using friction and tension.

2. We have used the timing function to control rotate and border change animation.

3. At the end, we used the parallel function to call run them at the same time.

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

export default class Sequence extends Component {
    state={
        fall: new Animated.Value(150),
        rotate: new Animated.Value(0),
        border: new Animated.Value(0),
    }

    componentDidMount(){
       const fallAnim= Animated.spring(this.state.fall,{
            toValue:350,
            duration:2000,
            useNativeDriver:true,
            friction:1,
            tension:20,
        })

     const rotateAnim=   Animated.timing(this.state.rotate,{
            toValue:1,
            duration:2000,
            useNativeDriver:true,
        })
        const borderAnim=   Animated.timing(this.state.border,{
            toValue:50,
            duration:2000,
            useNativeDriver:true,
        })
        Animated.parallel([
            fallAnim,
            rotateAnim,
            borderAnim,
        ]).start();
    }

    render(){
        const trans={
            
            transform:[
                {translateY:this.state.fall},
                {rotate:this.state.rotate.interpolate({
                    inputRange:[0, 1],
                    outputRange:["0deg", "360deg"],
                })}
            ],
            borderRadius:this.state.border,
        }

        return (
        
            <Animated.View style={[styles.object, trans]}>

            </Animated.View>

        );
    }
}

const styles=StyleSheet.create({
    object:{
        width:100,
        height:100,
        backgroundColor:"#33ccff",
        position:"absolute",
        left:160,
       // top:150,
    }
});

We declared three state variables to animate the values for falling, rotating and radius change. Later we called each of the variables in our animated.timing or animated.spring functions to use them in animation. We also set the end(toValue) and time(duration) value for each function.

See how we are interpolating the rotation value

react native interpolation

The rotate transformations require a string so that the transform may be expressed in degrees (deg) or radians (rad). We start rotation with a value of 0 and end with 1. But react native does not understand 0 and 1 for rotation. That's why we convert all the values from 0-1 to 0 degree to 360 degrees. The conversion is done through react interpolate function. See how the interpolation is work in the below table

input	0	0.1	0.2	.....	0.5	....	0.8	0.9	1
output	0 deg	36 deg	72 deg	.....	180 deg	.....	288 deg	324 deg	360 deg

Spring and Timing

We use together to make a bit more complex animation. Spring function take some extra parameters than timing function. Extract values we added for spring function are friction and tension. The default value for them is 7 and 20 respectively.

Because we wanted to run all these three animations at one time, so we call them inside Animated.parallel() callback. To do that, we created three objects as fallAnim, rotateAnim, borderAnim. But if you want to run them one after another, you need to call all these functions inside Animated.sequence() callback.

Watch the animation tutorial on youtube