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.
|
1
2
3
|
import React, {Component} from ‘react’;
import { Animated, StyleSheet, View, TouchableWithoutFeedback, Easing } from ‘react-native’;
|
2. Create our main default class named as App extends Component. this is our main Root View class .
|
1
2
3
4
|
export default class App extends Component {
}
|
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.
|
1
2
3
4
5
6
|
constructor(){
super();
this.state={
animationValue : new Animated.Value(0)
}
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
startAnimation=()=>{
Animated.timing(this.state.animationValue,{
toValue : 270,
duration : 500,
// easing: Easing.bounce,
// easing : Easing.back(10),
// easing : Easing.elastic(5),
easing : Easing.bezier(.07, 1, .33, .89),
}).start();
}
|
5. Create a constant style named as animatedStyle in render’s block. Now we would update the translateY value using animationValue State.
|
1
2
3
4
5
6
7
8
9
10
11
|
render() {
const animatedStyle = {
transform: [{ translateY : this.state.animationValue }],
}
return (
);
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
render() {
const animatedStyle = {
transform: [{ translateY : this.state.animationValue }],
}
return (
<View style={styles.MainContainer}>
<TouchableWithoutFeedback onPress={this.startAnimation}>
<Animated.View style={[styles.animatedBox, animatedStyle]} >
</Animated.View>
</TouchableWithoutFeedback>
</View>
);
}
|
7. Creating Style.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems : ‘center’,
padding: 12
},
animatedBox:
{
width : 100,
height: 100,
backgroundColor : ‘#0091EA’
}
});
|
8. Complete Source Code for App.js file class:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
import React, {Component} from ‘react’;
import { Animated, StyleSheet, View, TouchableWithoutFeedback, Easing } from ‘react-native’;
export default class App extends Component {
constructor(){
super();
this.state={
animationValue : new Animated.Value(0)
}
}
startAnimation=()=>{
Animated.timing(this.state.animationValue,{
toValue : 270,
duration : 500,
// easing: Easing.bounce,
// easing : Easing.back(10),
// easing : Easing.elastic(5),
easing : Easing.bezier(.07, 1, .33, .89),
// easing : Easing.ease(20)
}).start();
}
render() {
const animatedStyle = {
transform: [{ translateY : this.state.animationValue }],
}
return (
<View style={styles.MainContainer}>
<TouchableWithoutFeedback onPress={this.startAnimation}>
<Animated.View style={[styles.animatedBox, animatedStyle]} >
</Animated.View>
</TouchableWithoutFeedback>
</View>
);
}
};
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: ‘center’,
alignItems : ‘center’,
padding: 12
},
animatedBox:
{
width : 100,
height: 100,
backgroundColor : ‘#0091EA’
}
});
|
Screenshots:
Also Read :
React Native Picker Spinner DropDown List iOS Android Example
React Native SectionList Component iOS Android Example Tutorial
React Native Pass TextInput Entered Value From One Activity Screen to Another
React Native Change Activity Action Bar Title Text Color StackNavigator
React Native Installing Realm Mobile Database in iOS Android Tutorial
