mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
385 lines
97 KiB
HTML
385 lines
97 KiB
HTML
<!DOCTYPE html><html><head><title>Animated</title><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width"><meta property="fb:app_id" content="1677033832619985"><meta property="fb:admins" content="121800083"><meta property="og:site_name" content="React Native"><meta property="og:title" content="Animated"><meta property="og:url" content="https://facebook.github.io/react-native/index.html"><meta property="og:image" content="https://facebook.github.io/react-native/img/opengraph.png"><meta property="og:description" content="A framework for building native apps using React"><meta name="twitter:site" content="@reactnative"><meta name="twitter:card" content="summary_large_image"><meta property="og:type" content="website"><base href="/react-native/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"><link rel="shortcut icon" href="img/favicon.png?2"><link rel="stylesheet" href="css/react-native.css"><link rel="alternate" type="application/rss+xml" title="React Native Blog" href="https://facebook.github.io/react-native/blog/feed.xml"><link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="//use.typekit.net/vqa1hcx.js"></script><script type="text/javascript">try{Typekit.load();}catch(e){}</script></head><body><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><div class="container"><div class="nav-main"><div class="wrap"><a class="nav-home" href=""><img src="img/header_logo.png">React Native</a><a class="nav-version" href="/react-native/versions.html">0.44</a><div class="nav-site-wrapper"><ul class="nav-site nav-site-internal"><li><a href="docs/getting-started.html" class="active" data-target=".nav-docs">Docs</a></li><li><a href="/react-native/support.html" class="">Help</a></li><li><a href="/react-native/showcase.html" class="">Showcase</a></li><li><a href="/react-native/blog/" class="">Blog</a></li></ul><div class="algolia-search-wrapper"><input id="algolia-doc-search" tabindex="0" 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-viewport"><div class="nav-docs-section"><h3>The Basics</h3><ul><li><a style="margin-left:10px;" class="" href="docs/getting-started.html">Getting Started</a></li><li><a style="margin-left:10px;" class="" href="docs/tutorial.html">Tutorial</a></li><li><a style="margin-left:10px;" class="" href="docs/props.html">Props</a></li><li><a style="margin-left:10px;" class="" href="docs/state.html">State</a></li><li><a style="margin-left:10px;" class="" href="docs/style.html">Style</a></li><li><a style="margin-left:10px;" class="" href="docs/height-and-width.html">Height and Width</a></li><li><a style="margin-left:10px;" class="" href="docs/flexbox.html">Layout with Flexbox</a></li><li><a style="margin-left:10px;" class="" href="docs/handling-text-input.html">Handling Text Input</a></li><li><a style="margin-left:10px;" class="" href="docs/using-a-scrollview.html">Using a ScrollView</a></li><li><a style="margin-left:10px;" class="" href="docs/using-a-listview.html">Using a ListView</a></li><li><a style="margin-left:10px;" class="" href="docs/network.html">Networking</a></li><li><a style="margin-left:10px;" class="" href="docs/more-resources.html">More Resources</a></li></ul></div><div class="nav-docs-section"><h3>Guides</h3><ul><li><a style="margin-left:10px;" class="" href="docs/handling-touches.html">Handling Touches</a></li><li><a style="margin-left:10px;" class="" href="docs/animations.html">Animations</a></li><li><a style="margin-left:10px;" class="" href="docs/navigation.html">Navigation</a></li><li><a style="margin-left:10px;" class="" href="docs/images.html">Images</a></li><li><a style="margin-left:10px;" class="" href="docs/colors.html">Colors</a></li><li><a style="margin-left:10px;" class="" href="docs/platform-specific-code.html">Platform Specific Code</a></li><li><a style="margin-left:10px;" class="" href="docs/debugging.html">Debugging</a></li><li><a style="margin-left:10px;" class="" href="docs/accessibility.html">Accessibility</a></li><li><a style="margin-left:10px;" class="" href="docs/timers.html">Timers</a></li><li><a style="margin-left:10px;" class="" href="docs/javascript-environment.html">JavaScript Environment</a></li><li><a style="margin-left:10px;" class="" href="docs/direct-manipulation.html">Direct Manipulation</a></li><li><a style="margin-left:10px;" class="" href="docs/performance.html">Performance</a></li><li><a style="margin-left:10px;" class="" href="docs/gesture-responder-system.html">Gesture Responder System</a></li><li><a style="margin-left:10px;" class="" href="docs/testing.html">Testing</a></li><li><a style="margin-left:10px;" class="" href="docs/understanding-cli.html">Understanding the CLI</a></li><li><a style="margin-left:10px;" class="" href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a></li><li><a style="margin-left:10px;" class="" href="docs/running-on-device.html">Running On Device</a></li><li><a style="margin-left:10px;" class="" href="docs/upgrading.html">Upgrading</a></li></ul></div><div class="nav-docs-section"><h3>Guides (iOS)</h3><ul><li><a style="margin-left:10px;" class="" href="docs/native-modules-ios.html">Native Modules</a></li><li><a style="margin-left:10px;" class="" href="docs/native-components-ios.html">Native UI Components</a></li><li><a style="margin-left:10px;" class="" href="docs/linking-libraries-ios.html">Linking Libraries</a></li><li><a style="margin-left:10px;" class="" href="docs/running-on-simulator-ios.html">Running On Simulator</a></li><li><a style="margin-left:10px;" class="" href="docs/communication-ios.html">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:10px;" class="" href="docs/native-modules-android.html">Native Modules</a></li><li><a style="margin-left:10px;" class="" href="docs/native-components-android.html">Native UI Components</a></li><li><a style="margin-left:10px;" class="" href="docs/headless-js-android.html">Headless JS</a></li><li><a style="margin-left:10px;" class="" href="docs/signed-apk-android.html">Generating Signed APK</a></li><li><a style="margin-left:10px;" class="" href="docs/android-building-from-source.html">Building React Native from source</a></li></ul></div><div class="nav-docs-section"><h3>components</h3><ul><li><a style="margin-left:10px;" class="" href="docs/activityindicator.html">ActivityIndicator</a></li><li><a style="margin-left:10px;" class="" href="docs/button.html">Button</a></li><li><a style="margin-left:10px;" class="" href="docs/datepickerios.html">DatePickerIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/drawerlayoutandroid.html">DrawerLayoutAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/flatlist.html">FlatList</a></li><li><a style="margin-left:10px;" class="" href="docs/image.html">Image</a></li><li><a style="margin-left:10px;" class="" href="docs/keyboardavoidingview.html">KeyboardAvoidingView</a></li><li><a style="margin-left:10px;" class="" href="docs/listview.html">ListView</a></li><li><a style="margin-left:10px;" class="" href="docs/modal.html">Modal</a></li><li><a style="margin-left:10px;" class="" href="docs/navigatorios.html">NavigatorIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/picker.html">Picker</a></li><li><a style="margin-left:10px;" class="" href="docs/pickerios.html">PickerIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/progressbarandroid.html">ProgressBarAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/progressviewios.html">ProgressViewIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/refreshcontrol.html">RefreshControl</a></li><li><a style="margin-left:10px;" class="" href="docs/scrollview.html">ScrollView</a></li><li><a style="margin-left:10px;" class="" href="docs/sectionlist.html">SectionList</a></li><li><a style="margin-left:10px;" class="" href="docs/segmentedcontrolios.html">SegmentedControlIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/slider.html">Slider</a></li><li><a style="margin-left:10px;" class="" href="docs/snapshotviewios.html">SnapshotViewIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/statusbar.html">StatusBar</a></li><li><a style="margin-left:10px;" class="" href="docs/switch.html">Switch</a></li><li><a style="margin-left:10px;" class="" href="docs/tabbarios.html">TabBarIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/tabbarios-item.html">TabBarIOS.Item</a></li><li><a style="margin-left:10px;" class="" href="docs/text.html">Text</a></li><li><a style="margin-left:10px;" class="" href="docs/textinput.html">TextInput</a></li><li><a style="margin-left:10px;" class="" href="docs/toolbarandroid.html">ToolbarAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/touchablehighlight.html">TouchableHighlight</a></li><li><a style="margin-left:10px;" class="" href="docs/touchablenativefeedback.html">TouchableNativeFeedback</a></li><li><a style="margin-left:10px;" class="" href="docs/touchableopacity.html">TouchableOpacity</a></li><li><a style="margin-left:10px;" class="" href="docs/touchablewithoutfeedback.html">TouchableWithoutFeedback</a></li><li><a style="margin-left:10px;" class="" href="docs/view.html">View</a></li><li><a style="margin-left:10px;" class="" href="docs/viewpagerandroid.html">ViewPagerAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/virtualizedlist.html">VirtualizedList</a></li><li><a style="margin-left:10px;" class="" href="docs/webview.html">WebView</a></li></ul></div><div class="nav-docs-section"><h3>APIs</h3><ul><li><a style="margin-left:10px;" class="" href="docs/accessibilityinfo.html">AccessibilityInfo</a></li><li><a style="margin-left:10px;" class="" href="docs/actionsheetios.html">ActionSheetIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/adsupportios.html">AdSupportIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/alert.html">Alert</a></li><li><a style="margin-left:10px;" class="" href="docs/alertios.html">AlertIOS</a></li><li><a style="margin-left:10px;" class="active" href="docs/animated.html">Animated</a></li><li><a style="margin-left:10px;" class="" href="docs/appregistry.html">AppRegistry</a></li><li><a style="margin-left:10px;" class="" href="docs/appstate.html">AppState</a></li><li><a style="margin-left:10px;" class="" href="docs/asyncstorage.html">AsyncStorage</a></li><li><a style="margin-left:10px;" class="" href="docs/backandroid.html">BackAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/backhandler.html">BackHandler</a></li><li><a style="margin-left:10px;" class="" href="docs/cameraroll.html">CameraRoll</a></li><li><a style="margin-left:10px;" class="" href="docs/clipboard.html">Clipboard</a></li><li><a style="margin-left:10px;" class="" href="docs/datepickerandroid.html">DatePickerAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/dimensions.html">Dimensions</a></li><li><a style="margin-left:10px;" class="" href="docs/easing.html">Easing</a></li><li><a style="margin-left:10px;" class="" href="docs/geolocation.html">Geolocation</a></li><li><a style="margin-left:10px;" class="" href="docs/imageeditor.html">ImageEditor</a></li><li><a style="margin-left:10px;" class="" href="docs/imagepickerios.html">ImagePickerIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/imagestore.html">ImageStore</a></li><li><a style="margin-left:10px;" class="" href="docs/interactionmanager.html">InteractionManager</a></li><li><a style="margin-left:10px;" class="" href="docs/keyboard.html">Keyboard</a></li><li><a style="margin-left:10px;" class="" href="docs/layoutanimation.html">LayoutAnimation</a></li><li><a style="margin-left:10px;" class="" href="docs/linking.html">Linking</a></li><li><a style="margin-left:10px;" class="" href="docs/nativemethodsmixin.html">NativeMethodsMixin</a></li><li><a style="margin-left:10px;" class="" href="docs/netinfo.html">NetInfo</a></li><li><a style="margin-left:10px;" class="" href="docs/panresponder.html">PanResponder</a></li><li><a style="margin-left:10px;" class="" href="docs/permissionsandroid.html">PermissionsAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/pixelratio.html">PixelRatio</a></li><li><a style="margin-left:10px;" class="" href="docs/pushnotificationios.html">PushNotificationIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/settings.html">Settings</a></li><li><a style="margin-left:10px;" class="" href="docs/share.html">Share</a></li><li><a style="margin-left:10px;" class="" href="docs/statusbarios.html">StatusBarIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/stylesheet.html">StyleSheet</a></li><li><a style="margin-left:10px;" class="" href="docs/systrace.html">Systrace</a></li><li><a style="margin-left:10px;" class="" href="docs/timepickerandroid.html">TimePickerAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/toastandroid.html">ToastAndroid</a></li><li><a style="margin-left:10px;" class="" href="docs/vibration.html">Vibration</a></li><li><a style="margin-left:10px;" class="" href="docs/vibrationios.html">VibrationIOS</a></li><li><a style="margin-left:10px;" class="" href="docs/layout-props.html">Layout Props</a></li><li><a style="margin-left:10px;" class="" href="docs/shadow-props.html">Shadow Props</a></li></ul></div></div></div><div class="inner-content"><a id="content"></a><h1><a class="anchor" name="animated"></a>Animated <a class="hash-link" href="docs/animated.html#animated">#</a></h1><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 class="token punctuation">(</span></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 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></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 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></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:</p><ul><li><code>friction</code>: Controls "bounciness"/overshoot. Default 7.</li><li><code>tension</code>: Controls speed. Default 40.</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 class="token punctuation">(</span></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>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 punctuation">.</span><span class="token punctuation">.</span>
|
||
onPanResponderMove<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"> // 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><ul><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></ul></span><span><h2><a class="anchor" name="animatedvaluexy"></a>class AnimatedValueXY <a class="hash-link" href="docs/animated.html#animatedvaluexy">#</a></h2><ul><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"> class <span class="token class-name">DraggableView</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> <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>
|
||
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 class="token punctuation">(</span></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 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 class="token punctuation">(</span></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 operator">></span> <span class="token punctuation">{</span>
|
||
Animated<span class="token punctuation">.</span><span class="token function">spring<span class="token punctuation">(</span></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 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 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>
|
||
<Animated<span class="token punctuation">.</span>View
|
||
<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>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 class="token punctuation">(</span></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>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 class="token punctuation">(</span></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 class="token punctuation">(</span></span><span class="token punctuation">)</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">}</span></div></div></div></div></span></ul></span><span><h2><a class="anchor" name="animatedinterpolation"></a>class AnimatedInterpolation <a class="hash-link" href="docs/animated.html#animatedinterpolation">#</a></h2><ul><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></ul></span></div></span></div><p class="edit-page-block">You can <a target="_blank" href="https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/AnimatedImplementation.js">edit the content above on GitHub</a> and send us a pull request!</p><div><div><table width="100%"><tbody><tr><td><h3><a class="anchor" name="examples"></a>Examples <a class="hash-link" href="docs/animated.html#examples">#</a></h3></td><td style="text-align:right;"><a target="_blank" href="https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/js/AnimatedExample.js">Edit on GitHub</a></td></tr></tbody></table><div class="example-container"><div class="prism language-javascript"><span class="token string">'use strict'</span><span class="token punctuation">;</span>
|
||
|
||
<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">'react'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">var</span> ReactNative <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'react-native'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">var</span> <span class="token punctuation">{</span>
|
||
Animated<span class="token punctuation">,</span>
|
||
Easing<span class="token punctuation">,</span>
|
||
StyleSheet<span class="token punctuation">,</span>
|
||
Text<span class="token punctuation">,</span>
|
||
View<span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span> <span class="token operator">=</span> ReactNative<span class="token punctuation">;</span>
|
||
<span class="token keyword">var</span> UIExplorerButton <span class="token operator">=</span> <span class="token function">require<span class="token punctuation">(</span></span><span class="token string">'./UIExplorerButton'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
exports<span class="token punctuation">.</span>framework <span class="token operator">=</span> <span class="token string">'React'</span><span class="token punctuation">;</span>
|
||
exports<span class="token punctuation">.</span>title <span class="token operator">=</span> <span class="token string">'Animated - Examples'</span><span class="token punctuation">;</span>
|
||
exports<span class="token punctuation">.</span>description <span class="token operator">=</span> <span class="token string">'Animated provides a powerful '</span> <span class="token operator">+</span>
|
||
<span class="token string">'and easy-to-use API for building modern, '</span> <span class="token operator">+</span>
|
||
<span class="token string">'interactive user experiences.'</span><span class="token punctuation">;</span>
|
||
|
||
exports<span class="token punctuation">.</span>examples <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span>
|
||
title<span class="token punctuation">:</span> <span class="token string">'FadeInView'</span><span class="token punctuation">,</span>
|
||
description<span class="token punctuation">:</span> <span class="token string">'Uses a simple timing animation to '</span> <span class="token operator">+</span>
|
||
<span class="token string">'bring opacity from 0 to 1 when the component '</span> <span class="token operator">+</span>
|
||
<span class="token string">'mounts.'</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>
|
||
class <span class="token class-name">FadeInView</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
state<span class="token punctuation">:</span> any<span class="token punctuation">;</span>
|
||
|
||
<span class="token function">constructor<span class="token punctuation">(</span></span>props<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>
|
||
fadeAnim<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 comment" spellcheck="true"> // opacity 0
|
||
</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>
|
||
Animated<span class="token punctuation">.</span><span class="token function">timing<span class="token punctuation">(</span></span> <span class="token comment" spellcheck="true"> // Uses easing functions
|
||
</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"> // Target
|
||
</span> duration<span class="token punctuation">:</span> <span class="token number">2000</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // Configuration
|
||
</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"> // Don't forget start!
|
||
</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>
|
||
<Animated<span class="token punctuation">.</span>View <span class="token comment" spellcheck="true"> // Special animatable View
|
||
</span> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||
opacity<span class="token punctuation">:</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"> // Binds
|
||
</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>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>
|
||
class <span class="token class-name">FadeInExample</span> extends <span class="token class-name">React<span class="token punctuation">.</span>Component</span> <span class="token punctuation">{</span>
|
||
state<span class="token punctuation">:</span> any<span class="token punctuation">;</span>
|
||
|
||
<span class="token function">constructor<span class="token punctuation">(</span></span>props<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>
|
||
show<span class="token punctuation">:</span> <span class="token boolean">true</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>
|
||
<View<span class="token operator">></span>
|
||
<UIExplorerButton onPress<span class="token operator">=</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">></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>state<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
|
||
<span class="token punctuation">{</span>show<span class="token punctuation">:</span> <span class="token operator">!</span>state<span class="token punctuation">.</span>show<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 operator">></span>
|
||
Press to <span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>show <span class="token operator">?</span>
|
||
<span class="token string">'Hide'</span> <span class="token punctuation">:</span> <span class="token string">'Show'</span><span class="token punctuation">}</span>
|
||
<<span class="token operator">/</span>UIExplorerButton<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>show && <FadeInView<span class="token operator">></span>
|
||
<View style<span class="token operator">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span>content<span class="token punctuation">}</span><span class="token operator">></span>
|
||
<Text<span class="token operator">></span>FadeInView<<span class="token operator">/</span>Text<span class="token operator">></span>
|
||
<<span class="token operator">/</span>View<span class="token operator">></span>
|
||
<<span class="token operator">/</span>FadeInView<span class="token operator">></span><span class="token punctuation">}</span>
|
||
<<span class="token operator">/</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>
|
||
<span class="token keyword">return</span> <FadeInExample <span class="token operator">/</span><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><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
title<span class="token punctuation">:</span> <span class="token string">'Transform Bounce'</span><span class="token punctuation">,</span>
|
||
description<span class="token punctuation">:</span> <span class="token string">'One `Animated.Value` is driven by a '</span> <span class="token operator">+</span>
|
||
<span class="token string">'spring with custom constants and mapped to an '</span> <span class="token operator">+</span>
|
||
<span class="token string">'ordered set of transforms. Each transform has '</span> <span class="token operator">+</span>
|
||
<span class="token string">'an interpolation to convert the value into the '</span> <span class="token operator">+</span>
|
||
<span class="token string">'right range and units.'</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">this</span><span class="token punctuation">.</span>anim <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>anim <span class="token operator">||</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 keyword">return</span> <span class="token punctuation">(</span>
|
||
<View<span class="token operator">></span>
|
||
<UIExplorerButton onPress<span class="token operator">=</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">></span> <span class="token punctuation">{</span>
|
||
Animated<span class="token punctuation">.</span><span class="token function">spring<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">.</span>anim<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
toValue<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // Returns to the start
|
||
</span> velocity<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // Velocity makes it move
|
||
</span> tension<span class="token punctuation">:</span> <span class="token operator">-</span><span class="token number">10</span><span class="token punctuation">,</span><span class="token comment" spellcheck="true"> // Slow
|
||
</span> friction<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token comment" spellcheck="true"> // Oscillate a lot
|
||
</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 punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
Press to Fling it<span class="token operator">!</span>
|
||
<<span class="token operator">/</span>UIExplorerButton<span class="token operator">></span>
|
||
<Animated<span class="token punctuation">.</span>View
|
||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>content<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
transform<span class="token punctuation">:</span> <span class="token punctuation">[</span> <span class="token comment" spellcheck="true"> // Array order matters
|
||
</span> <span class="token punctuation">{</span>scale<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>anim<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">1</span><span class="token punctuation">,</span> <span class="token number">4</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>translateX<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>anim<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">500</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>rotate<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>anim<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 string">'0deg'</span><span class="token punctuation">,</span> <span class="token string">'360deg'</span><span class="token comment" spellcheck="true"> // 'deg' or 'rad'
|
||
</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 operator">></span>
|
||
<Text<span class="token operator">></span>Transforms<span class="token operator">!</span><<span class="token operator">/</span>Text<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 operator">/</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>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
title<span class="token punctuation">:</span> <span class="token string">'Composite Animations with Easing'</span><span class="token punctuation">,</span>
|
||
description<span class="token punctuation">:</span> <span class="token string">'Sequence, parallel, delay, and '</span> <span class="token operator">+</span>
|
||
<span class="token string">'stagger with different easing functions.'</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">this</span><span class="token punctuation">.</span>anims <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>anims <span class="token operator">||</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span>
|
||
<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></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 keyword">return</span> <span class="token punctuation">(</span>
|
||
<View<span class="token operator">></span>
|
||
<UIExplorerButton onPress<span class="token operator">=</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">></span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">var</span> timing <span class="token operator">=</span> Animated<span class="token punctuation">.</span>timing<span class="token punctuation">;</span>
|
||
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"> // One after the other
|
||
</span> <span class="token function">timing<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">.</span>anims<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>
|
||
toValue<span class="token punctuation">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
|
||
easing<span class="token punctuation">:</span> Easing<span class="token punctuation">.</span>linear<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">delay<span class="token punctuation">(</span></span><span class="token number">400</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token comment" spellcheck="true"> // Use with sequence
|
||
</span> <span class="token function">timing<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">.</span>anims<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>
|
||
toValue<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||
easing<span class="token punctuation">:</span> Easing<span class="token punctuation">.</span><span class="token function">elastic<span class="token punctuation">(</span></span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token comment" spellcheck="true"> // Springy
|
||
</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">delay<span class="token punctuation">(</span></span><span class="token number">400</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
Animated<span class="token punctuation">.</span><span class="token function">stagger<span class="token punctuation">(</span></span><span class="token number">200</span><span class="token punctuation">,</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>anims<span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span><span class="token punctuation">(</span>anim<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">timing<span class="token punctuation">(</span></span>
|
||
anim<span class="token punctuation">,</span> <span class="token punctuation">{</span>toValue<span class="token punctuation">:</span> <span class="token number">200</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">concat<span class="token punctuation">(</span></span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>anims<span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span><span class="token punctuation">(</span>anim<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">timing<span class="token punctuation">(</span></span>
|
||
anim<span class="token punctuation">,</span> <span class="token punctuation">{</span>toValue<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>
|
||
Animated<span class="token punctuation">.</span><span class="token function">delay<span class="token punctuation">(</span></span><span class="token number">400</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>
|
||
Easing<span class="token punctuation">.</span><span class="token function">inOut<span class="token punctuation">(</span></span>Easing<span class="token punctuation">.</span>quad<span class="token punctuation">)</span><span class="token punctuation">,</span><span class="token comment" spellcheck="true"> // Symmetric
|
||
</span> Easing<span class="token punctuation">.</span><span class="token function">back<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"> // Goes backwards first
|
||
</span> Easing<span class="token punctuation">.</span>ease <span class="token comment" spellcheck="true"> // Default bezier
|
||
</span> <span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span><span class="token punctuation">(</span>easing<span class="token punctuation">,</span> ii<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
|
||
<span class="token function">timing<span class="token punctuation">(</span></span><span class="token keyword">this</span><span class="token punctuation">.</span>anims<span class="token punctuation">[</span>ii<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
toValue<span class="token punctuation">:</span> <span class="token number">320</span><span class="token punctuation">,</span> easing<span class="token punctuation">,</span> duration<span class="token punctuation">:</span> <span class="token number">3000</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>
|
||
Animated<span class="token punctuation">.</span><span class="token function">delay<span class="token punctuation">(</span></span><span class="token number">400</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
Animated<span class="token punctuation">.</span><span class="token function">stagger<span class="token punctuation">(</span></span><span class="token number">200</span><span class="token punctuation">,</span>
|
||
<span class="token keyword">this</span><span class="token punctuation">.</span>anims<span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span><span class="token punctuation">(</span>anim<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">timing<span class="token punctuation">(</span></span>anim<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
toValue<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||
easing<span class="token punctuation">:</span> Easing<span class="token punctuation">.</span>bounce<span class="token punctuation">,</span><span class="token comment" spellcheck="true"> // Like a ball
|
||
</span> duration<span class="token punctuation">:</span> <span class="token number">2000</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 punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
Press to Animate
|
||
<<span class="token operator">/</span>UIExplorerButton<span class="token operator">></span>
|
||
<span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">'Composite'</span><span class="token punctuation">,</span> <span class="token string">'Easing'</span><span class="token punctuation">,</span> <span class="token string">'Animations!'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">map<span class="token punctuation">(</span></span>
|
||
<span class="token punctuation">(</span>text<span class="token punctuation">,</span> ii<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
|
||
<Animated<span class="token punctuation">.</span>View
|
||
key<span class="token operator">=</span><span class="token punctuation">{</span>text<span class="token punctuation">}</span>
|
||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span>content<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
left<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>anims<span class="token punctuation">[</span>ii<span class="token punctuation">]</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||
<Text<span class="token operator">></span><span class="token punctuation">{</span>text<span class="token punctuation">}</span><<span class="token operator">/</span>Text<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 operator">/</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>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
title<span class="token punctuation">:</span> <span class="token string">'Continuous Interactions'</span><span class="token punctuation">,</span>
|
||
description<span class="token punctuation">:</span> <span class="token string">'Gesture events, chaining, 2D '</span> <span class="token operator">+</span>
|
||
<span class="token string">'values, interrupting and transitioning '</span> <span class="token operator">+</span>
|
||
<span class="token string">'animations, etc.'</span><span class="token punctuation">,</span>
|
||
render<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">(</span>
|
||
<Text<span class="token operator">></span>Checkout the Gratuitous Animation App<span class="token operator">!</span><<span class="token operator">/</span>Text<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><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">var</span> styles <span class="token operator">=</span> StyleSheet<span class="token punctuation">.</span><span class="token function">create<span class="token punctuation">(</span></span><span class="token punctuation">{</span>
|
||
content<span class="token punctuation">:</span> <span class="token punctuation">{</span>
|
||
backgroundColor<span class="token punctuation">:</span> <span class="token string">'deepskyblue'</span><span class="token punctuation">,</span>
|
||
borderWidth<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
borderColor<span class="token punctuation">:</span> <span class="token string">'dodgerblue'</span><span class="token punctuation">,</span>
|
||
padding<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||
margin<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||
borderRadius<span class="token punctuation">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
|
||
alignItems<span class="token punctuation">:</span> <span class="token string">'center'</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><div class="embedded-simulator"><p><a class="modal-button-open"><strong>Run this example</strong></a></p><div class="modal-button-open modal-button-open-img"><img alt="Run example in simulator" width="170" height="356" src="img/uiexplorer_main_ios.png"></div><div><div class="modal"><div class="modal-content"><button class="modal-button-close">×</button><div class="center"><iframe class="simulator" src="https://appetize.io/embed/7vdfm9h3e6vuf4gfdm7r5rgc48?device=iphone6s&scale=60&autoplay=false&orientation=portrait&deviceColor=white&params=%7B%22route%22%3A%22Animated%22%7D" width="256" height="550" scrolling="no"></iframe><p>Powered by <a target="_blank" href="https://appetize.io">appetize.io</a></p></div></div></div><div class="modal-backdrop"></div></div></div></div></div></div><div class="docs-prevnext"><a class="docs-prev" href="docs/alertios.html#content">← Prev</a><a class="docs-next" href="docs/appregistry.html#content">Next →</a></div></div></section><footer class="nav-footer"><section class="sitemap"><a href="/react-native" class="nav-home"><img src="img/header_logo.png" alt="React Native" width="66" height="58"></a><div><h5><a href="docs/">Docs</a></h5><a href="docs/getting-started.html">Getting Started</a><a href="docs/tutorial.html">Tutorial</a><a href="docs/integration-with-existing-apps.html">Integration With Existing Apps</a><a href="docs/more-resources.html">More Resources</a></div><div><h5><a href="/react-native/support.html">Community</a></h5><a href="/react-native/showcase.html">Showcase</a><a href="http://www.meetup.com/topics/react-native/" target="_blank">Upcoming Events</a><a href="https://www.facebook.com/groups/react.native.community" target="_blank">Facebook Group</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a></div><div><h5><a href="/react-native/support.html">Help</a></h5><a href="http://stackoverflow.com/questions/tagged/react-native" target="_blank">Stack Overflow</a><a href="https://discord.gg/0ZcbPKXt5bZjGY5n">Reactiflux Chat</a><a href="/react-native/versions.html" target="_blank">Latest Releases</a><a href="https://react-native.canny.io/feature-requests" target="_blank">Feature Requests</a></div><div><h5>More</h5><a href="/react-native/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="http://facebook.github.io/react/" target="_blank">React</a></div></section><section class="newsletter"><div id="mc_embed_signup"><form action="//reactnative.us10.list-manage.com/subscribe/post?u=db0dd948e2b729ee62625b1a8&id=47cd41008f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate><div id="mc_embed_signup_scroll"><label for="mce-EMAIL"><h5>Get the React Native Newsletter</h5></label><input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required><div style="position:absolute;left:-5000px;" aria-hidden="true"><input type="text" name="b_db0dd948e2b729ee62625b1a8_47cd41008f" tabindex="-1" value=""></div><div class="clear"><input type="submit" value="Sign up" name="subscribe" id="mc-embedded-subscribe" class="button"></div></div></form></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div><div id="fb-root"></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><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");
|
||
|
||
docsearch({
|
||
apiKey: '2c98749b4a1e588efec53b2acec13025',
|
||
indexName: 'react-native-versions',
|
||
inputSelector: '#algolia-doc-search',
|
||
algoliaOptions: { facetFilters: [ "tags:0.44" ], hitsPerPage: 5 }
|
||
});
|
||
</script><script src="js/scripts.js"></script><script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js"></script><script type="text/javascript">(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script></body></html> |