From 8e2d4cc680ddc5f587e61c537a87b0bc1ad4f563 Mon Sep 17 00:00:00 2001 From: Liam Doran Date: Sat, 15 Oct 2016 17:38:34 -0700 Subject: [PATCH] Added documentation on string interpolation to Animations doc Summary: **Motivation** I saw that [Clearer documentation on how to animate string properties](https://github.com/facebook/react-native/issues/2276) had the Good First Task label so I thought I'd take a crack at it. My only change is to the Animations doc, where I added a few sentences and an example based on JedWatson's comment in the issue. **Test plan (required)** I wrote a small example app that contains the code snippet from the docs and ran it in the ios simulator and on a Nexus 5X. You can see it [here](https://github.com/liamfd/react_native_examples/tree/master/TestStringInterpolation). I also looked at the docs and the formatting seemed fine: screen shot 2016-10-14 at 10 43 21 am I got the "colors as well as values with units" part from a comment [in the source](https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Interpolation.js#L178). The c Closes https://github.com/facebook/react-native/pull/10392 Differential Revision: D4027445 fbshipit-source-id: 03fabb3cd6139b11b0f17b19c90b602160ed7f55 --- docs/Animations.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/docs/Animations.md b/docs/Animations.md index 76b44e27ae8..a738dd3cc62 100644 --- a/docs/Animations.md +++ b/docs/Animations.md @@ -165,6 +165,15 @@ Input | Output 101| 0 200| 0 +`interpolate` also supports mapping to strings, allowing you to animate colors as well as values with units. For example, if you wanted to animate a rotation you could do: + +```javascript +value.interpolate({ + inputRange: [0, 360], + outputRange: ['0deg', '360deg'] +}) +``` + `interpolation` also supports arbitrary easing functions, many of which are already implemented in the [`Easing`](https://github.com/facebook/react-native/blob/master/Libraries/Animation/Animated/Easing.js)