Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
aaad6230d4be8fa7b383deabfd548ddc465f0a50
react-native/docs/animated.html
T
Website Deployment Script aaad6230d4 Deploy website - based on 2354d56825f568d6826681febf3c0956acba5918
2020-11-30 13:05:15 +00:00

45 lines
80 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="Docusaurus v2.0.0-alpha.66">
<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="React Native Blog RSS Feed">
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="React Native Blog Atom Feed">
<link rel="preconnect" href="https://www.google-analytics.com">
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://www.googletagmanager.com">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-41298772-2"></script>
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-41298772-2",{})</script>
<link rel="search" type="application/opensearchdescription+xml" title="React Native" href="/opensearch.xml">
<script src="https://cdn.jsdelivr.net/npm/focus-visible@5.0.2/dist/focus-visible.min.js" defer="defer"></script>
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Animated · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:version" content="0.63"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-0.63"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" property="og:title" content="Animated · React Native"><meta data-react-helmet="true" name="description" content="The Animated library is designed to make animations fluid, powerful, and painless to build and maintain. Animated focuses on declarative relationships between inputs and outputs, configurable transforms in between, and start/stop methods to control time-based animation execution."><meta data-react-helmet="true" property="og:description" content="The Animated library is designed to make animations fluid, powerful, and painless to build and maintain. Animated focuses on declarative relationships between inputs and outputs, configurable transforms in between, and start/stop methods to control time-based animation execution."><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/docs/animated"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link data-react-helmet="true" rel="canonical" href="https://reactnative.dev/docs/animated"><link rel="stylesheet" href="/styles.fccefeba.css">
<link rel="stylesheet" href="/main.8f9eac86.css">
<link rel="preload" href="/styles.73cf9778.js" as="script">
<link rel="preload" href="/runtime~main.247cada2.js" as="script">
<link rel="preload" href="/main.3b1f3498.js" as="script">
<link rel="preload" href="/1.17a0cf36.js" as="script">
<link rel="preload" href="/2.37a050b1.js" as="script">
<link rel="preload" href="/1f391b9e.c148b120.js" as="script">
<link rel="preload" href="/939.41ec4d67.js" as="script">
<link rel="preload" href="/ee5b3385.90d27433.js" as="script">
<link rel="preload" href="/17896441.7d7633c0.js" as="script">
<link rel="preload" href="/f09787dc.b428d5b1.js" as="script">
</head>
<body>
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/getting-started">0.63</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/animated">Next</a></li><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/animated">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/animated">0.62</a></li><li><a class="dropdown__link" href="/docs/0.61/animated">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/animated">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" href="/docs/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/components-and-apis">Components</a><a class="navbar__item navbar__link navbar__link--active" href="/docs/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link navbar__link--active" href="/docs/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li><li class="menu__list-item"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/animated">Next</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/animated">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/animated">0.62</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/animated">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/animated">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2UBv"><div class="docSidebarContainer_1hqR" role="complementary"><div class="sidebar_MSwm"><div class="menu menu--responsive menu_2hiu"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_37TU" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">APIs</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/accessibilityinfo">AccessibilityInfo</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/alert">Alert</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/animated">Animated</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/animatedvalue">Animated.Value</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/animatedvaluexy">Animated.ValueXY</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/appearance">Appearance</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/appregistry">AppRegistry</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/appstate">AppState</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/devsettings">DevSettings</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/dimensions">Dimensions</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/easing">Easing</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/interactionmanager">InteractionManager</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/keyboard">Keyboard</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/layoutanimation">LayoutAnimation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/linking">Linking</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/panresponder">PanResponder</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/pixelratio">PixelRatio</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/platformcolor">PlatformColor</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/share">Share</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/stylesheet">StyleSheet</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/systrace">Systrace</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/transforms">Transforms</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/vibration">Vibration</a></li><li class="menu__list-item"><a class="menu__link menu__link--sublist" href="#!" tabindex="0">Hooks</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/usecolorscheme">useColorScheme</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/usewindowdimensions">useWindowDimensions</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist" href="#!" tabindex="0">Android APIs</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/backhandler">BackHandler</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/permissionsandroid">PermissionsAndroid</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/toastandroid">ToastAndroid</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist" href="#!" tabindex="0">iOS APIs</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/actionsheetios">ActionSheetIOS</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/dynamiccolorios">DynamicColorIOS</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/settings">Settings</a></li></ul></li></ul></li></ul></div></div></div><main class="docMainContainer_1rYT"><div class="container padding-vert--lg docItemWrapper_1Hme"><div class="row"><div class="col docItemCol_2AGf"><div class="docItemContainer_1tAC"><article><header><h1 class="docTitle_cWlf">Animated</h1></header><div class="markdown"><p>The <code>Animated</code> library is designed to make animations fluid, powerful, and painless to build and maintain. <code>Animated</code> focuses on declarative relationships between inputs and outputs, configurable transforms in between, and <code>start</code>/<code>stop</code> methods to control time-based animation execution.</p><p>The core workflow for creating an animation is 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><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_3gSF tabs__item--active" style="outline:none">Function Component</li><li role="tab" tabindex="0" aria-selected="false" class="tabs__item tabItem_3gSF" style="outline:none">Class Component</li></ul><div role="tabpanel" class="margin-vert--md"><div><block class="functional syntax"></block><blockquote><p>Don&#x27;t modify the animated value directly. You can use the <a href="https://reactjs.org/docs/hooks-reference.html#useref" target="_blank" rel="noopener noreferrer"><code>useRef</code> Hook</a> to return a mutable ref object. This ref object&#x27;s <code>current</code> property is initialized as the given argument and persists throughout the component lifecycle.</p></blockquote></div></div></div><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="example"></a>Example<a aria-hidden="true" tabindex="-1" class="hash-link" href="#example" title="Direct link to heading">#</a></h2><p>The following example contains a <code>View</code> which will fade in and fade out based on the animated value <code>fadeAnim</code></p><div><ul role="tablist" aria-orientation="horizontal" class="tabs"><li role="tab" tabindex="0" aria-selected="true" class="tabs__item tabItem_3gSF tabs__item--active" style="outline:none">Function Component</li><li role="tab" tabindex="0" aria-selected="false" class="tabs__item tabItem_3gSF" style="outline:none">Class Component</li></ul><div role="tabpanel" class="margin-vert--md"><div><div class="snack-player" data-snack-name="Animated" data-snack-description="Example usage" data-snack-code="import%20React%2C%20%7B%20useRef%20%7D%20from%20%22react%22%3B%0Aimport%20%7B%20Animated%2C%20Text%2C%20View%2C%20StyleSheet%2C%20Button%20%7D%20from%20%22react-native%22%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%20%20%2F%2F%20fadeAnim%20will%20be%20used%20as%20the%20value%20for%20opacity.%20Initial%20Value%3A%200%0A%20%20const%20fadeAnim%20%3D%20useRef(new%20Animated.Value(0)).current%3B%0A%0A%20%20const%20fadeIn%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Will%20change%20fadeAnim%20value%20to%201%20in%205%20seconds%0A%20%20%20%20Animated.timing(fadeAnim%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%201%2C%0A%20%20%20%20%20%20duration%3A%205000%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D%3B%0A%0A%20%20const%20fadeOut%20%3D%20()%20%3D%3E%20%7B%0A%20%20%20%20%2F%2F%20Will%20change%20fadeAnim%20value%20to%200%20in%205%20seconds%0A%20%20%20%20Animated.timing(fadeAnim%2C%20%7B%0A%20%20%20%20%20%20toValue%3A%200%2C%0A%20%20%20%20%20%20duration%3A%205000%0A%20%20%20%20%7D).start()%3B%0A%20%20%7D%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CAnimated.View%0A%20%20%20%20%20%20%20%20style%3D%7B%5B%0A%20%20%20%20%20%20%20%20%20%20styles.fadingContainer%2C%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20opacity%3A%20fadeAnim%20%2F%2F%20Bind%20opacity%20to%20animated%20value%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%5D%7D%0A%20%20%20%20%20%20%3E%0A%20%20%20%20%20%20%20%20%3CText%20style%3D%7Bstyles.fadingText%7D%3EFading%20View!%3C%2FText%3E%0A%20%20%20%20%20%20%3C%2FAnimated.View%3E%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.buttonRow%7D%3E%0A%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Fade%20In%22%20onPress%3D%7BfadeIn%7D%20%2F%3E%0A%20%20%20%20%20%20%20%20%3CButton%20title%3D%22Fade%20Out%22%20onPress%3D%7BfadeOut%7D%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20alignItems%3A%20%22center%22%2C%0A%20%20%20%20justifyContent%3A%20%22center%22%0A%20%20%7D%2C%0A%20%20fadingContainer%3A%20%7B%0A%20%20%20%20paddingVertical%3A%208%2C%0A%20%20%20%20paddingHorizontal%3A%2016%2C%0A%20%20%20%20backgroundColor%3A%20%22powderblue%22%0A%20%20%7D%2C%0A%20%20fadingText%3A%20%7B%0A%20%20%20%20fontSize%3A%2028%2C%0A%20%20%20%20textAlign%3A%20%22center%22%2C%0A%20%20%20%20margin%3A%2010%0A%20%20%7D%2C%0A%20%20buttonRow%3A%20%7B%0A%20%20%20%20flexDirection%3A%20%22row%22%2C%0A%20%20%20%20marginVertical%3A%2016%0A%20%20%7D%0A%7D)%3B%0A%0Aexport%20default%20App%3B" data-snack-platform="web" data-snack-supported-platforms="ios,android,web" data-snack-theme="light" data-snack-preview="true"></div></div></div></div><p>Refer to the <a href="/docs/animations#animated-api">Animations</a> guide to see additional examples of <code>Animated</code> in action.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="overview"></a>Overview<a aria-hidden="true" tabindex="-1" class="hash-link" href="#overview" title="Direct link to heading">#</a></h2><p>There are two value types you can use with <code>Animated</code>:</p><ul><li><a href="/docs/animated#value"><code>Animated.Value()</code></a> for single values</li><li><a href="/docs/animated#valuexy"><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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="configuring-animations"></a>Configuring animations<a aria-hidden="true" tabindex="-1" class="hash-link" href="#configuring-animations" title="Direct link to heading">#</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#decay"><code>Animated.decay()</code></a> starts with an initial velocity and gradually slows to a stop.</li><li><a href="/docs/animated#spring"><code>Animated.spring()</code></a> provides a basic spring physics model.</li><li><a href="/docs/animated#timing"><code>Animated.timing()</code></a> animates a value over time using <a href="/docs/easing">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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="working-with-animations"></a>Working with animations<a aria-hidden="true" tabindex="-1" class="hash-link" href="#working-with-animations" title="Direct link to heading">#</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><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Animated</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">timing</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">{</span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">start</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter punctuation" style="color:#657b83">{</span><span class="token parameter"> finished </span><span class="token parameter punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">/* completion callback */</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="using-the-native-driver"></a>Using the native driver<a aria-hidden="true" tabindex="-1" class="hash-link" href="#using-the-native-driver" title="Direct link to heading">#</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#using-the-native-driver">Animations</a> guide to learn more.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="animatable-components"></a>Animatable components<a aria-hidden="true" tabindex="-1" class="hash-link" href="#animatable-components" title="Direct link to heading">#</a></h3><p>Only animatable components can be animated. These unique 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#createanimatedcomponent"><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><li><code>Animated.FlatList</code></li><li><code>Animated.SectionList</code></li></ul><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="composing-animations"></a>Composing animations<a aria-hidden="true" tabindex="-1" class="hash-link" href="#composing-animations" title="Direct link to heading">#</a></h3><p>Animations can also be combined in complex ways using composition functions:</p><ul><li><a href="/docs/animated#delay"><code>Animated.delay()</code></a> starts an animation after a given delay.</li><li><a href="/docs/animated#parallel"><code>Animated.parallel()</code></a> starts a number of animations at the same time.</li><li><a href="/docs/animated#sequence"><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#stagger"><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 by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>. See <a href="/docs/animations#tracking-dynamic-values">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 aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="combining-animated-values"></a>Combining animated values<a aria-hidden="true" tabindex="-1" class="hash-link" href="#combining-animated-values" title="Direct link to heading">#</a></h3><p>You can combine two animated values via addition, subtraction, multiplication, division, or modulo to make a new animated value:</p><ul><li><a href="/docs/animated#add"><code>Animated.add()</code></a></li><li><a href="/docs/animated#subtract"><code>Animated.subtract()</code></a></li><li><a href="/docs/animated#divide"><code>Animated.divide()</code></a></li><li><a href="/docs/animated#modulo"><code>Animated.modulo()</code></a></li><li><a href="/docs/animated#multiply"><code>Animated.multiply()</code></a></li></ul><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="interpolation"></a>Interpolation<a aria-hidden="true" tabindex="-1" class="hash-link" href="#interpolation" title="Direct link to heading">#</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 linear interpolation by default but also supports easing functions.</p><ul><li><a href="/docs/animated#interpolate"><code>interpolate()</code></a></li></ul><p>Read more about interpolation in the <a href="/docs/animations#interpolation">Animation</a> guide.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="handling-gestures-and-other-events"></a>Handling gestures and other events<a aria-hidden="true" tabindex="-1" class="hash-link" href="#handling-gestures-and-other-events" title="Direct link to heading">#</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#event"><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="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> onScroll</span><span class="token operator" style="color:#fc929e">=</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain">Animated</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">event</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// scrollX = e.nativeEvent.contentOffset.x</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> nativeEvent</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> contentOffset</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> x</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> scrollX</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">]</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">}</span></div></div></div></div></div><hr><h1><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="reference"></a>Reference<a aria-hidden="true" tabindex="-1" class="hash-link" href="#reference" title="Direct link to heading">#</a></h1><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="methods"></a>Methods<a aria-hidden="true" tabindex="-1" class="hash-link" href="#methods" title="Direct link to heading">#</a></h2><p>When the given value is a ValueXY instead of a Value, each config option may be a vector of the form <code>{x: ..., y: ...}</code> instead of a scalar.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="decay"></a><code>decay()</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#decay" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">decay</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">value</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> config</span><span class="token punctuation" style="color:#657b83">)</span></div></div></div></div></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>isInteraction</code>: Whether or not this animation creates an &quot;interaction handle&quot; on the <code>InteractionManager</code>. Default true.</li><li><code>useNativeDriver</code>: Uses the native driver when true. Default false.</li></ul><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="timing"></a><code>timing()</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#timing" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">timing</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">value</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> config</span><span class="token punctuation" style="color:#657b83">)</span></div></div></div></div></div><p>Animates a value along a timed easing curve. The <a href="/docs/easing"><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>isInteraction</code>: Whether or not this animation creates an &quot;interaction handle&quot; on the <code>InteractionManager</code>. Default true.</li><li><code>useNativeDriver</code>: Uses the native driver when true. Default false.</li></ul><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="spring"></a><code>spring()</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#spring" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">spring</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">value</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> config</span><span class="token punctuation" style="color:#657b83">)</span></div></div></div></div></div><p>Animates a value according to an analytical spring model based on <a href="https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator" target="_blank" rel="noopener noreferrer">damped harmonic oscillation</a>. Tracks velocity state to create fluid motions as the <code>toValue</code> updates, and can be chained together.</p><p>Config is an object that may have the following options.</p><p>Note that you can only define one of bounciness/speed, tension/friction, or stiffness/damping/mass, but not more than one:</p><p>The friction/tension or bounciness/speed options match the spring model in <a href="https://github.com/facebook/pop" target="_blank" rel="noopener noreferrer"><code>Facebook Pop</code></a>, <a href="http://facebook.github.io/rebound/" target="_blank" rel="noopener noreferrer">Rebound</a>, and <a href="http://origami.design/" target="_blank" rel="noopener noreferrer">Origami</a>.</p><ul><li><code>friction</code>: Controls &quot;bounciness&quot;/overshoot. Default 7.</li><li><code>tension</code>: Controls speed. Default 40.</li><li><code>speed</code>: Controls speed of the animation. Default 12.</li><li><code>bounciness</code>: Controls bounciness. Default 8.</li></ul><p>Specifying stiffness/damping/mass as parameters makes <code>Animated.spring</code> use an analytical spring model based on the motion equations of a <a href="https://en.wikipedia.org/wiki/Harmonic_oscillator#Damped_harmonic_oscillator" target="_blank" rel="noopener noreferrer">damped harmonic oscillator</a>. This behavior is slightly more precise and faithful to the physics behind spring dynamics, and closely mimics the implementation in iOS&#x27;s CASpringAnimation.</p><ul><li><code>stiffness</code>: The spring stiffness coefficient. Default 100.</li><li><code>damping</code>: Defines how the spring’s motion should be damped due to the forces of friction. Default 10.</li><li><code>mass</code>: The mass of the object attached to the end of the spring. Default 1.</li></ul><p>Other configuration options are as follows:</p><ul><li><code>velocity</code>: The initial velocity of the object attached to the spring. Default 0 (object is at rest).</li><li><code>overshootClamping</code>: Boolean indicating whether the spring should be clamped and not bounce. Default false.</li><li><code>restDisplacementThreshold</code>: The threshold of displacement from rest below which the spring should be considered at rest. Default 0.001.</li><li><code>restSpeedThreshold</code>: The speed at which the spring should be considered at rest in pixels per second. Default 0.001.</li><li><code>delay</code>: Start the animation after delay (milliseconds). Default 0.</li><li><code>isInteraction</code>: Whether or not this animation creates an &quot;interaction handle&quot; on the <code>InteractionManager</code>. Default true.</li><li><code>useNativeDriver</code>: Uses the native driver when true. Default false.</li></ul><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="add"></a><code>add()</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#add" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">add</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">a</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> b</span><span class="token punctuation" style="color:#657b83">)</span></div></div></div></div></div><p>Creates a new Animated value composed from two Animated values added together.</p><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="subtract"></a><code>subtract()</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#subtract" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">subtract</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">a</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> b</span><span class="token punctuation" style="color:#657b83">)</span></div></div></div></div></div><p>Creates a new Animated value composed by subtracting the second Animated value from the first Animated value.</p><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="divide"></a><code>divide()</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#divide" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">divide</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">a</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> b</span><span class="token punctuation" style="color:#657b83">)</span></div></div></div></div></div><p>Creates a new Animated value composed by dividing the first Animated value by the second Animated value.</p><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="multiply"></a><code>multiply()</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#multiply" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">multiply</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">a</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> b</span><span class="token punctuation" style="color:#657b83">)</span></div></div></div></div></div><p>Creates a new Animated value composed from two Animated values multiplied together.</p><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="modulo"></a><code>modulo()</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#modulo" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">modulo</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">a</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> modulus</span><span class="token punctuation" style="color:#657b83">)</span></div></div></div></div></div><p>Creates a new Animated value that is the (non-negative) modulo of the provided Animated value</p><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="diffclamp"></a><code>diffClamp()</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#diffclamp" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">diffClamp</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">a</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> min</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> max</span><span class="token punctuation" style="color:#657b83">)</span></div></div></div></div></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><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="delay"></a><code>delay()</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#delay" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">delay</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">time</span><span class="token punctuation" style="color:#657b83">)</span></div></div></div></div></div><p>Starts an animation after the given delay.</p><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="sequence"></a><code>sequence()</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#sequence" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">sequence</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">animations</span><span class="token punctuation" style="color:#657b83">)</span></div></div></div></div></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><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="parallel"></a><code>parallel()</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#parallel" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">parallel</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">animations</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> config</span><span class="token operator" style="color:#fc929e">?</span><span class="token punctuation" style="color:#657b83">)</span></div></div></div></div></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><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="stagger"></a><code>stagger()</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#stagger" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">stagger</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">time</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> animations</span><span class="token punctuation" style="color:#657b83">)</span></div></div></div></div></div><p>Array of animations may run in parallel (overlap), but are started in sequence with successive delays. Nice for doing trailing effects.</p><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="loop"></a><code>loop()</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#loop" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">loop</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">animation</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> config</span><span class="token operator" style="color:#fc929e">?</span><span class="token punctuation" style="color:#657b83">)</span></div></div></div></div></div><p>Loops a given animation continuously, so that each time it reaches the end, it resets and begins again from the start. Will loop without blocking the JS thread if the child animation is set to <code>useNativeDriver: true</code>. In addition, loops can prevent <code>VirtualizedList</code>-based components from rendering more rows while the animation is running. You can pass <code>isInteraction: false</code> in the child animation config to fix this.</p><p>Config is an object that may have the following options:</p><ul><li><code>iterations</code>: Number of times the animation should loop. Default <code>-1</code> (infinite).</li></ul><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="event"></a><code>event()</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#event" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">event</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">argMapping</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> config</span><span class="token operator" style="color:#fc929e">?</span><span class="token punctuation" style="color:#657b83">)</span></div></div></div></div></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="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> onScroll</span><span class="token operator" style="color:#fc929e">=</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain">Animated</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">event</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain">nativeEvent</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain">contentOffset</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain">x</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">this</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">_scrollX</span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token function-variable function" style="color:#79b6f2">listener</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">event</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=&gt;</span><span class="token plain"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">log</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">event</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// Optional async listener</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token operator" style="color:#fc929e">...</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> onPanResponderMove</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> Animated</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">event</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">[</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">null</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// raw event arg ignored</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain">dx</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">this</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">_panX</span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// gestureState arg</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">{</span><span class="token function-variable function" style="color:#79b6f2">listener</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">event</span><span class="token parameter punctuation" style="color:#657b83">,</span><span class="token parameter"> gestureState</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=&gt;</span><span class="token plain"> console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">log</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">event</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> gestureState</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// Optional async listener</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">,</span></div></div></div></div></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><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="forkevent"></a><code>forkEvent()</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#forkevent" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">forkEvent</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">event</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> listener</span><span class="token punctuation" style="color:#657b83">)</span></div></div></div></div></div><p>Advanced imperative API for snooping on animated events that are passed in through props. It permits to add a new javascript listener to an existing <code>AnimatedEvent</code>. If <code>animatedEvent</code> is a javascript listener, it will merge the 2 listeners into a single one, and if <code>animatedEvent</code> is null/undefined, it will assign the javascript listener directly. Use values directly where possible.</p><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="unforkevent"></a><code>unforkEvent()</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#unforkevent" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">unforkEvent</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">event</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> listener</span><span class="token punctuation" style="color:#657b83">)</span></div></div></div></div></div><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="start"></a><code>start()</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#start" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">start</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">[</span><span class="token plain">callback</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">?</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">result</span><span class="token parameter operator" style="color:#fc929e">?</span><span class="token parameter punctuation" style="color:#657b83">:</span><span class="token parameter"> </span><span class="token parameter punctuation" style="color:#657b83">{</span><span class="token parameter">finished</span><span class="token parameter punctuation" style="color:#657b83">:</span><span class="token parameter"> boolean</span><span class="token parameter punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=&gt;</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">void</span><span class="token punctuation" style="color:#657b83">)</span></div></div></div></div></div><p>Animations are started by calling start() on your animation. start() takes a completion callback that will be called when the animation is done or when the animation is done because stop() was called on it before it could finish.</p><p><strong>Parameters:</strong></p><table><thead><tr><th>Name</th><th>Type</th><th>Required</th><th>Description</th></tr></thead><tbody><tr><td>callback</td><td>?(result?: {finished: boolean})</td><td>No</td><td>Function that will be called after the animation finished running normally or when the animation is done because stop() was called on it before it could finish</td></tr></tbody></table><p>Start example with callback:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">Animated</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">timing</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">{</span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">start</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter punctuation" style="color:#657b83">{</span><span class="token parameter"> finished </span><span class="token parameter punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=&gt;</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">/* completion callback */</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="stop"></a><code>stop()</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#stop" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">stop</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span></div></div></div></div></div><p>Stops any running animation.</p><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="reset"></a><code>reset()</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#reset" title="Direct link to heading">#</a></h3><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">static</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">reset</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span></div></div></div></div></div><p>Stops any running animation and resets the value to its original.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="properties"></a>Properties<a aria-hidden="true" tabindex="-1" class="hash-link" href="#properties" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="value"></a><code>Value</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#value" title="Direct link to heading">#</a></h3><p>Standard value class for driving animations. Typically initialized with <code>new Animated.Value(0);</code></p><p>You can read more about <code>Animated.Value</code> API on the separate <a href="/docs/animatedvalue">page</a>.</p><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="valuexy"></a><code>ValueXY</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#valuexy" title="Direct link to heading">#</a></h3><p>2D value class for driving 2D animations, such as pan gestures.</p><p>You can read more about <code>Animated.ValueXY</code> API on the separate <a href="/docs/animatedvaluexy">page</a>.</p><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="interpolation-1"></a><code>Interpolation</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#interpolation-1" title="Direct link to heading">#</a></h3><p>Exported to use the Interpolation type in flow.</p><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="node"></a><code>Node</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#node" title="Direct link to heading">#</a></h3><p>Exported for ease of type checking. All animated values derive from this class.</p><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="createanimatedcomponent"></a><code>createAnimatedComponent</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#createanimatedcomponent" title="Direct link to heading">#</a></h3><p>Make any React component Animatable. Used to create <code>Animated.View</code>, etc.</p><hr><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="attachnativeevent"></a><code>attachNativeEvent</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#attachnativeevent" title="Direct link to heading">#</a></h3><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></article><div class="docMetadata margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/facebook/react-native-website/blob/master/website/versioned_docs/version-0.63/animated.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col text--right"><em><small class="docMetadata-updated">Last updated on <time datetime="2020-10-29T04:19:29.000Z" class="docLastUpdatedAt_1gIo">10/29/2020</time></small></em></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/alert"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Alert</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/animatedvalue"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Animated.Value »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3iuQ"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#example" class="table-of-contents__link">Example</a></li><li><a href="#overview" class="table-of-contents__link">Overview</a><ul><li><a href="#configuring-animations" class="table-of-contents__link">Configuring animations</a></li><li><a href="#working-with-animations" class="table-of-contents__link">Working with animations</a></li><li><a href="#using-the-native-driver" class="table-of-contents__link">Using the native driver</a></li><li><a href="#animatable-components" class="table-of-contents__link">Animatable components</a></li><li><a href="#composing-animations" class="table-of-contents__link">Composing animations</a></li><li><a href="#combining-animated-values" class="table-of-contents__link">Combining animated values</a></li><li><a href="#interpolation" class="table-of-contents__link">Interpolation</a></li><li><a href="#handling-gestures-and-other-events" class="table-of-contents__link">Handling gestures and other events</a></li></ul></li><li><a href="#methods" class="table-of-contents__link">Methods</a><ul><li><a href="#decay" class="table-of-contents__link"><code>decay()</code></a></li><li><a href="#timing" class="table-of-contents__link"><code>timing()</code></a></li><li><a href="#spring" class="table-of-contents__link"><code>spring()</code></a></li><li><a href="#add" class="table-of-contents__link"><code>add()</code></a></li><li><a href="#subtract" class="table-of-contents__link"><code>subtract()</code></a></li><li><a href="#divide" class="table-of-contents__link"><code>divide()</code></a></li><li><a href="#multiply" class="table-of-contents__link"><code>multiply()</code></a></li><li><a href="#modulo" class="table-of-contents__link"><code>modulo()</code></a></li><li><a href="#diffclamp" class="table-of-contents__link"><code>diffClamp()</code></a></li><li><a href="#delay" class="table-of-contents__link"><code>delay()</code></a></li><li><a href="#sequence" class="table-of-contents__link"><code>sequence()</code></a></li><li><a href="#parallel" class="table-of-contents__link"><code>parallel()</code></a></li><li><a href="#stagger" class="table-of-contents__link"><code>stagger()</code></a></li><li><a href="#loop" class="table-of-contents__link"><code>loop()</code></a></li><li><a href="#event" class="table-of-contents__link"><code>event()</code></a></li><li><a href="#forkevent" class="table-of-contents__link"><code>forkEvent()</code></a></li><li><a href="#unforkevent" class="table-of-contents__link"><code>unforkEvent()</code></a></li><li><a href="#start" class="table-of-contents__link"><code>start()</code></a></li><li><a href="#stop" class="table-of-contents__link"><code>stop()</code></a></li><li><a href="#reset" class="table-of-contents__link"><code>reset()</code></a></li></ul></li><li><a href="#properties" class="table-of-contents__link">Properties</a><ul><li><a href="#value" class="table-of-contents__link"><code>Value</code></a></li><li><a href="#valuexy" class="table-of-contents__link"><code>ValueXY</code></a></li><li><a href="#interpolation-1" class="table-of-contents__link"><code>Interpolation</code></a></li><li><a href="#node" class="table-of-contents__link"><code>Node</code></a></li><li><a href="#createanimatedcomponent" class="table-of-contents__link"><code>createAnimatedComponent</code></a></li><li><a href="#attachnativeevent" class="table-of-contents__link"><code>attachNativeEvent</code></a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/tutorial">Tutorial</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/components-and-apis">Components and APIs</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/more-resources">More Resources</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/help">The React Native Community</a></li><li class="footer__item"><a class="footer__link-item" href="/showcase">Who&#x27;s using React Native?</a></li><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">Ask Questions on Stack Overflow</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Contributor Guide</a></li><li class="footer__item"><a href="https://dev.to/t/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">DEV Community</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Find us</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://twitter.com/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms of Service</a></li></ul></div></div><div class="text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com" target="_blank" rel="noopener noreferrer" class="footerLogoLink_19Ac"><img class="footer__logo" alt="Facebook Open Source Logo" src="/img/oss_logo.png"></a></div><div>Copyright © 2020 Facebook, Inc.</div></div></div></footer></div>
<script src="/styles.73cf9778.js"></script>
<script src="/runtime~main.247cada2.js"></script>
<script src="/main.3b1f3498.js"></script>
<script src="/1.17a0cf36.js"></script>
<script src="/2.37a050b1.js"></script>
<script src="/1f391b9e.c148b120.js"></script>
<script src="/939.41ec4d67.js"></script>
<script src="/ee5b3385.90d27433.js"></script>
<script src="/17896441.7d7633c0.js"></script>
<script src="/f09787dc.b428d5b1.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink