Our delay animation is a great example of a complex animation with multiple combined animations. These can all be nested in any fashion as deep as you want. Including timing
, stagger
, spring
, parallel
, delay
, sequence
, etc. However do not that the start
callback will not be called until ALL animations are completed.
So here with our delay animation, these run sequentially. This animation would last for 500 + 300 + 1500 + 500
, and then our start
would be called.
Animated.sequence([ Animated.timing(this.state.colorAnimation, { toValue: 1, duration: 500, }), Animated.timing(this.state.scaleAnimation, { toValue: 2, duration: 300, }), Animated.delay(1500), Animated.parallel([ Animated.timing(this.state.colorAnimation, { toValue: 0, duration: 500, }), Animated.timing(this.state.scaleAnimation, { toValue: 1, duration: 300, }), ]), ]).start();