React Native Apply Easing Animation on View Object Explained Example Tutorial

Easing is a term in animation to explain different type of moving animations. In animation easing means apply different type of motions on a object like start moving a object fast than stop slowly. Slowing process is called as decelerates the object. There are mainly 4 types of easing available in react native animation. We would learn all 4 types of easing in our tutorial and also learn about React Native Apply Easing Animation on View Object Explained Android iOS Example Tutorial.

Contents in this project React Native Apply Easing Animation on View Object Explained Android iOS Example Tutorial:

1. Import Animated, StyleSheet, View, TouchableWithoutFeedback and Easing component in your project’s main App.js file.

2. Create our main default class named as App extends Component. this is our main Root View class .

3. Creating constructor() in your main class. Now we would make a State named as animationValue with default Animated Zero value. We would use this animated value to modify the animation values like staring and stopping the animation.

4. Create a function named as startAnimation(). In this function we would first start the animation using Animated.timing(). Now we would set the animation moving distance using toValue and set animation performing timing using duration.

  • toValue = Animation movement distance.
  • duration = Animation performing time. In how much time animation will start and complete.
  • Easing.bounce = To perform bouncing animation of Object.
  • Easing.back = Using back easing the object will slightly move back before going forward.
  • Easing.elastic = Used to perform basic Spring bouncing animation.
  • Easing.bezier = Used to perform cubic behavior curved easing animation in react native.

5. Create a constant style named as animatedStyle in render’s block. Now we would update the translateY value using animationValue State.

6. Creating a Root view in render’s return block. Now we would make a Animated.View component and wrap it in TouchableWithoutFeedback to set onPress on it. The animation will perform on Animated.View component.

7. Creating Style.

8. Complete Source Code for App.js file class:

Screenshots:

React Native Apply Easing Animation on View Object Explained Example Tutorial

React Native Apply Easing Animation on View Object Explained Example Tutorial