Interrupted Animations

When doing combined, and complex animations the chance that an animation is interrupted is relatively high. This means that if any animation that is a part of a combined sequence is stopped or another animation is triggered on the value the whole sequence will stop.

To determine whether or not this has happened you can add a callback to the start call. An object will be the first argument of the callback and it will have a finished boolean.

It looks something like start(({ finished }) => {}).

The only operation that has an option to ignore this is parallel. There is a stopTogether option. This is set to true by default so that all the animation methods operate the same out of the box. However it can be set to false in the config section of parallel

Like so

Animated.parallel(arrayOfAnimations, { stopTogether: false }).start();

The parallel call will take an array of animations and start them all at the same time. A good example of this is when you might have a separate animated value for opacity and a separate animated value for a position of an element. The opacity would be on a strict Animated.timing, but you might want the position to Animated.spring out of the way.

Also if you just have multiple timed animations and you need them to animate at the same time you can do that as well. The start callback won't be called until the last animation is finished. Which would be the scaleAnimation that runs for 500 milliseconds.

handlePress = () => {
  Animated.parallel([
    Animated.timing(this.state.colorAnimation, {
      toValue: 1,
      duration: 500,
    }),
    Animated.timing(this.state.scaleAnimation, {
      toValue: 2,
      duration: 300,
    }),
  ]).start();
};

This can be used in conjunction with any interpolates like so.

const backgroundColorInterpolate = this.state.colorAnimation.interpolate({
  inputRange: [0, 1],
  outputRange: ["rgb(255,99,71)", "rgb(99,71,255)"],
});
const boxStyle = {
  backgroundColor: backgroundColorInterpolate,
  transform: [{ scale: this.state.scaleAnimation }],
};

This would result in this animation.

Live Demo