mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Deploy website
Deploy website version based on ce72757d53741445147dd5b38e6abb3817e76aa4
This commit is contained in:
Website Deployment Script
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.23"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.23"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.23/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.23"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.23"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.23/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>AsyncStorage · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="AsyncStorage is a simple, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><meta name="docsearch:version" content="0.23"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="AsyncStorage · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="AsyncStorage is a simple, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>AsyncStorage · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="AsyncStorage is an asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><meta name="docsearch:version" content="0.23"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="AsyncStorage · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="AsyncStorage is an asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,9 +68,9 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/asyncstorage.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">AsyncStorage</h1></header><article><div><span><p>AsyncStorage is a simple, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/asyncstorage.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">AsyncStorage</h1></header><article><div><span><p>AsyncStorage is an asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.</p>
|
||||
<p>It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it operates globally.</p>
|
||||
<p>This JS code is a simple facade over the native iOS implementation to provide a clear JS API, real Error objects, and simple non-multi functions. Each method returns a <code>Promise</code> object.</p>
|
||||
<p>This JS code is a facade over the native iOS implementation to provide a clear JS API, real Error objects, and non-multi functions. Each method returns a <code>Promise</code> object.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.23/asyncstorage#getitem"><code>getItem</code></a></li>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>AsyncStorage · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="AsyncStorage is a simple, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><meta name="docsearch:version" content="0.23"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="AsyncStorage · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="AsyncStorage is a simple, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>AsyncStorage · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="AsyncStorage is an asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><meta name="docsearch:version" content="0.23"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="AsyncStorage · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="AsyncStorage is an asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,9 +68,9 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/asyncstorage.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">AsyncStorage</h1></header><article><div><span><p>AsyncStorage is a simple, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/asyncstorage.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">AsyncStorage</h1></header><article><div><span><p>AsyncStorage is an asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.</p>
|
||||
<p>It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it operates globally.</p>
|
||||
<p>This JS code is a simple facade over the native iOS implementation to provide a clear JS API, real Error objects, and simple non-multi functions. Each method returns a <code>Promise</code> object.</p>
|
||||
<p>This JS code is a facade over the native iOS implementation to provide a clear JS API, real Error objects, and non-multi functions. Each method returns a <code>Promise</code> object.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.23/asyncstorage#getitem"><code>getItem</code></a></li>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/scrollview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ScrollView</h1></header><article><div><span><p>Component that wraps platform ScrollView while providing integration with touch locking "responder" system.</p>
|
||||
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes easy to debug.</p>
|
||||
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes quick to debug.</p>
|
||||
<p>Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h3>
|
||||
<ul>
|
||||
@@ -427,6 +427,7 @@
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="indicatorstyle"></a><a href="#indicatorstyle" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>indicatorStyle</code></h3>
|
||||
<p>The style of the scroll indicators.</p>
|
||||
<!-- alex disable retext-profanities -->
|
||||
<ul>
|
||||
<li><code>default</code> (the default), same as <code>black</code>.</li>
|
||||
<li><code>black</code>, scroll indicator is black. This style is good against a white content background.</li>
|
||||
@@ -440,6 +441,7 @@
|
||||
<tr><td>enum('default', 'black', 'white')</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- alex enable retext-profanities -->
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="maximumzoomscale"></a><a href="#maximumzoomscale" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>maximumZoomScale</code></h3>
|
||||
<p>The maximum allowed zoom scale. The default value is 1.0.</p>
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/scrollview.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">ScrollView</h1></header><article><div><span><p>Component that wraps platform ScrollView while providing integration with touch locking "responder" system.</p>
|
||||
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes easy to debug.</p>
|
||||
<p>Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer <code>{flex: 1}</code> down the view stack can lead to errors here, which the element inspector makes quick to debug.</p>
|
||||
<p>Doesn't yet support other contained responders from blocking this scroll view from becoming the responder.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h3>
|
||||
<ul>
|
||||
@@ -427,6 +427,7 @@
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="indicatorstyle"></a><a href="#indicatorstyle" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>indicatorStyle</code></h3>
|
||||
<p>The style of the scroll indicators.</p>
|
||||
<!-- alex disable retext-profanities -->
|
||||
<ul>
|
||||
<li><code>default</code> (the default), same as <code>black</code>.</li>
|
||||
<li><code>black</code>, scroll indicator is black. This style is good against a white content background.</li>
|
||||
@@ -440,6 +441,7 @@
|
||||
<tr><td>enum('default', 'black', 'white')</td><td>No</td><td>iOS</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- alex enable retext-profanities -->
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="maximumzoomscale"></a><a href="#maximumzoomscale" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>maximumZoomScale</code></h3>
|
||||
<p>The maximum allowed zoom scale. The default value is 1.0.</p>
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/textinput.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">TextInput</h1></header><article><div><span><p>A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.</p>
|
||||
<p>The simplest use case is to plop down a <code>TextInput</code> and subscribe to the <code>onChangeText</code> events to read the user input. There are also other events, such as <code>onSubmitEditing</code> and <code>onFocus</code> that can be subscribed to. A simple example:</p>
|
||||
<p>The most basic use case is to plop down a <code>TextInput</code> and subscribe to the <code>onChangeText</code> events to read the user input. There are also other events, such as <code>onSubmitEditing</code> and <code>onFocus</code> that can be subscribed to. An example:</p>
|
||||
<pre><code class="hljs"> <TextInput
|
||||
style={{<span class="hljs-built_in">height</span>: <span class="hljs-number">40</span>, borderColor: <span class="hljs-string">'gray'</span>, borderWidth: <span class="hljs-number">1</span>}}
|
||||
onChangeText={(<span class="hljs-built_in">text</span>) => <span class="hljs-keyword">this</span>.setState({<span class="hljs-built_in">text</span>})}
|
||||
@@ -179,7 +179,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="defaultvalue"></a><a href="#defaultvalue" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>defaultValue</code></h3>
|
||||
<p>Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you don't want to deal with listening to events and updating the value prop to keep the controlled state in sync.</p>
|
||||
<p>Provides an initial value that will change when the user starts typing. Useful for use-cases where you don't want to deal with listening to events and updating the value prop to keep the controlled state in sync.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -383,7 +383,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="value"></a><a href="#value" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>value</code></h3>
|
||||
<p>The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set <code>editable={false}</code>, or set/update <code>maxLength</code> to prevent unwanted edits without flicker.</p>
|
||||
<p>The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set <code>editable={false}</code>, or set/update <code>maxLength</code> to prevent unwanted edits without flicker.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/textinput.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">TextInput</h1></header><article><div><span><p>A foundational component for inputting text into the app via a keyboard. Props provide configurability for several features, such as auto-correction, auto-capitalization, placeholder text, and different keyboard types, such as a numeric keypad.</p>
|
||||
<p>The simplest use case is to plop down a <code>TextInput</code> and subscribe to the <code>onChangeText</code> events to read the user input. There are also other events, such as <code>onSubmitEditing</code> and <code>onFocus</code> that can be subscribed to. A simple example:</p>
|
||||
<p>The most basic use case is to plop down a <code>TextInput</code> and subscribe to the <code>onChangeText</code> events to read the user input. There are also other events, such as <code>onSubmitEditing</code> and <code>onFocus</code> that can be subscribed to. An example:</p>
|
||||
<pre><code class="hljs"> <TextInput
|
||||
style={{<span class="hljs-built_in">height</span>: <span class="hljs-number">40</span>, borderColor: <span class="hljs-string">'gray'</span>, borderWidth: <span class="hljs-number">1</span>}}
|
||||
onChangeText={(<span class="hljs-built_in">text</span>) => <span class="hljs-keyword">this</span>.setState({<span class="hljs-built_in">text</span>})}
|
||||
@@ -179,7 +179,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="defaultvalue"></a><a href="#defaultvalue" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>defaultValue</code></h3>
|
||||
<p>Provides an initial value that will change when the user starts typing. Useful for simple use-cases where you don't want to deal with listening to events and updating the value prop to keep the controlled state in sync.</p>
|
||||
<p>Provides an initial value that will change when the user starts typing. Useful for use-cases where you don't want to deal with listening to events and updating the value prop to keep the controlled state in sync.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
@@ -383,7 +383,7 @@
|
||||
</table>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="value"></a><a href="#value" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>value</code></h3>
|
||||
<p>The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to simply setting the same value, either set <code>editable={false}</code>, or set/update <code>maxLength</code> to prevent unwanted edits without flicker.</p>
|
||||
<p>The value to show for the text input. TextInput is a controlled component, which means the native value will be forced to match this value prop if provided. For most uses this works great, but in some cases this may cause flickering - one common cause is preventing edits by keeping value the same. In addition to setting the same value, either set <code>editable={false}</code>, or set/update <code>maxLength</code> to prevent unwanted edits without flicker.</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Type</th><th>Required</th></tr>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.24"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.24"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.24/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.24"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.24"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.24/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>AsyncStorage · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="AsyncStorage is a simple, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><meta name="docsearch:version" content="0.24"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="AsyncStorage · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="AsyncStorage is a simple, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>AsyncStorage · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="AsyncStorage is an asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><meta name="docsearch:version" content="0.24"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="AsyncStorage · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="AsyncStorage is an asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,9 +68,9 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/asyncstorage.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">AsyncStorage</h1></header><article><div><span><p>AsyncStorage is a simple, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/asyncstorage.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">AsyncStorage</h1></header><article><div><span><p>AsyncStorage is an asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.</p>
|
||||
<p>It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it operates globally.</p>
|
||||
<p>This JS code is a simple facade over the native iOS implementation to provide a clear JS API, real Error objects, and simple non-multi functions. Each method returns a <code>Promise</code> object.</p>
|
||||
<p>This JS code is a facade over the native iOS implementation to provide a clear JS API, real Error objects, and non-multi functions. Each method returns a <code>Promise</code> object.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.24/asyncstorage#getitem"><code>getItem</code></a></li>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>AsyncStorage · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="AsyncStorage is a simple, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><meta name="docsearch:version" content="0.24"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="AsyncStorage · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="AsyncStorage is a simple, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>AsyncStorage · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="AsyncStorage is an asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><meta name="docsearch:version" content="0.24"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="AsyncStorage · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="AsyncStorage is an asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,9 +68,9 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/asyncstorage.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">AsyncStorage</h1></header><article><div><span><p>AsyncStorage is a simple, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/asyncstorage.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">AsyncStorage</h1></header><article><div><span><p>AsyncStorage is an asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.</p>
|
||||
<p>It is recommended that you use an abstraction on top of AsyncStorage instead of AsyncStorage directly for anything more than light usage since it operates globally.</p>
|
||||
<p>This JS code is a simple facade over the native iOS implementation to provide a clear JS API, real Error objects, and simple non-multi functions. Each method returns a <code>Promise</code> object.</p>
|
||||
<p>This JS code is a facade over the native iOS implementation to provide a clear JS API, real Error objects, and non-multi functions. Each method returns a <code>Promise</code> object.</p>
|
||||
<h3><a class="anchor" aria-hidden="true" id="methods"></a><a href="#methods" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Methods</h3>
|
||||
<ul>
|
||||
<li><a href="/react-native/docs/0.24/asyncstorage#getitem"><code>getItem</code></a></li>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.25"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.25"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.25/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.25"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.25"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.25/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.26"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.26"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.26/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.26"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.26"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.26/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.27"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.27"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.27/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.27"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.27"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.27/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.28"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.28"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.28/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.28"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.28"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.28/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.29"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.29"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.29/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.29"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.29"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.29/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.30"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.30"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.30/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.30"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.30"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.30/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.31"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.31"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.31/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.31"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.31"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.31/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.32"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.32"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.32/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.32"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.32"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.32/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.33"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.33"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.33/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="docsearch:version" content="0.33"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid, powerful, and easy to build and maintain."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
||||
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Animated · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="docsearch:version" content="0.33"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Animated · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://facebook.github.io/react-native/"/><meta property="og:description" content="Animations are an important part of modern UX, and the `Animated` library is designed to make them fluid and powerful."/><meta name="twitter:card" content="summary"/><link rel="shortcut icon" href="/react-native/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://facebook.github.io/react-native/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://facebook.github.io/react-native/blog/feed.xml" title="React Native Blog RSS Feed"/><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)
|
||||
@@ -68,7 +68,7 @@
|
||||
};
|
||||
}
|
||||
});
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid, powerful, and easy to build and maintain.</p>
|
||||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/animated.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Animated</h1></header><article><div><span><p>Animations are an important part of modern UX, and the <code>Animated</code> library is designed to make them fluid and powerful.</p>
|
||||
<p>The simplest workflow 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 either via animations, such as <code>Animated.timing</code>, or by hooking into gestures like panning or scrolling via <code>Animated.event</code>. <code>Animated.Value</code> can also bind to props other than style, and can be interpolated as well. Here is a basic example of a container view that will fade in when it's mounted:</p>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">class</span> <span class="token class-name">FadeInView</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><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
@@ -86,7 +86,7 @@
|
||||
<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 comment">// Special animatable View</span>
|
||||
<span class="token operator"><</span>Animated<span class="token punctuation">.</span>View <span class="token comment">// Animatable View</span>
|
||||
style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
<span class="token punctuation">{</span><span class="token string">' '</span><span class="token punctuation">}</span>
|
||||
<span class="token comment">// Binds</span>
|
||||
@@ -96,12 +96,12 @@
|
||||
<span class="token punctuation">}</span>
|
||||
<span class="token punctuation">}</span>
|
||||
</code></pre>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. 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>
|
||||
<p>Note that only animatable components can be animated. <code>View</code>, <code>Text</code>, and <code>Image</code> are already provided, and you can create custom ones with <code>createAnimatedComponent</code>. These 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>
|
||||
<p>Animations are heavily configurable. Custom and pre-defined easing functions, delays, durations, decay factors, spring constants, and more can all be tweaked depending on the type of animation.</p>
|
||||
<p>A single <code>Animated.Value</code> can drive any number of properties, and each property can be run through an interpolation first. An interpolation maps input ranges to output ranges, typically using a linear interpolation but also supports easing functions. By default, it will extrapolate the curve beyond the ranges given, but you can also have it clamp the output value.</p>
|
||||
<p>For example, you may want to think about your <code>Animated.Value</code> as going from 0 to 1, but animate the position from 150px to 0px and the opacity from 0 to</p>
|
||||
<ol>
|
||||
<li>This can easily be done by modifying <code>style</code> in the example above like so:</li>
|
||||
<li>This can be done by modifying <code>style</code> in the example above like so:</li>
|
||||
</ol>
|
||||
<pre><code class="hljs css language-jsx"> style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||||
opacity<span class="token punctuation">:</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">.</span>fadeAnim<span class="token punctuation">,</span> <span class="token comment">// Binds directly</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||||
<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">></span>
|
||||
</code></pre>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together simply by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p>Animations can also be combined in complex ways using composition functions such as <code>sequence</code> and <code>parallel</code>, and can also be chained together by setting the <code>toValue</code> of one animation to be another <code>Animated.Value</code>.</p>
|
||||
<p><code>Animated.ValueXY</code> is handy for 2D animations, like panning, and there are other helpful additions like <code>setOffset</code> and <code>getLayout</code> to aid with typical interaction patterns, like drag-and-drop.</p>
|
||||
<p>You can see more example usage in <code>AnimationExample.js</code>, the Gratuitous Animation App, and <a href="/react-native/docs/0.33/animations">Animations documentation guide</a>.</p>
|
||||
<p>Note that <code>Animated</code> is designed to be fully serializable so that animations can be run in a high performance way, independent of the normal JavaScript event loop. This does influence the API, so keep that in mind when it seems a little trickier to do something compared to a fully synchronous system. Checkout <code>Animated.Value.addListener</code> as a way to work around some of these limitations, but use it sparingly since it might have performance implications in the future.</p>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -135,7 +135,7 @@
|
||||
<h3><a class="anchor" aria-hidden="true" id="elastic"></a><a href="#elastic" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>elastic()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token function">elastic</span><span class="token punctuation">(</span>bounciness<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>A simple elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>An elastic interaction, similar to a spring. Default bounciness is 1, which overshoots a little bit once. 0 bounciness doesn't overshoot at all, and bounciness of N > 1 will overshoot about N times.</p>
|
||||
<p>Wolfram Plots:</p>
|
||||
<p><a href="http://tiny.cc/elastic_b_1">http://tiny.cc/elastic_b_1</a> (default bounciness = 1) <a href="http://tiny.cc/elastic_b_3">http://tiny.cc/elastic_b_3</a> (bounciness = 3)</p>
|
||||
<hr>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">set</span><span class="token punctuation">(</span>dims<span class="token punctuation">)</span>
|
||||
</code></pre>
|
||||
<p>This should only be called from native code by sending the didUpdateDimensions event.</p>
|
||||
<p>@param {object} dims Simple string-keyed object of dimensions to set</p>
|
||||
<p>@param {object} dims string-keyed object of dimensions to set</p>
|
||||
<hr>
|
||||
<h3><a class="anchor" aria-hidden="true" id="get"></a><a href="#get" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>get()</code></h3>
|
||||
<pre><code class="hljs css language-jsx"><span class="token keyword">static</span> <span class="token keyword">get</span><span class="token punctuation">(</span>dim<span class="token punctuation">)</span>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user