Your spinner is ready to use, just run your application.
<!---------------------- Group of Animation --------------------------->
<br/>
<br/>
<aname="group-animation"></a>
## 3. Group Animation
In this section, we will try to work all animation in one screen component. If you wonder that follow the steps, how to use it. :D
For the last time, we will add `Animated` to our project. Open `GroupAnimation` file.
```javascript
import{
Text,
View,
StyleSheet,
Animated,// Add this line
TouchableOpacity
}from"react-native";
```
Let's create our, render section for seeing animations. Firstly define states before the return. We will use it in the next steps.
```javascript
render(){
let{slideUpValue,fadeValue,SlideInLeft}=this.state;// Add this line
return(
<View>YOURCOMPONENTS</View>
)
}
```
**First Animation:**
```xml
<Viewstyle={styles.container}>
<Animated.View
style={{
transform:[
{
translateX:slideUpValue.interpolate({
inputRange:[0,1],
outputRange:[-600,0]
})
}
],
flex:1,
height:250,
width:200,
borderRadius:12,
backgroundColor:"#c00",
justifyContent:"center"
}}
>
<Textstyle={styles.text}>SlideUp </Text>
</Animated.View>
</View>
```
**Second Animation:**
Add Second Animation to render.
```xml
<Viewstyle={styles.container}>
<!-- Under First Animation -->
<Animated.View
style={{
transform:[
{
translateY:SlideInLeft.interpolate({
inputRange:[0,1],
outputRange:[600,0]
})
}
],
flex:1,
height:250,
width:200,
borderRadius:12,
backgroundColor:"#347a2a",
justifyContent:"center"
}}
>
<Textstyle={styles.text}>SlideInLeft</Text>
</Animated.View>
</View>
```
**Third Animation:**
Add Third Animation to render.
```xml
<Viewstyle={styles.container}>
<!-- Under First Animation -->
<!-- Under Second Animation -->
<Animated.View
style={{
opacity:fadeValue,
flex:1,
height:250,
width:200,
borderRadius:12,
backgroundColor:"#f4f",
justifyContent:"center"
}}
>
<Textstyle={styles.text}>Fade</Text>
</Animated.View>
</View>
```
And now, we define `state`, `first animation`, `second animation` and `third animation` in the render area. We will define `defaultState` in `constructor.`
```javascript
constructor(props){
super(props)
this.state={
SlideInLeft:newAnimated.Value(0),
slideUpValue:newAnimated.Value(0),
fadeValue:newAnimated.Value(0)
};
}
```
> Note: Be patient these are last steps for complete whole group animation. :D
We will add a function for using animation in one page. The function is called `startAnimation()`.
```javascript
startAnimation=()=>{
returnAnimated.parallel([
Animated.timing(this.state.SlideInLeft,{
toValue:1,
duration:500,
useNativeDriver:true
}),
Animated.timing(this.state.fadeValue,{
toValue:1,
duration:500,
useNativeDriver:true
}),
Animated.timing(this.state.slideUpValue,{
toValue:1,
duration:500,
useNativeDriver:true
})
]).start();
};
```
Call your `startAnimation()` function in render area.
