How to run two different animation in react- native one by one? - react-native

Question

I want to implement animation in my react native app. I have created the animation but facing difficulty to manage these according to my requirement.
I want to show animation one by one.
Here is the video link for animation currently showing in my app :-
https://www.dropbox.com/s/jzwqpbkp6fqi8qw/SLXG5627.MP4?dl=0
In this video both animation working parallel, so I want to manage them one by one, like first animation complete then second will run.
Here is the code that I have written for that :-
constructor(props) {
super(props)
this.animatedValue = new Animated.Value(0);
this.animatedValue1 = new Animated.Value(3);
this.animatedValue2 = new Animated.Value(300);
this.state = {
userData: getUserDetail(),
vouch_height: new Animated.Value(30),
vouch_width: new Animated.Value(30),
startSecond:false,
startFirst:true,
startFirst:false
}
}
animation() {
this.animatedValue.setValue(0)
this.animatedValue1.setValue(3)
this.animatedValue2.setValue(300)
Animated.sequence([
Animated.parallel([
Animated.timing(
this.animatedValue,
{
toValue: 2,
duration: 2500,
useNativeDriver: false
}
),
Animated.timing(this.animatedValue1, {
toValue: 0.3,
duration: 2500,
useNativeDriver: false
}),
Animated.timing(this.animatedValue2, {
toValue: 50,
duration: 2500,
useNativeDriver: false
})
])
]).start()
}
animation1() {
this.state.vouch_height.setValue(30)
this.state.vouch_width.setValue(30)
Animated.sequence([
Animated.parallel([
Animated.timing(
this.state.vouch_width, // The animated value to drive
{
toValue: 50, // Animate to opacity: 1 (opaque)
duration: 150, // Make it take a while
useNativeDriver: false,
},
), // Starts the animation
Animated.timing(
this.state.vouch_height, // The animated value to drive
{
toValue: 50, // Animate to opacity: 1 (opaque)
duration: 150, // Make it take a while
useNativeDriver: false,
},
)
]),
Animated.parallel([
Animated.timing(
this.state.vouch_width, // The animated value to drive
{
toValue: 30, // Animate to opacity: 1 (opaque)
duration: 150, // Make it take a while
useNativeDriver: false,
},
), // Starts the animation
Animated.timing(
this.state.vouch_height, // The animated value to drive
{
toValue: 30, // Animate to opacity: 1 (opaque)
duration: 150, // Make it take a while
useNativeDriver: false,
},
),
])
]).start()
}
Here is the render method :-
render() {
const { thumbnailSource, source, style, ...props } = this.props;
return (
<Modal
animationIn='fadeIn'
animationOut='fadeOut'
style={styles.modalContent}
isVisible={this.props.isVisible}
flex={1}
justifyContent='center'
alignItems='center'
backdropOpacity={0.0}
hideModalContentWhileAnimating={true}
>{this.props.isVisible ? <>
{this.animation()}
<View style={{ top: 50, height: this.props.viewHeight + 50, width: windowWidth, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(255, 255, 255, 0.8)' }}>
<Animated.View
useNativeDriver={true}
style={{
height: 300,
width: 300,
backgroundColor: "white",
justifyContent: "center",
alignItems: "center",
borderRadius: 150,
opacity: this.animatedValue1,
transform: [
{
translateY: this.animatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 250]
})
},
{
scaleX: this.animatedValue.interpolate({
inputRange: [0, 1, 2],
outputRange: [1, 0, 0],
})
},
{
scaleY: this.animatedValue.interpolate({
inputRange: [0, 1, 2],
outputRange: [1, 0, 0],
})
},
],
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 9,
},
shadowOpacity: 0.9,
shadowRadius: 40.35,
elevation: 19,
}}
>
<FastImage style={[
styles.imageStyle,
]}
source={this.props.img}
resizeMode='cover' />
</Animated.View>
</View>
{this.animation1()}
<Animated.View style={{
position: 'absolute', top: global.vouchIconPossision.y,
width: this.state.vouch_width,
height: this.state.vouch_height,
margin: 0,
}}>
<global.UserImg />
</Animated.View>
</> : null}
</Modal >
)
}
}
What I am doing wrong, can anyone please suggest me ?

Answer 1

I think you need to remove Animated.parallel, and use just Animated.sequence
Animated.sequence([
Animated.timing(
...
),
Animated.timing(
...
),
]).start()

Answer 2

call 2nd animation in "start()" as callback.
Change first method like this.
animation(callbackAnimation) {
this.animatedValue.setValue(0)
this.animatedValue1.setValue(3)
this.animatedValue2.setValue(300)
Animated.sequence([
Animated.parallel([
Animated.timing(
this.animatedValue,
{
toValue: 2,
duration: 2500,
useNativeDriver: false
}
),
Animated.timing(this.animatedValue1, {
toValue: 0.3,
duration: 2500,
useNativeDriver: false
}),
Animated.timing(this.animatedValue2, {
toValue: 50,
duration: 2500,
useNativeDriver: false
})
])
]).start(callbackAnimation())
}
Then call it like this
animation(animation1);