How to add side effects while running an Animated animation sequence? - animation

Question

Im trying to build a countdown timer, and for each count i want play a sound. The animation works fine but i want to know if i can play the sound when running an animation in a sequence.
CODE:
Animated.sequence([
Animated.timing(this.state.moveY3, {
toValue: 50,
duration: 1000,
useNativeDrive: true,
easing: Easing.spring
}), // play sound
Animated.timing(this.state.moveY3, {
toValue: 100,
duration: 100,
useNativeDrive: true,
}),
Animated.timing(this.state.moveY2, {
toValue: 50,
duration: 1000,
useNativeDrive: true,
easing: Easing.spring
}), //play sound
Animated.timing(this.state.moveY2, {
toValue: 100,
duration: 500,
useNativeDrive: true,
}),
Animated.timing(this.state.moveY1, {
toValue: 50,
duration: 1000,
useNativeDrive: true,
easing: Easing.spring
}), // play sound
Animated.timing(this.state.moveY1, {
toValue: 100,
duration: 500,
useNativeDrive: true,
}),
]).start()
Note: I know how to play sound, Im using the react-native-sound package, Im just confused as to how to the play the sound at each count.

Answer 1

Into the start() method of each Animation a callback can be added which is executed upon completion of the animation.
So instead of writing all your animation in a sequence you could break it up into smaller parts, like so:
// Run animation
animation1.start(() => {
playSound1();
Animated.sequence([
animation2,
animation3,
]).start(() => {
playSound2();
Animated.sequence([
animation4,
animation5,
]).start(() => {
playSound3();
animation6.start();
})
})
});
// Move animations into variables so that the execution of the animation is more readable
const animation1 = Animated.timing(this.state.moveY3, {
toValue: 50,
duration: 1000,
useNativeDrive: true,
easing: Easing.spring
});
const animation2 = Animated.timing(this.state.moveY3, {
toValue: 100,
duration: 100,
useNativeDrive: true,
}),
const animation3 = Animated.timing(this.state.moveY2, {
toValue: 50,
duration: 1000,
useNativeDrive: true,
easing: Easing.spring
}),
...
By moving some stuff of the first bit into other functions you could reduce the nesting a bit and make it more readable.. but it should work like that..