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