timing, spring and decay

Animated.timing() runs for a duration (default 500 ms) along an easing curve (default Easing.inOut(Easing.ease)). Animated.spring() simulates a damped spring, configured by stiffness, damping and mass, or by friction and tension, or bounciness and speed. Animated.decay() starts at a velocity in pixels per millisecond and slows by deceleration (default 0.997), as a flick does. useNativeDriver is required in every config; leave it out and React Native 36,878 warns.

src/anim/Drivers.tsx: the three drivers side by side (excerpt)TSX

    let peak = 0;
    b.addListener(({ value }) => { peak = Math.max(peak, value); });
    Animated.timing(a, { toValue: 250, duration: 800, useNativeDriver: true })
      .start(({ finished }) => log('timing done', finished));
    Animated.spring(b, { toValue: 250, stiffness: 100, damping: 10, mass: 1,
      useNativeDriver: true }).start(() => log('spring done, peak', peak.toFixed(1)));
    Animated.decay(c, { velocity: 1, deceleration: 0.997, useNativeDriver: true })
      .start(() => c.stopAnimation((v) => log('decay done at', v.toFixed(1))));

Output

 LOG  +931ms timing done true
 LOG  +2051ms decay done at 331.8
 LOG  +3117ms spring done, peak 290.6

The physics checks out: a damping ratio of 10 / (2 x sqrt(100)) = 0.5 means a 16.3% overshoot, a peak of 290.8, and the decay tends to velocity / (1 - deceleration) = 333 dp, stopping just short.

useNativeDriver: true sends the animation to the UI thread once; JavaScript is not involved per frame

MENU

timing, spring and decay