mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
154 lines
39 KiB
Markdown
154 lines
39 KiB
Markdown
---
|
|
id: animated
|
|
title: Animated
|
|
category: APIs
|
|
permalink: docs/animated.html
|
|
---
|
|
<div><div><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and
|
|
easy to build and maintain. <code>Animated</code> focuses on declarative relationships
|
|
between inputs and outputs, with configurable transforms in between, and
|
|
simple <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p><p>The simplest workflow for creating an animation is to to create an
|
|
<code>Animated.Value</code>, hook it up to one or more style attributes of an animated
|
|
component, and then drive updates via animations using <code>Animated.timing()</code>:</p><div class="prism language-javascript">Animated<span class="token punctuation">.</span><span class="token function">timing</span><span class="token punctuation">(</span> <span class="token comment" spellcheck="true"> // Animate value over time
|
|
</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // The value to drive
|
|
</span> <span class="token punctuation">{</span>
|
|
toValue<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // Animate to final value of 1
|
|
</span> <span class="token punctuation">}</span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true"> // Start the animation</span></div><p>Refer to the <a href="docs/animations.html#animated-api" target="_blank">Animations</a> guide to see
|
|
additional examples of <code>Animated</code> in action.</p><h2><a class="anchor" name="overview"></a>Overview <a class="hash-link" href="docs/animated.html#overview">#</a></h2><p>There are two value types you can use with <code>Animated</code>:</p><ul><li><a href="docs/animated.html#value" target="_blank"><code>Animated.Value()</code></a> for single values</li><li><a href="docs/animated.html#valuexy" target="_blank"><code>Animated.ValueXY()</code></a> for vectors</li></ul><p><code>Animated.Value</code> can bind to style properties or other props, and can be
|
|
interpolated as well. A single <code>Animated.Value</code> can drive any number of
|
|
properties.</p><h3><a class="anchor" name="configuring-animations"></a>Configuring animations <a class="hash-link" href="docs/animated.html#configuring-animations">#</a></h3><p><code>Animated</code> provides three types of animation types. Each animation type
|
|
provides a particular animation curve that controls how your values animate
|
|
from their initial value to the final value:</p><ul><li><a href="docs/animated.html#decay" target="_blank"><code>Animated.decay()</code></a> starts with an initial
|
|
velocity and gradually slows to a stop.</li><li><a href="docs/animated.html#spring" target="_blank"><code>Animated.spring()</code></a> provides a simple
|
|
spring physics model.</li><li><a href="docs/animated.html#timing" target="_blank"><code>Animated.timing()</code></a> animates a value over time
|
|
using <a href="docs/easing.html" target="_blank">easing functions</a>.</li></ul><p>In most cases, you will be using <code>timing()</code>. By default, it uses a symmetric
|
|
easeInOut curve that conveys the gradual acceleration of an object to full
|
|
speed and concludes by gradually decelerating to a stop.</p><h3><a class="anchor" name="working-with-animations"></a>Working with animations <a class="hash-link" href="docs/animated.html#working-with-animations">#</a></h3><p>Animations are started by calling <code>start()</code> on your animation. <code>start()</code>
|
|
takes a completion callback that will be called when the animation is done.
|
|
If the animation finished running normally, the completion callback will be
|
|
invoked with <code>{finished: true}</code>. If the animation is done because <code>stop()</code>
|
|
was called on it before it could finish (e.g. because it was interrupted by a
|
|
gesture or another animation), then it will receive <code>{finished: false}</code>.</p><h3><a class="anchor" name="using-the-native-driver"></a>Using the native driver <a class="hash-link" href="docs/animated.html#using-the-native-driver">#</a></h3><p>By using the native driver, we send everything about the animation to native
|
|
before starting the animation, allowing native code to perform the animation
|
|
on the UI thread without having to go through the bridge on every frame.
|
|
Once the animation has started, the JS thread can be blocked without
|
|
affecting the animation.</p><p>You can use the native driver by specifying <code>useNativeDriver: true</code> in your
|
|
animation configuration. See the
|
|
<a href="docs/animations.html#using-the-native-driver" target="_blank">Animations</a> guide to learn
|
|
more.</p><h3><a class="anchor" name="animatable-components"></a>Animatable components <a class="hash-link" href="docs/animated.html#animatable-components">#</a></h3><p>Only animatable components can be animated. These special components do the
|
|
magic of binding the animated values to the properties, and do targeted
|
|
native updates to avoid the cost of the react render and reconciliation
|
|
process on every frame. They also handle cleanup on unmount so they are safe
|
|
by default.</p><ul><li><a href="docs/animated.html#createanimatedcomponent" target="_blank"><code>createAnimatedComponent()</code></a>
|
|
can be used to make a component animatable.</li></ul><p><code>Animated</code> exports the following animatable components using the above
|
|
wrapper:</p><ul><li><code>Animated.Image</code></li><li><code>Animated.ScrollView</code></li><li><code>Animated.Text</code></li><li><code>Animated.View</code></li></ul><h3><a class="anchor" name="composing-animations"></a>Composing animations <a class="hash-link" href="docs/animated.html#composing-animations">#</a></h3><p>Animations can also be combined in complex ways using composition functions:</p><ul><li><a href="docs/animated.html#delay" target="_blank"><code>Animated.delay()</code></a> starts an animation after
|
|
a given delay.</li><li><a href="docs/animated.html#parallel" target="_blank"><code>Animated.parallel()</code></a> starts a number of
|
|
animations at the same time.</li><li><a href="docs/animated.html#sequence" target="_blank"><code>Animated.sequence()</code></a> starts the animations
|
|
in order, waiting for each to complete before starting the next.</li><li><a href="docs/animated.html#stagger" target="_blank"><code>Animated.stagger()</code></a> starts animations in
|
|
order and in parallel, but with successive delays.</li></ul><p>Animations can also be chained together simply by setting the <code>toValue</code> of
|
|
one animation to be another <code>Animated.Value</code>. See
|
|
<a href="docs/animations.html#tracking-dynamic-values" target="_blank">Tracking dynamic values</a> in
|
|
the Animations guide.</p><p>By default, if one animation is stopped or interrupted, then all other
|
|
animations in the group are also stopped.</p><h3><a class="anchor" name="combining-animated-values"></a>Combining animated values <a class="hash-link" href="docs/animated.html#combining-animated-values">#</a></h3><p>You can combine two animated values via addition, multiplication, division,
|
|
or modulo to make a new animated value:</p><ul><li><a href="docs/animated.html#add" target="_blank"><code>Animated.add()</code></a></li><li><a href="docs/animated.html#divide" target="_blank"><code>Animated.divide()</code></a></li><li><a href="docs/animated.html#modulo" target="_blank"><code>Animated.modulo()</code></a></li><li><a href="docs/animated.html#multiply" target="_blank"><code>Animated.multiply()</code></a></li></ul><h3><a class="anchor" name="interpolation"></a>Interpolation <a class="hash-link" href="docs/animated.html#interpolation">#</a></h3><p>The <code>interpolate()</code> function allows input ranges to map to different output
|
|
ranges. By default, it will extrapolate the curve beyond the ranges given,
|
|
but you can also have it clamp the output value. It uses lineal interpolation
|
|
by default but also supports easing functions.</p><ul><li><a href="docs/animated.html#interpolate" target="_blank"><code>interpolate()</code></a></li></ul><p>Read more about interpolation in the
|
|
<a href="docs/animations.html#interpolation" target="_blank">Animation</a> guide.</p><h3><a class="anchor" name="handling-gestures-and-other-events"></a>Handling gestures and other events <a class="hash-link" href="docs/animated.html#handling-gestures-and-other-events">#</a></h3><p>Gestures, like panning or scrolling, and other events can map directly to
|
|
animated values using <code>Animated.event()</code>. This is done with a structured map
|
|
syntax so that values can be extracted from complex event objects. The first
|
|
level is an array to allow mapping across multiple args, and that array
|
|
contains nested objects.</p><ul><li><a href="docs/animated.html#event" target="_blank"><code>Animated.event()</code></a></li></ul><p>For example, when working with horizontal scrolling gestures, you would do
|
|
the following in order to map <code>event.nativeEvent.contentOffset.x</code> to
|
|
<code>scrollX</code> (an <code>Animated.Value</code>):</p><div class="prism language-javascript"> onScroll<span class="token operator">=</span><span class="token punctuation">{</span>Animated<span class="token punctuation">.</span><span class="token function">event</span><span class="token punctuation">(</span>
|
|
<span class="token comment" spellcheck="true"> // scrollX = e.nativeEvent.contentOffset.x
|
|
</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> nativeEvent<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
contentOffset<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
|
x<span class="token punctuation">:</span> scrollX
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">]</span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">}</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/animated.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="decay"></a><span class="methodType">static </span>decay<span class="methodType">(value, config)</span> <a class="hash-link" href="docs/animated.html#decay">#</a></h4><div><p>Animates a value from an initial velocity to zero based on a decay
|
|
coefficient.</p><p>Config is an object that may have the following options:</p><ul><li><code>velocity</code>: Initial velocity. Required.</li><li><code>deceleration</code>: Rate of decay. Default 0.997.</li><li><code>useNativeDriver</code>: Uses the native driver when true. Default false.</li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="timing"></a><span class="methodType">static </span>timing<span class="methodType">(value, config)</span> <a class="hash-link" href="docs/animated.html#timing">#</a></h4><div><p>Animates a value along a timed easing curve. The
|
|
<a href="docs/easing.html" target="_blank"><code>Easing</code></a> module has tons of predefined curves, or you
|
|
can use your own function.</p><p>Config is an object that may have the following options:</p><ul><li><code>duration</code>: Length of animation (milliseconds). Default 500.</li><li><code>easing</code>: Easing function to define curve.
|
|
Default is <code>Easing.inOut(Easing.ease)</code>.</li><li><code>delay</code>: Start the animation after delay (milliseconds). Default 0.</li><li><code>useNativeDriver</code>: Uses the native driver when true. Default false.</li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="spring"></a><span class="methodType">static </span>spring<span class="methodType">(value, config)</span> <a class="hash-link" href="docs/animated.html#spring">#</a></h4><div><p>Spring animation based on Rebound and
|
|
<a href="https://facebook.github.io/origami/" target="_blank">Origami</a>. Tracks velocity state to
|
|
create fluid motions as the <code>toValue</code> updates, and can be chained together.</p><p>Config is an object that may have the following options. Note that you can
|
|
only define bounciness/speed or tension/friction but not both:</p><ul><li><code>friction</code>: Controls "bounciness"/overshoot. Default 7.</li><li><code>tension</code>: Controls speed. Default 40.</li><li><code>speed</code>: Controls speed of the animation. Default 12.</li><li><code>bounciness</code>: Controls bounciness. Default 8.</li><li><code>useNativeDriver</code>: Uses the native driver when true. Default false.</li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="add"></a><span class="methodType">static </span>add<span class="methodType">(a, b)</span> <a class="hash-link" href="docs/animated.html#add">#</a></h4><div><p>Creates a new Animated value composed from two Animated values added
|
|
together.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="divide"></a><span class="methodType">static </span>divide<span class="methodType">(a, b)</span> <a class="hash-link" href="docs/animated.html#divide">#</a></h4><div><p>Creates a new Animated value composed by dividing the first Animated value
|
|
by the second Animated value.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="multiply"></a><span class="methodType">static </span>multiply<span class="methodType">(a, b)</span> <a class="hash-link" href="docs/animated.html#multiply">#</a></h4><div><p>Creates a new Animated value composed from two Animated values multiplied
|
|
together.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="modulo"></a><span class="methodType">static </span>modulo<span class="methodType">(a, modulus)</span> <a class="hash-link" href="docs/animated.html#modulo">#</a></h4><div><p>Creates a new Animated value that is the (non-negative) modulo of the
|
|
provided Animated value</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="diffclamp"></a><span class="methodType">static </span>diffClamp<span class="methodType">(a, min, max)</span> <a class="hash-link" href="docs/animated.html#diffclamp">#</a></h4><div><p>Create a new Animated value that is limited between 2 values. It uses the
|
|
difference between the last value so even if the value is far from the bounds
|
|
it will start changing when the value starts getting closer again.
|
|
(<code>value = clamp(value + diff, min, max)</code>).</p><p>This is useful with scroll events, for example, to show the navbar when
|
|
scrolling up and to hide it when scrolling down.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="delay"></a><span class="methodType">static </span>delay<span class="methodType">(time)</span> <a class="hash-link" href="docs/animated.html#delay">#</a></h4><div><p>Starts an animation after the given delay.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="sequence"></a><span class="methodType">static </span>sequence<span class="methodType">(animations)</span> <a class="hash-link" href="docs/animated.html#sequence">#</a></h4><div><p>Starts an array of animations in order, waiting for each to complete
|
|
before starting the next. If the current running animation is stopped, no
|
|
following animations will be started.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="parallel"></a><span class="methodType">static </span>parallel<span class="methodType">(animations, config?)</span> <a class="hash-link" href="docs/animated.html#parallel">#</a></h4><div><p>Starts an array of animations all at the same time. By default, if one
|
|
of the animations is stopped, they will all be stopped. You can override
|
|
this with the <code>stopTogether</code> flag.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="stagger"></a><span class="methodType">static </span>stagger<span class="methodType">(time, animations)</span> <a class="hash-link" href="docs/animated.html#stagger">#</a></h4><div><p>Array of animations may run in parallel (overlap), but are started in
|
|
sequence with successive delays. Nice for doing trailing effects.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="loop"></a><span class="methodType">static </span>loop<span class="methodType">(animation)</span> <a class="hash-link" href="docs/animated.html#loop">#</a></h4><div><p>Loops a given animation continuously, so that each time it reaches the
|
|
end, it resets and begins again from the start. Can specify number of
|
|
times to loop using the key 'iterations' in the config. Will loop without
|
|
blocking the UI thread if the child animation is set to 'useNativeDriver'.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="event"></a><span class="methodType">static </span>event<span class="methodType">(argMapping, config?)</span> <a class="hash-link" href="docs/animated.html#event">#</a></h4><div><p>Takes an array of mappings and extracts values from each arg accordingly,
|
|
then calls <code>setValue</code> on the mapped outputs. e.g.</p><div class="prism language-javascript"> onScroll<span class="token operator">=</span><span class="token punctuation">{</span>Animated<span class="token punctuation">.</span><span class="token function">event</span><span class="token punctuation">(</span>
|
|
<span class="token punctuation">[</span><span class="token punctuation">{</span>nativeEvent<span class="token punctuation">:</span> <span class="token punctuation">{</span>contentOffset<span class="token punctuation">:</span> <span class="token punctuation">{</span>x<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_scrollX<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">{</span>listener<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // Optional async listener
|
|
</span> <span class="token punctuation">)</span><span class="token punctuation">}</span>
|
|
<span class="token operator">...</span>
|
|
onPanResponderMove<span class="token punctuation">:</span> Animated<span class="token punctuation">.</span><span class="token function">event</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
|
|
<span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // raw event arg ignored
|
|
</span> <span class="token punctuation">{</span>dx<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_panX<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // gestureState arg
|
|
</span> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span></div><p>Config is an object that may have the following options:</p><ul><li><code>listener</code>: Optional async listener.</li><li><code>useNativeDriver</code>: Uses the native driver when true. Default false.</li></ul></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="createanimatedcomponent"></a><span class="methodType">static </span>createAnimatedComponent<span class="methodType">(Component)</span> <a class="hash-link" href="docs/animated.html#createanimatedcomponent">#</a></h4><div><p>Make any React component Animatable. Used to create <code>Animated.View</code>, etc.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="attachnativeevent"></a><span class="methodType">static </span>attachNativeEvent<span class="methodType">(viewRef, eventName, argMapping)</span> <a class="hash-link" href="docs/animated.html#attachnativeevent">#</a></h4><div><p>Imperative API to attach an animated value to an event on a view. Prefer using
|
|
<code>Animated.event</code> with <code>useNativeDrive: true</code> if possible.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="forkevent"></a><span class="methodType">static </span>forkEvent<span class="methodType">(event, listener)</span> <a class="hash-link" href="docs/animated.html#forkevent">#</a></h4><div><p>Advanced imperative API for snooping on animated events that are passed in through props. Use
|
|
values directly where possible.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="unforkevent"></a><span class="methodType">static </span>unforkEvent<span class="methodType">(event, listener)</span> <a class="hash-link" href="docs/animated.html#unforkevent">#</a></h4></div></div></span><span><h3><a class="anchor" name="properties"></a>Properties <a class="hash-link" href="docs/animated.html#properties">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="value"></a>Value<span class="propType">: AnimatedValue</span> <a class="hash-link" href="docs/animated.html#value">#</a></h4><div><p>Standard value class for driving animations. Typically initialized with
|
|
<code>new Animated.Value(0);</code></p><p>See also <a href="docs/animated.html#animatedvalue" target="_blank"><code>AnimatedValue</code></a>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="valuexy"></a>ValueXY<span class="propType">: AnimatedValueXY</span> <a class="hash-link" href="docs/animated.html#valuexy">#</a></h4><div><p>2D value class for driving 2D animations, such as pan gestures.</p><p>See also <a href="docs/animated.html#animatedvaluexy" target="_blank"><code>AnimatedValueXY</code></a>.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="interpolation"></a>Interpolation<span class="propType">: AnimatedInterpolation</span> <a class="hash-link" href="docs/animated.html#interpolation">#</a></h4><div><p>exported to use the Interpolation type in flow</p><p>See also <a href="docs/animated.html#animatedinterpolation" target="_blank"><code>AnimatedInterpolation</code></a>.</p></div></div></div></span><span><div><span><h2><a class="anchor" name="animatedvalue"></a>class AnimatedValue <a class="hash-link" href="docs/animated.html#animatedvalue">#</a></h2><div><div><p>Standard value for driving animations. One <code>Animated.Value</code> can drive
|
|
multiple properties in a synchronized fashion, but can only be driven by one
|
|
mechanism at a time. Using a new mechanism (e.g. starting a new animation,
|
|
or calling <code>setValue</code>) will stop any previous ones.</p></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/animated.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="constructor"></a>constructor<span class="methodType">(value)</span> <a class="hash-link" href="docs/animated.html#constructor">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setvalue"></a>setValue<span class="methodType">(value)</span> <a class="hash-link" href="docs/animated.html#setvalue">#</a></h4><div><p>Directly set the value. This will stop any animations running on the value
|
|
and update all the bound properties.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setoffset"></a>setOffset<span class="methodType">(offset)</span> <a class="hash-link" href="docs/animated.html#setoffset">#</a></h4><div><p>Sets an offset that is applied on top of whatever value is set, whether via
|
|
<code>setValue</code>, an animation, or <code>Animated.event</code>. Useful for compensating
|
|
things like the start of a pan gesture.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="flattenoffset"></a>flattenOffset<span class="methodType">()</span> <a class="hash-link" href="docs/animated.html#flattenoffset">#</a></h4><div><p>Merges the offset value into the base value and resets the offset to zero.
|
|
The final output of the value is unchanged.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="extractoffset"></a>extractOffset<span class="methodType">()</span> <a class="hash-link" href="docs/animated.html#extractoffset">#</a></h4><div><p>Sets the offset value to the base value, and resets the base value to zero.
|
|
The final output of the value is unchanged.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="addlistener"></a>addListener<span class="methodType">(callback)</span> <a class="hash-link" href="docs/animated.html#addlistener">#</a></h4><div><p>Adds an asynchronous listener to the value so you can observe updates from
|
|
animations. This is useful because there is no way to
|
|
synchronously read the value because it might be driven natively.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removelistener"></a>removeListener<span class="methodType">(id)</span> <a class="hash-link" href="docs/animated.html#removelistener">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removealllisteners"></a>removeAllListeners<span class="methodType">()</span> <a class="hash-link" href="docs/animated.html#removealllisteners">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="stopanimation"></a>stopAnimation<span class="methodType">(callback?)</span> <a class="hash-link" href="docs/animated.html#stopanimation">#</a></h4><div><p>Stops any running animation or tracking. <code>callback</code> is invoked with the
|
|
final value after stopping the animation, which is useful for updating
|
|
state to match the animation position with layout.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="resetanimation"></a>resetAnimation<span class="methodType">(callback?)</span> <a class="hash-link" href="docs/animated.html#resetanimation">#</a></h4><div><p>Stops any animation and resets the value to its original</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="interpolate"></a>interpolate<span class="methodType">(config)</span> <a class="hash-link" href="docs/animated.html#interpolate">#</a></h4><div><p>Interpolates the value before updating the property, e.g. mapping 0-1 to
|
|
0-10.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="animate"></a>animate<span class="methodType">(animation, callback)</span> <a class="hash-link" href="docs/animated.html#animate">#</a></h4><div><p>Typically only used internally, but could be used by a custom Animation
|
|
class.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="stoptracking"></a>stopTracking<span class="methodType">()</span> <a class="hash-link" href="docs/animated.html#stoptracking">#</a></h4><div><p>Typically only used internally.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="track"></a>track<span class="methodType">(tracking)</span> <a class="hash-link" href="docs/animated.html#track">#</a></h4><div><p>Typically only used internally.</p></div></div></div></span></div></span><span><h2><a class="anchor" name="animatedvaluexy"></a>class AnimatedValueXY <a class="hash-link" href="docs/animated.html#animatedvaluexy">#</a></h2><div><div><p>2D Value for driving 2D animations, such as pan gestures. Almost identical
|
|
API to normal <code>Animated.Value</code>, but multiplexed. Contains two regular
|
|
<code>Animated.Value</code>s under the hood.</p><h4><a class="anchor" name="example"></a>Example <a class="hash-link" href="docs/animated.html#example">#</a></h4><div class="prism language-javascript"> <span class="token keyword">class</span> <span class="token class-name">DraggableView</span> <span class="token keyword">extends</span> <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
|
<span class="token function">constructor</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">this</span><span class="token punctuation">.</span>state <span class="token operator">=</span> <span class="token punctuation">{</span>
|
|
pan<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Animated<span class="token punctuation">.</span>ValueXY</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token comment" spellcheck="true"> // inits to zero
|
|
</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
|
<span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>panResponder <span class="token operator">=</span> PanResponder<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
|
onStartShouldSetPanResponder<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token boolean">true</span><span class="token punctuation">,</span>
|
|
onPanResponderMove<span class="token punctuation">:</span> Animated<span class="token punctuation">.</span><span class="token function">event</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
|
dx<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pan<span class="token punctuation">.</span>x<span class="token punctuation">,</span><span class="token comment" spellcheck="true"> // x,y are Animated.Value
|
|
</span> dy<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pan<span class="token punctuation">.</span>y<span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
|
onPanResponderRelease<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
|
|
Animated<span class="token punctuation">.</span><span class="token function">spring</span><span class="token punctuation">(</span>
|
|
<span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pan<span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // Auto-multiplexed
|
|
</span> <span class="token punctuation">{</span>toValue<span class="token punctuation">:</span> <span class="token punctuation">{</span>x<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token comment" spellcheck="true"> // Back to zero
|
|
</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
|
<span class="token keyword">return</span> <span class="token punctuation">(</span>
|
|
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View
|
|
<span class="token punctuation">{</span><span class="token operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>panResponder<span class="token punctuation">.</span>panHandlers<span class="token punctuation">}</span>
|
|
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>pan<span class="token punctuation">.</span><span class="token function">getLayout</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">></span>
|
|
<span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>props<span class="token punctuation">.</span>children<span class="token punctuation">}</span>
|
|
<span class="token operator"><</span><span class="token operator">/</span>Animated<span class="token punctuation">.</span>View<span class="token operator">></span>
|
|
<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
|
<span class="token punctuation">}</span>
|
|
<span class="token punctuation">}</span></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/animated.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="constructor"></a>constructor<span class="methodType">(valueIn?)</span> <a class="hash-link" href="docs/animated.html#constructor">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setvalue"></a>setValue<span class="methodType">(value)</span> <a class="hash-link" href="docs/animated.html#setvalue">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="setoffset"></a>setOffset<span class="methodType">(offset)</span> <a class="hash-link" href="docs/animated.html#setoffset">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="flattenoffset"></a>flattenOffset<span class="methodType">()</span> <a class="hash-link" href="docs/animated.html#flattenoffset">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="extractoffset"></a>extractOffset<span class="methodType">()</span> <a class="hash-link" href="docs/animated.html#extractoffset">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="resetanimation"></a>resetAnimation<span class="methodType">(callback?)</span> <a class="hash-link" href="docs/animated.html#resetanimation">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="stopanimation"></a>stopAnimation<span class="methodType">(callback?)</span> <a class="hash-link" href="docs/animated.html#stopanimation">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="addlistener"></a>addListener<span class="methodType">(callback)</span> <a class="hash-link" href="docs/animated.html#addlistener">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removelistener"></a>removeListener<span class="methodType">(id)</span> <a class="hash-link" href="docs/animated.html#removelistener">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="removealllisteners"></a>removeAllListeners<span class="methodType">()</span> <a class="hash-link" href="docs/animated.html#removealllisteners">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="getlayout"></a>getLayout<span class="methodType">()</span> <a class="hash-link" href="docs/animated.html#getlayout">#</a></h4><div><p>Converts <code>{x, y}</code> into <code>{left, top}</code> for use in style, e.g.</p><div class="prism language-javascript"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>anim<span class="token punctuation">.</span><span class="token function">getLayout</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></div></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="gettranslatetransform"></a>getTranslateTransform<span class="methodType">()</span> <a class="hash-link" href="docs/animated.html#gettranslatetransform">#</a></h4><div><p>Converts <code>{x, y}</code> into a useable translation transform, e.g.</p><div class="prism language-javascript"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
|
transform<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>anim<span class="token punctuation">.</span><span class="token function">getTranslateTransform</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
|
|
<span class="token punctuation">}</span><span class="token punctuation">}</span></div></div></div></div></span></div></span><span><h2><a class="anchor" name="animatedinterpolation"></a>class AnimatedInterpolation <a class="hash-link" href="docs/animated.html#animatedinterpolation">#</a></h2><div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/animated.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="constructor"></a>constructor<span class="methodType">(parent, config)</span> <a class="hash-link" href="docs/animated.html#constructor">#</a></h4></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="interpolate"></a>interpolate<span class="methodType">(config)</span> <a class="hash-link" href="docs/animated.html#interpolate">#</a></h4></div></div></span></div></span></div></span></div> |