diff --git a/docs/animations.html b/docs/animations.html index 80a5b53a1d0..2264f120ae7 100644 --- a/docs/animations.html +++ b/docs/animations.html @@ -90,9 +90,9 @@ already implemented in the Easing class including quadratic, exponential, and bezier curves as well as functions like step and bounce. interpolation also has configurable behavior for -extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, -extrapolateLeft or extrapolateRight options. The default value is -extend but you can use clamp to prevent the output value from exceeding +extrapolating the outputRange. You can set the extrapolation by setting the extrapolate, +extrapolateLeft or extrapolateRight options. The default value is +extend but you can use clamp to prevent the output value from exceeding outputRange.

Tracking Dynamic Values #

Animated values can also track other values. Just set the toValue of an animation to another animated value instead of a plain number, for example with spring physics for an interaction like "Chat Heads", or via timing with @@ -116,12 +116,15 @@ contains nested objects. In the example, you can see that scrollX event.nativeEvent.contentOffset.x (event is normally the first arg to the handler), and pan.x and pan.y map to gestureState.dx and gestureState.dy, respectively (gestureState is the second arg passed to the PanResponder handler).

onScroll={Animated.event( - [{nativeEvent: {contentOffset: {x: scrollX}}}] // scrollX = e.nativeEvent.contentOffset.x -)} + // scrollX = e.nativeEvent.contentOffset.x + [{nativeEvent: {contentOffset: {x: scrollX}}}] +)} onPanResponderMove={Animated.event([ null, // ignore the native event - {dx: pan.x, dy: pan.y} // extract dx and dy from gestureState -]);

Responding to the Current Animation Value #

You may notice that there is no obvious way to read the current value while + // extract dx and dy from gestureState + // like 'pan.x = gestureState.dx, pan.y = gestureState.dy' + {dx: pan.x, dy: pan.y} +]);

Responding to the Current Animation Value #

You may notice that there is no obvious way to read the current value while animating - this is because the value may only be known in the native runtime due to optimizations. If you need to run JavaScript in response to the current value, there are two approaches: