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
Files
b2bb0c03623a42ab89ebb5736df830987385fcf1
react-native/docs/animations.html
T
Travis CI 28531fc77a update website
2016-01-21 07:56:43 +00:00

380 lines
77 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Animations – React Native | A framework for building native apps using React</title><meta name="viewport" content="width=device-width"><meta property="og:title" content="Animations – React Native | A framework for building native apps using React"><meta property="og:type" content="website"><meta property="og:url" content="http://facebook.github.io/react-native/index.html"><meta property="og:image" content="http://facebook.github.io/react-native/img/opengraph.png?2"><meta property="og:description" content="A framework for building native apps using React"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="/react-native/img/favicon.png?2"><link rel="stylesheet" href="/react-native/css/react-native.css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href="/react-native/"><img src="/react-native/img/header_logo.png">React Native</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="/react-native/docs/getting-started.html" class="active">Docs</a></li><li><a href="/react-native/support.html" class="">Support</a></li><li><a href="https://github.com/facebook/react-native/releases" class="">Releases</a></li><li><a href="http://reactnative.cc" class="">Newsletter</a></li><li><a href="/react-native/showcase.html" class="">Showcase</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" type="text" placeholder="Search docs..."></div><ul class="nav-site nav-site-external"><li><a href="https://github.com/facebook/react-native" class="">GitHub</a></li><li><a href="http://facebook.github.io/react" class="">React</a></li></ul></div></div></div><section class="content wrap documentationContent"><div class="nav-docs"><div class="nav-docs-section"><h3>Quick Start</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/getting-started.html#content">Getting Started</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/android-setup.html#content">Android Setup</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linux-windows-support.html#content">Linux and Windows Support</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tutorial.html#content">Tutorial</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/videos.html#content">Videos</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/style.html#content">Style</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/images.html#content">Images</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/gesture-responder-system.html#content">Gesture Responder System</a></li><li><a style="margin-left:0;" class="active" href="/react-native/docs/animations.html#content">Animations</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/accessibility.html#content">Accessibility</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/direct-manipulation.html#content">Direct Manipulation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/debugging.html#content">Debugging</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/testing.html#content">Testing</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/javascript-environment.html#content">JavaScript Environment</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator-comparison.html#content">Navigator Comparison</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/known-issues.html#content">Known Issues</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/performance.html#content">Performance</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/upgrading.html#content">Upgrading</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/platform-specific-code.html#content">Platform Specific Code</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/native-modules-ios.html#content">Native Modules</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/native-components-ios.html#content">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linking-libraries-ios.html#content">Linking Libraries</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/running-on-device-ios.html#content">Running On Device</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/embedded-app-ios.html#content">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/communication-ios.html#content">Communication between native and React Native</a></li></ul></div><div class="nav-docs-section"><h3>Guides (Android)</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/native-modules-android.html#content">Native Modules</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/native-components-android.html#content">Native UI Components</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/running-on-device-android.html#content">Running On Device</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/embedded-app-android.html#content">Integrating with Existing Apps</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/signed-apk-android.html#content">Generating Signed APK</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/android-ui-performance.html#content">Profiling Android UI Performance</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/android-building-from-source.html#content">Building React Native from source</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/activityindicatorios.html#content">ActivityIndicatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/datepickerios.html#content">DatePickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/drawerlayoutandroid.html#content">DrawerLayoutAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/image.html#content">Image</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/listview.html#content">ListView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/mapview.html#content">MapView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/modal.html#content">Modal</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigator.html#content">Navigator</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/navigatorios.html#content">NavigatorIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pickerios.html#content">PickerIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/progressbarandroid.html#content">ProgressBarAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/progressviewios.html#content">ProgressViewIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pulltorefreshviewandroid.html#content">PullToRefreshViewAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/refreshcontrol.html#content">RefreshControl</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/scrollview.html#content">ScrollView</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/segmentedcontrolios.html#content">SegmentedControlIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/sliderios.html#content">SliderIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/switch.html#content">Switch</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios.html#content">TabBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/tabbarios-item.html#content">TabBarIOS.Item</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/text.html#content">Text</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/textinput.html#content">TextInput</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/toolbarandroid.html#content">ToolbarAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablehighlight.html#content">TouchableHighlight</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablenativefeedback.html#content">TouchableNativeFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchableopacity.html#content">TouchableOpacity</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/touchablewithoutfeedback.html#content">TouchableWithoutFeedback</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/view.html#content">View</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/viewpagerandroid.html#content">ViewPagerAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/webview.html#content">WebView</a></li></ul></div><div class="nav-docs-section"><h3>apis</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/actionsheetios.html#content">ActionSheetIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/alert.html#content">Alert</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/alertios.html#content">AlertIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/animated.html#content">Animated</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appregistry.html#content">AppRegistry</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/appstateios.html#content">AppStateIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/asyncstorage.html#content">AsyncStorage</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/backandroid.html#content">BackAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/cameraroll.html#content">CameraRoll</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/dimensions.html#content">Dimensions</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/intentandroid.html#content">IntentAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/interactionmanager.html#content">InteractionManager</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/layoutanimation.html#content">LayoutAnimation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/linkingios.html#content">LinkingIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/nativemethodsmixin.html#content">NativeMethodsMixin</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/netinfo.html#content">NetInfo</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/panresponder.html#content">PanResponder</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pixelratio.html#content">PixelRatio</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/pushnotificationios.html#content">PushNotificationIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/statusbarios.html#content">StatusBarIOS</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/stylesheet.html#content">StyleSheet</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/toastandroid.html#content">ToastAndroid</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/vibrationios.html#content">VibrationIOS</a></li></ul></div><div class="nav-docs-section"><h3>Polyfills</h3><ul><li><a style="margin-left:0;" class="" href="/react-native/docs/flexbox.html#content">Flexbox</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/geolocation.html#content">Geolocation</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/network.html#content">Network</a></li><li><a style="margin-left:0;" class="" href="/react-native/docs/timers.html#content">Timers</a></li></ul></div></div><div class="inner-content"><a id="content"></a><h1>Animations<a class="edit-github" href="https://github.com/facebook/react-native/blob/master/docs/Animations.md">Edit on GitHub</a></h1><div><p>Fluid, meaningful animations are essential to the mobile user experience. Like
everything in React Native, Animation APIs for React Native are currently under
development, but have started to coalesce around two complementary systems:
<code>LayoutAnimation</code> for animated global layout transactions, and <code>Animated</code> for
more granular and interactive control of specific values.</p><h3><a class="anchor" name="animated"></a>Animated <a class="hash-link" href="#animated">#</a></h3><p>The <code>Animated</code> library is designed to make it very easy to concisely express a
wide variety of interesting animation and interaction patterns in a very
performant way. <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. For example, a complete
component with a simple spring bounce on mount looks like this:</p><div class="prism language-javascript">class <span class="token class-name">Playground</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
<span class="token function">constructor<span class="token punctuation">(</span></span>props<span class="token punctuation">:</span> any<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">super<span class="token punctuation">(</span></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>
bounceValue<span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">Animated<span class="token punctuation">.</span>Value</span><span class="token punctuation">(</span><span class="token number">0</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 class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">:</span> ReactElement <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;Animated<span class="token punctuation">.</span>Image <span class="token comment" spellcheck="true"> // Base: Image, Text, View
</span> source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">&#x27;http://i.imgur.com/XMKOH81.jpg&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
transform<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token comment" spellcheck="true"> // `transform` is an ordered array
</span> <span class="token punctuation">{</span>scale<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>bounceValue<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // Map `bounceValue` to `scale`
</span> <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span>
<span class="token operator">/</span><span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">componentDidMount<span class="token punctuation">(</span></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>bounceValue<span class="token punctuation">.</span><span class="token function">setValue<span class="token punctuation">(</span></span><span class="token number">1.5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true"> // Start large
</span> Animated<span class="token punctuation">.</span><span class="token function">spring<span class="token punctuation">(</span></span> <span class="token comment" spellcheck="true"> // Base: spring, decay, timing
</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>bounceValue<span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // Animate `bounceValue`
</span> <span class="token punctuation">{</span>
toValue<span class="token punctuation">:</span> <span class="token number">0.8</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // Animate to smaller size
</span> friction<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // Bouncier spring
</span> <span class="token punctuation">}</span>
<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true"> // Start the animation
</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span></div><p><code>bounceValue</code> is initialized as part of <code>state</code> in the constructor, and mapped
to the scale transform on the image. Behind the scenes, the numeric value is
extracted and used to set scale. When the component mounts, the scale is set to
1.5 and then a spring animation is started on <code>bounceValue</code> which will update
all of its dependent mappings on each frame as the spring animates (in this
case, just the scale). This is done in an optimized way that is faster than
calling <code>setState</code> and re-rendering. Because the entire configuration is
declarative, we will be able to implement further optimizations that serialize
the configuration and runs the animation on a high-priority thread.</p><h4><a class="anchor" name="core-api"></a>Core API <a class="hash-link" href="#core-api">#</a></h4><p>Most everything you need hangs directly off the <code>Animated</code> module. This
includes two value types, <code>Value</code> for single values and <code>ValueXY</code> for vectors,
three animation types, <code>spring</code>, <code>decay</code>, and <code>timing</code>, and three component
types, <code>View</code>, <code>Text</code>, and <code>Image</code>. You can make any other component animated with
<code>Animated.createAnimatedComponent</code>.</p><p>The three animation types can be used to create almost any animation curve you
want because each can be customized:</p><ul><li><code>spring</code>: Simple single-spring physics model that matches <a href="https://facebook.github.io/origami/" target="_blank">Origami</a>.<ul><li><code>friction</code>: Controls &quot;bounciness&quot;/overshoot. Default 7.</li><li><code>tension</code>: Controls speed. Default 40.</li></ul></li><li><code>decay</code>: Starts with an initial velocity and gradually slows to a stop.<ul><li><code>velocity</code>: Initial velocity. Required.</li><li><code>deceleration</code>: Rate of decay. Default 0.997.</li></ul></li><li><code>timing</code>: Maps time range to easing value.<ul><li><code>duration</code>: Length of animation (milliseconds). Default 500.</li><li><code>easing</code>: Easing function to define curve. See <code>Easing</code> module for several
predefined functions. iOS default is <code>Easing.inOut(Easing.ease)</code>.</li><li><code>delay</code>: Start the animation after delay (milliseconds). Default 0.</li></ul></li></ul><p>Animations are started by calling <code>start</code>. <code>start</code> takes a completion callback
that will be called when the animation is done. If the animation is done
because it finished running normally, the completion callback will be invoked
with <code>{finished: true}</code>, but 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><h4><a class="anchor" name="composing-animations"></a>Composing Animations <a class="hash-link" href="#composing-animations">#</a></h4><p>Animations can also be composed with <code>parallel</code>, <code>sequence</code>, <code>stagger</code>, and
<code>delay</code>, each of which simply take an array of animations to execute and
automatically calls start/stop as appropriate. For example:</p><div class="prism language-javascript">Animated<span class="token punctuation">.</span><span class="token function">sequence<span class="token punctuation">(</span></span><span class="token punctuation">[</span> <span class="token comment" spellcheck="true"> // spring to start and twirl after decay finishes
</span> Animated<span class="token punctuation">.</span><span class="token function">decay<span class="token punctuation">(</span></span>position<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true"> // coast to a stop
</span> velocity<span class="token punctuation">:</span> <span class="token punctuation">{</span>x<span class="token punctuation">:</span> gestureState<span class="token punctuation">.</span>vx<span class="token punctuation">,</span> y<span class="token punctuation">:</span> gestureState<span class="token punctuation">.</span>vy<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token comment" spellcheck="true"> // velocity from gesture release
</span> deceleration<span class="token punctuation">:</span> <span class="token number">0.997</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
Animated<span class="token punctuation">.</span><span class="token function">parallel<span class="token punctuation">(</span></span><span class="token punctuation">[</span> <span class="token comment" spellcheck="true"> // after decay, in parallel:
</span> Animated<span class="token punctuation">.</span><span class="token function">spring<span class="token punctuation">(</span></span>position<span class="token punctuation">,</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 comment" spellcheck="true"> // return to start
</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
Animated<span class="token punctuation">.</span><span class="token function">timing<span class="token punctuation">(</span></span>twirl<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true"> // and twirl
</span> toValue<span class="token punctuation">:</span> <span class="token number">360</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 punctuation">.</span><span class="token function">start<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true"> // start the sequence group</span></div><p>By default, if one animation is stopped or interrupted, then all other
animations in the group are also stopped. Parallel has a <code>stopTogether</code> option
that can be set to <code>false</code> to disable this.</p><h4><a class="anchor" name="interpolation"></a>Interpolation <a class="hash-link" href="#interpolation">#</a></h4><p>Another powerful part of the <code>Animated</code> API is the <code>interpolate</code> function. It
allows input ranges to map to different output ranges. For example, a simple
mapping to convert a 0-1 range to a 0-100 range would be</p><div class="prism language-javascript">value<span class="token punctuation">.</span><span class="token function">interpolate<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</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><p><code>interpolate</code> supports multiple range segments as well, which is handy for
defining dead zones and other handy tricks. For example, to get an negation
relationship at -300 that goes to 0 at -100, then back up to 1 at 0, and then
back down to zero at 100 followed by a dead-zone that remains at 0 for
everything beyond that, you could do:</p><div class="prism language-javascript">value<span class="token punctuation">.</span><span class="token function">interpolate<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">-</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">101</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">300</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</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><p>Which would map like so:</p><table><thead><tr><th>Input</th><th>Output</th></tr></thead><thead><tr><td> -400</td><td>450</td></tr><tr><td> -300</td><td>300</td></tr><tr><td> -200</td><td>150</td></tr><tr><td> -100</td><td>0</td></tr><tr><td> -50</td><td>0.5</td></tr><tr><td> 0</td><td>1</td></tr><tr><td> 50</td><td>0.5</td></tr><tr><td> 100</td><td>0</td></tr><tr><td> 101</td><td>0</td></tr><tr><td> 200</td><td>0</td></tr></thead></table><p><code>interpolation</code> also supports arbitrary easing functions, many of which are
already implemented in the
<a href="https://github.com/facebook/react-native/blob/master/Libraries/Animation/Animated/Easing.js" target="_blank"><code>Easing</code></a>
class including quadratic, exponential, and bezier curves as well as functions
like step and bounce. <code>interpolation</code> also has configurable behavior for
extrapolating the <code>outputRange</code>. You can set the extrapolation by setting the <code>extrapolate</code>,
<code>extrapolateLeft</code> or <code>extrapolateRight</code> options. The default value is
<code>extend</code> but you can use <code>clamp</code> to prevent the output value from exceeding
<code>outputRange</code>.</p><h4><a class="anchor" name="tracking-dynamic-values"></a>Tracking Dynamic Values <a class="hash-link" href="#tracking-dynamic-values">#</a></h4><p>Animated values can also track other values. Just set the <code>toValue</code> of an
animation to another animated value instead of a plain number, for example with
spring physics for an interaction like &quot;Chat Heads&quot;, or via <code>timing</code> with
<code>duration: 0</code> for rigid/instant tracking. They can also be composed with
interpolations:</p><div class="prism language-javascript">Animated<span class="token punctuation">.</span><span class="token function">spring<span class="token punctuation">(</span></span>follower<span class="token punctuation">,</span> <span class="token punctuation">{</span>toValue<span class="token punctuation">:</span> leader<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">start<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
Animated<span class="token punctuation">.</span><span class="token function">timing<span class="token punctuation">(</span></span>opacity<span class="token punctuation">,</span> <span class="token punctuation">{</span>
toValue<span class="token punctuation">:</span> pan<span class="token punctuation">.</span>x<span class="token punctuation">.</span><span class="token function">interpolate<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
inputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
outputRange<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">0</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">start<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span></div><p><code>ValueXY</code> is a handy way to deal with 2D interactions, such as panning/dragging.
It is a simple wrapper that basically just contains two <code>Animated.Value</code>
instances and some helper functions that call through to them, making <code>ValueXY</code>
a drop-in replacement for <code>Value</code> in many cases. For example, in the code
snippet above, <code>leader</code> and <code>follower</code> could both be of type <code>ValueXY</code> and the x
and y values will both track as you would expect.</p><h4><a class="anchor" name="input-events"></a>Input Events <a class="hash-link" href="#input-events">#</a></h4><p><code>Animated.event</code> is the input side of the Animated API, allowing gestures and
other events to map directly to animated values. 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. In the example, you can see that <code>scrollX</code> maps to
<code>event.nativeEvent.contentOffset.x</code> (<code>event</code> is normally the first arg to the
handler), and <code>pan.x</code> and <code>pan.y</code> map to <code>gestureState.dx</code> and <code>gestureState.dy</code>,
respectively (<code>gestureState</code> is the second arg passed to the <code>PanResponder</code> handler).</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 class="token punctuation">(</span></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>
onPanResponderMove<span class="token operator">=</span><span class="token punctuation">{</span>Animated<span class="token punctuation">.</span><span class="token function">event<span class="token punctuation">(</span></span><span class="token punctuation">[</span>
<span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // ignore the native event
</span> <span class="token comment" spellcheck="true"> // extract dx and dy from gestureState
</span> <span class="token comment" spellcheck="true"> // like &#x27;pan.x = gestureState.dx, pan.y = gestureState.dy&#x27;
</span> <span class="token punctuation">{</span>dx<span class="token punctuation">:</span> pan<span class="token punctuation">.</span>x<span class="token punctuation">,</span> dy<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></div><h4><a class="anchor" name="responding-to-the-current-animation-value"></a>Responding to the Current Animation Value <a class="hash-link" href="#responding-to-the-current-animation-value">#</a></h4><p>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:</p><ul><li><code>spring.stopAnimation(callback)</code> will stop the animation and invoke <code>callback</code>
with the final value - this is useful when making gesture transitions.</li><li><code>spring.addListener(callback)</code> will invoke <code>callback</code> asynchronously while the
animation is running, providing a recent value. This is useful for triggering
state changes, for example snapping a bobble to a new option as the user drags
it closer, because these larger state changes are less sensitive to a few frames
of lag compared to continuous gestures like panning which need to run at 60fps.</li></ul><h4><a class="anchor" name="future-work"></a>Future Work <a class="hash-link" href="#future-work">#</a></h4><p>As previously mentioned, we&#x27;re planning on optimizing Animated under the hood to
make it even more performant. We would also like to experiment with more
declarative and higher level gestures and triggers, such as horizontal vs.
vertical panning.</p><p>The above API gives a powerful tool for expressing all sorts of animations in a
concise, robust, and performant way. Check out more example code in
<a href="https://github.com/facebook/react-native/tree/master/Examples/UIExplorer/AnimatedGratuitousApp" target="_blank">UIExplorer/AnimationExample</a>. Of course there may still be times where <code>Animated</code>
doesn&#x27;t support what you need, and the following sections cover other animation
systems.</p><h3><a class="anchor" name="layoutanimation"></a>LayoutAnimation <a class="hash-link" href="#layoutanimation">#</a></h3><p><code>LayoutAnimation</code> allows you to globally configure <code>create</code> and <code>update</code>
animations that will be used for all views in the next render/layout cycle.
This is useful for doing flexbox layout updates without bothering to measure or
calculate specific properties in order to animate them directly, and is
especially useful when layout changes may affect ancestors, for example a &quot;see
more&quot; expansion that also increases the size of the parent and pushes down the
row below which would otherwise require explicit coordination between the
components in order to animate them all in sync.</p><p>Note that although <code>LayoutAnimation</code> is very powerful and can be quite useful,
it provides much less control than <code>Animated</code> and other animation libraries, so
you may need to use another approach if you can&#x27;t get <code>LayoutAnimation</code> to do
what you want.</p><p><img src="/react-native/img/LayoutAnimationExample.gif" alt=""></p><div class="prism language-javascript"><span class="token keyword">var</span> App <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
<span class="token function">componentWillMount<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // Animate creation
</span> LayoutAnimation<span class="token punctuation">.</span><span class="token function">spring<span class="token punctuation">(</span></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">getInitialState<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span> w<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> h<span class="token punctuation">:</span> <span class="token number">100</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">_onPress<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // Animate the update
</span> LayoutAnimation<span class="token punctuation">.</span><span class="token function">spring<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>w<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>w <span class="token operator">+</span> <span class="token number">15</span><span class="token punctuation">,</span> h<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>h <span class="token operator">+</span> <span class="token number">15</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token keyword">function</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>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>box<span class="token punctuation">,</span> <span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>w<span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>h<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;TouchableOpacity onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPress<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>button<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Text style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>buttonText<span class="token punctuation">}</span><span class="token operator">&gt;</span>Press me<span class="token operator">!</span>&lt;<span class="token operator">/</span>Text<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableOpacity<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</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></div><p><a href="https://rnplay.org/apps/uaQrGQ" target="_blank">Run this example</a></p><p>This example uses a preset value, you can customize the animations as
you need, see <a href="https://github.com/facebook/react-native/blob/master/Libraries/LayoutAnimation/LayoutAnimation.js" target="_blank">LayoutAnimation.js</a>
for more information.</p><h3><a class="anchor" name="requestanimationframe"></a>requestAnimationFrame <a class="hash-link" href="#requestanimationframe">#</a></h3><p><code>requestAnimationFrame</code> is a polyfill from the browser that you might be
familiar with. It accepts a function as its only argument and calls that
function before the next repaint. It is an essential building block for
animations that underlies all of the JavaScript-based animation APIs. In
general, you shouldn&#x27;t need to call this yourself - the animation APIs will
manage frame updates for you.</p><h3><a class="anchor" name="react-tween-state-not-recommended-use-animated-animated-instead"></a>react-tween-state (Not recommended - use <a href="#animated" target="">Animated</a> instead) <a class="hash-link" href="#react-tween-state-not-recommended-use-animated-animated-instead">#</a></h3><p><a href="https://github.com/chenglou/react-tween-state" target="_blank">react-tween-state</a> is a
minimal library that does exactly what its name suggests: it <em>tweens</em> a
value in a component&#x27;s state, starting at a <strong>from</strong> value and ending at
a <strong>to</strong> value. This means that it generates the values in between those
two values, and it sets the state on every <code>requestAnimationFrame</code> with
the intermediary value.</p><blockquote><p>Tweening definition from <a href="https://en.wikipedia.org/wiki/Inbetweening" target="_blank">Wikipedia</a></p><p>&quot;... tweening is the process of generating intermediate frames between two
images to give the appearance that the first image evolves smoothly
into the second image. [Tweens] are the drawings between the key
frames which help to create the illusion of motion.&quot;</p></blockquote><p>The most obvious way to animate from one value to another is linearly:
you subtract the end value from the start value and divide the result by
the number of frames over which the animation occurs, and then add that
value to the current value on each frame until the end value is reached.
Linear easing often looks awkward and unnatural, so react-tween-state
provides a selection of popular <a href="http://easings.net/" target="_blank">easing functions</a>
that can be applied to make your animations more pleasing.</p><p>This library does not ship with React Native - in order to use it on
your project, you will need to install it with <code>npm i react-tween-state
--save</code> from your project directory.</p><div class="prism language-javascript"><span class="token keyword">var</span> tweenState <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-tween-state&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> App <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
mixins<span class="token punctuation">:</span> <span class="token punctuation">[</span>tweenState<span class="token punctuation">.</span>Mixin<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token function">getInitialState<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span> opacity<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">_animateOpacity<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">tweenState<span class="token punctuation">(</span></span><span class="token string">&#x27;opacity&#x27;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
easing<span class="token punctuation">:</span> tweenState<span class="token punctuation">.</span>easingTypes<span class="token punctuation">.</span>easeOutQuint<span class="token punctuation">,</span>
duration<span class="token punctuation">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>
endValue<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>opacity <span class="token operator">===</span> <span class="token number">0.2</span> <span class="token operator">?</span> <span class="token number">1</span> <span class="token punctuation">:</span> <span class="token number">0.2</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 class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>flex<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> justifyContent<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">,</span> alignItems<span class="token punctuation">:</span> <span class="token string">&#x27;center&#x27;</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;TouchableWithoutFeedback onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_animateOpacity<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;View ref<span class="token operator">=</span><span class="token punctuation">{</span>component <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_box <span class="token operator">=</span> component<span class="token punctuation">}</span>
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">&#x27;red&#x27;</span><span class="token punctuation">,</span>
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getTweeningValue<span class="token punctuation">(</span></span><span class="token string">&#x27;opacity&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableWithoutFeedback<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</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></div><p><a href="https://rnplay.org/apps/4FUQ-A" target="_blank">Run this example</a></p><p><img src="/react-native/img/TweenState.gif" alt=""></p><p>Here we animated the opacity, but as you might guess, we can animate any
numeric value. Read more about react-tween-state in its
<a href="https://github.com/chenglou/react-tween-state" target="_blank">README</a>.</p><h3><a class="anchor" name="rebound-not-recommended-use-animated-animated-instead"></a>Rebound (Not recommended - use <a href="#animated" target="">Animated</a> instead) <a class="hash-link" href="#rebound-not-recommended-use-animated-animated-instead">#</a></h3><p><a href="https://github.com/facebook/rebound-js" target="_blank">Rebound.js</a> is a JavaScript port of
<a href="https://github.com/facebook/rebound" target="_blank">Rebound for Android</a>. It is
similar in concept to react-tween-state: you have an initial value and
set an end value, then Rebound generates intermediate values that you can
use for your animation. Rebound is modeled after spring physics; we
don&#x27;t provide a duration when animating with springs, it is
calculated for us depending on the spring tension, friction, current
value and end value. Rebound <a href="https://github.com/facebook/react-native/search?utf8=%E2%9C%93&amp;q=rebound" target="_blank">is used
internally</a>
by React Native on <code>Navigator</code> and <code>WarningBox</code>.</p><p><img src="/react-native/img/ReboundImage.gif" alt=""></p><p>Notice that Rebound animations can be interrupted - if you release in
the middle of a press, it will animate back from the current state to
the original value.</p><div class="prism language-javascript"><span class="token keyword">var</span> rebound <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;rebound&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> App <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token function">createClass<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // First we initialize the spring and add a listener, which calls
</span> <span class="token comment" spellcheck="true"> // setState whenever it updates
</span> <span class="token function">componentWillMount<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // Initialize the spring that will drive animations
</span> <span class="token keyword">this</span><span class="token punctuation">.</span>springSystem <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">rebound<span class="token punctuation">.</span>SpringSystem</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_scrollSpring <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>springSystem<span class="token punctuation">.</span><span class="token function">createSpring<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> springConfig <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_scrollSpring<span class="token punctuation">.</span><span class="token function">getSpringConfig<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
springConfig<span class="token punctuation">.</span>tension <span class="token operator">=</span> <span class="token number">230</span><span class="token punctuation">;</span>
springConfig<span class="token punctuation">.</span>friction <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_scrollSpring<span class="token punctuation">.</span><span class="token function">addListener<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
onSpringUpdate<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState<span class="token punctuation">(</span></span><span class="token punctuation">{</span>scale<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_scrollSpring<span class="token punctuation">.</span><span class="token function">getCurrentValue<span class="token punctuation">(</span></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 comment" spellcheck="true"> // Initialize the spring value at 1
</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_scrollSpring<span class="token punctuation">.</span><span class="token function">setCurrentValue<span class="token punctuation">(</span></span><span class="token number">1</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">_onPressIn<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_scrollSpring<span class="token punctuation">.</span><span class="token function">setEndValue<span class="token punctuation">(</span></span><span class="token number">0.5</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">_onPressOut<span class="token punctuation">(</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>_scrollSpring<span class="token punctuation">.</span><span class="token function">setEndValue<span class="token punctuation">(</span></span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
render<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">var</span> imageStyle <span class="token operator">=</span> <span class="token punctuation">{</span>
width<span class="token punctuation">:</span> <span class="token number">250</span><span class="token punctuation">,</span>
height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
transform<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>scaleX<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>scale<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>scaleY<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>scale<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 keyword">var</span> imageUri <span class="token operator">=</span> <span class="token string">&quot;https://facebook.github.io/react-native/img/ReboundExample.png&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">return</span> <span class="token punctuation">(</span>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;TouchableWithoutFeedback onPressIn<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPressIn<span class="token punctuation">}</span>
onPressOut<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPressOut<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Image source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> imageUri<span class="token punctuation">}</span><span class="token punctuation">}</span> style<span class="token operator">=</span><span class="token punctuation">{</span>imageStyle<span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableWithoutFeedback<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</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></div><p><a href="https://rnplay.org/apps/NNI5eA" target="_blank">Run this example</a></p><p>You can also clamp the spring values so that they don&#x27;t overshoot and
oscillate around the end value. In the above example, we would add
<code>this._scrollSpring.setOvershootClampingEnabled(true)</code> to change this.
See the below gif for an example of where in your interface you might
use this.</p><p><img src="/react-native/img/Rebound.gif" alt=""> Screenshot from
<a href="https://github.com/brentvatne/react-native-scrollable-tab-view" target="_blank">react-native-scrollable-tab-view</a>.
You can run a similar example <a href="https://rnplay.org/apps/qHU_5w" target="_blank">here</a>.</p><h4><a class="anchor" name="a-sidenote-about-setnativeprops"></a>A sidenote about setNativeProps <a class="hash-link" href="#a-sidenote-about-setnativeprops">#</a></h4><p>As mentioned <a href="/react-native/docs/direct-manipulation.html" target="">in the Direction Manipulation section</a>,
<code>setNativeProps</code> allows us to modify properties of native-backed
components (components that are actually backed by native views, unlike
composite components) directly, without having to <code>setState</code> and
re-render the component hierarchy.</p><p>We could use this in the Rebound example to update the scale - this
might be helpful if the component that we are updating is deeply nested
and hasn&#x27;t been optimized with <code>shouldComponentUpdate</code>.</p><div class="prism language-javascript"><span class="token comment" spellcheck="true">// Back inside of the App component, replace the scrollSpring listener
</span><span class="token comment" spellcheck="true">// in componentWillMount with this:
</span><span class="token keyword">this</span><span class="token punctuation">.</span>_scrollSpring<span class="token punctuation">.</span><span class="token function">addListener<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
onSpringUpdate<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>_photo<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">}</span>
<span class="token keyword">var</span> v <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_scrollSpring<span class="token punctuation">.</span><span class="token function">getCurrentValue<span class="token punctuation">(</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> newProps <span class="token operator">=</span> <span class="token punctuation">{</span>style<span class="token punctuation">:</span> <span class="token punctuation">{</span>transform<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>scaleX<span class="token punctuation">:</span> v<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>scaleY<span class="token punctuation">:</span> v<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 keyword">this</span><span class="token punctuation">.</span>_photo<span class="token punctuation">.</span><span class="token function">setNativeProps<span class="token punctuation">(</span></span>newProps<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 comment" spellcheck="true">
// Lastly, we update the render function to no longer pass in the
</span><span class="token comment" spellcheck="true">// transform via style (avoid clashes when re-rendering) and to set the
</span><span class="token comment" spellcheck="true">// photo ref
</span>render<span class="token punctuation">:</span> <span class="token keyword">function</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>
&lt;View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>container<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;TouchableWithoutFeedback onPressIn<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPressIn<span class="token punctuation">}</span> onPressOut<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPressOut<span class="token punctuation">}</span><span class="token operator">&gt;</span>
&lt;Image ref<span class="token operator">=</span><span class="token punctuation">{</span>component <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>_photo <span class="token operator">=</span> component<span class="token punctuation">}</span>
source<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>uri<span class="token punctuation">:</span> <span class="token string">&quot;https://facebook.github.io/react-native/img/ReboundExample.png&quot;</span><span class="token punctuation">}</span><span class="token punctuation">}</span>
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">250</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>TouchableWithoutFeedback<span class="token operator">&gt;</span>
&lt;<span class="token operator">/</span>View<span class="token operator">&gt;</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></div><p><a href="https://rnplay.org/apps/fUqjAg" target="_blank">Run this example</a></p><p>It would not make sense to use <code>setNativeProps</code> with react-tween-state
because the updated tween values are set on the state automatically by
the library - Rebound on the other hand gives us an updated value for
each frame with the <code>onSpringUpdate</code> function.</p><p>If you find your animations with dropping frames (performing below 60
frames per second), look into using <code>setNativeProps</code> or
<code>shouldComponentUpdate</code> to optimize them. You may also want to defer any
computationally intensive work until after animations are complete,
using the
<a href="/react-native/docs/interactionmanager.html" target="">InteractionManager</a>. You
can monitor the frame rate by using the In-App Developer Menu &quot;FPS
Monitor&quot; tool.</p><h3><a class="anchor" name="navigator-scene-transitions"></a>Navigator Scene Transitions <a class="hash-link" href="#navigator-scene-transitions">#</a></h3><p>As mentioned in the <a href="https://facebook.github.io/react-native/docs/navigator-comparison.html#content" target="_blank">Navigator
Comparison</a>,
<code>Navigator</code> is implemented in JavaScript and <code>NavigatorIOS</code> is a wrapper
around native functionality provided by <code>UINavigationController</code>, so
these scene transitions apply only to <code>Navigator</code>. In order to re-create
the various animations provided by <code>UINavigationController</code> and also
make them customizable, React Native exposes a
<a href="https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js" target="_blank">NavigatorSceneConfigs</a> API.</p><div class="prism language-javascript"><span class="token keyword">var</span> React <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">&#x27;react-native&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> <span class="token punctuation">{</span> Dimensions <span class="token punctuation">}</span> <span class="token operator">=</span> React<span class="token punctuation">;</span>
<span class="token keyword">var</span> SCREEN_WIDTH <span class="token operator">=</span> Dimensions<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">&#x27;window&#x27;</span><span class="token punctuation">)</span><span class="token punctuation">.</span>width<span class="token punctuation">;</span>
<span class="token keyword">var</span> BaseConfig <span class="token operator">=</span> Navigator<span class="token punctuation">.</span>SceneConfigs<span class="token punctuation">.</span>FloatFromRight<span class="token punctuation">;</span>
<span class="token keyword">var</span> CustomLeftToRightGesture <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign<span class="token punctuation">(</span></span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> BaseConfig<span class="token punctuation">.</span>gestures<span class="token punctuation">.</span>pop<span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // Make it snap back really quickly after canceling pop
</span> snapVelocity<span class="token punctuation">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
<span class="token comment" spellcheck="true"> // Make it so we can drag anywhere on the screen
</span> edgeHitWidth<span class="token punctuation">:</span> SCREEN_WIDTH<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> CustomSceneConfig <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign<span class="token punctuation">(</span></span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> BaseConfig<span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token comment" spellcheck="true"> // A very tightly wound spring will make this transition fast
</span> springTension<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
springFriction<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token comment" spellcheck="true"> // Use our custom gesture defined above
</span> gestures<span class="token punctuation">:</span> <span class="token punctuation">{</span>
pop<span class="token punctuation">:</span> CustomLeftToRightGesture<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><p><a href="https://rnplay.org/apps/HPy6UA" target="_blank">Run this example</a></p><p>For further information about customizing scene transitions, <a href="https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js" target="_blank">read the
source</a>.</p></div><div class="docs-prevnext"><a class="docs-next" href="accessibility.html#content">Next →</a></div></div></section><footer class="wrap"><div class="center">© 2015 Facebook Inc.</div></footer></div><div id="fb-root"></div><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41298772-2', 'facebook.github.io');
ga('send', 'pageview');
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)
){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script src="/react-native/js/scripts.js"></script></body></html>
Reference in New Issue View Git Blame Copy Permalink