Lesson 17
Animated.parallel
Animated.parallel
The parallel call will have all defined animations in the array trigger at the same time.
this._opacityAnimationValue = new Animated.Value(1);
this._moveAnimationValue = new Animated.ValueXY();
Animated.parallel([
Animated.timing(this._moveAnimationValue, {
toValue: 100,
duration: 500
}),
Animated.timing(this._opacityAnimationValue, {
toValue: 0,
duration: 200
})
]).start()
<Animated.View style={{opacity: this._opacityAnimationValue, transform: this._moveAnimationValue.getTranslateTransform()}} />
In our example here, we have 2 animations. One that will control opacity, and the other movement ( or in our case translateX/translateY).
The first animation will move the View from x: 0, y: 0 to x: 100, y: 100.
At the same time our second animation will kick off and it will fade out the opacity from 1 to 0.
So the Animated.View will move and fade out at the same time.