Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updated docs for next

Browse Source
This commit is contained in:
Website Deployment Script
2017-09-21 07:08:23 +00:00
parent 3c6f1e8294
commit c46fe60dd3
1 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
releases/next/docs/animated.html
+21 -5
View File
@@ -64,13 +64,29 @@ the following in order to map <code>event.nativeEvent.contentOffset.x</code> to
<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
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>isInteraction</code>: Whether or not this animation creates an &quot;interaction handle&quot; on the
<code>InteractionManager</code>. Default true.</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 &quot;bounciness&quot;/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
Default is <code>Easing.inOut(Easing.ease)</code>.</li><li><code>delay</code>: Start the animation after delay (milliseconds). Default 0.</li><li><code>isInteraction</code>: Whether or not this animation creates an &quot;interaction handle&quot; on the
<code>InteractionManager</code>. Default true.</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>Animates a value according to an analytical spring model based on
<a href="https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator" target="_blank">damped harmonic oscillation</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.</p><p>Note that you can only define one of bounciness/speed, tension/friction, or
stiffness/damping/mass, but not more than one:</p><p>The friction/tension or bounciness/speed options match the spring model in
<a href="https://github.com/facebook/pop" target="_blank">Facebook Pop</a>, <a href="http://facebook.github.io/rebound/" target="_blank">Rebound</a>,
and <a href="http://origami.design/" target="_blank">Origami</a>.</p><ul><li><code>friction</code>: Controls &quot;bounciness&quot;/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></ul><p>Specifying stiffness/damping/mass as parameters makes <code>Animated.spring</code> use an
analytical spring model based on the motion equations of a <a href="https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator" target="_blank">damped harmonic
oscillator</a>.
This behavior is slightly more precise and faithful to the physics behind
spring dynamics, and closely mimics the implementation in iOS&#x27;s
CASpringAnimation primitive.</p><ul><li><code>stiffness</code>: The spring stiffness coefficient. Default 100.</li><li><code>damping</code>: Defines how the spring’s motion should be damped due to the forces of friction.
Default 10.</li><li><code>mass</code>: The mass of the object attached to the end of the spring. Default 1.</li></ul><p>Other configuration options are as follows:</p><ul><li><code>velocity</code>: The initial velocity of the object attached to the spring. Default 0 (object
is at rest).</li><li><code>overshootClamping</code>: Boolean indiciating whether the spring should be clamped and not
bounce. Default false.</li><li><code>restDisplacementThreshold</code>: The threshold of displacement from rest below which the
spring should be considered at rest. Default 0.001.</li><li><code>restSpeedThreshold</code>: The speed at which the spring should be considered at rest in pixels
per second. Default 0.001.</li><li><code>delay</code>: Start the animation after delay (milliseconds). Default 0.</li><li><code>isInteraction</code>: Whether or not this animation creates an &quot;interaction handle&quot; on the
<code>InteractionManager</code>. Default true.</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