Interpolation with React Native Animations

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments

Really well explained. Thanks!

👍︎︎ 2 👤︎︎ u/ltnj 📅︎︎ Jan 29 2021 đź—«︎ replies

Great tutorial, thanx! :)

👍︎︎ 2 👤︎︎ u/ivbrajkovic 📅︎︎ Jan 30 2021 đź—«︎ replies
Captions
When baking cookies, you go from one solid little square to a soft medium piece. Not just one aspect of it changed over time, but a few including its color. In React Native, it is important to know how one animation can be mapped to many others at the same time. In today’s episode of How To Animated, let’s learn about interpolation. Before looking at how interpolation works in React Native, we need to learn what it is. Let’s start with an example. Here's the situation. We have a function that all we know about is the following: f(0) equals 0 and f(10) equals 20. At this point, can you guess what f(5) might equal to? Well, from what we see, we could suggest 10, because 5 is between 0 and 10, so the result should be between 0 and 20. This intuitive process we did is what interpolation does, but let me give you a better definition: given examples, "interpolation provides a means of estimating a function at intermediate points". If you look back at what we had before, without knowing what the function is, just by looking at the two examples, we  could guess what any value ranging between 0   and 10 would be equal to when passed to that function. In React Native, this concept also applies to other realms such as colors. Here, we see that the resulting color goes from white to black. Following our intuition, we might think of gray because that's why we get between these two values. Going with x equals 7, we get a dark gray and so on. So you could say we interpolated numbers to colors here. Another trivial example,  the last one I promise, will be with degrees. Here if x equals 0 we get 0 degrees and if it equals 10 we get 360 degrees. So again, if we pick x equals 5, the result will be between 0 and 360, so 180 degrees. Now, before we move to the next section, I want to highlight that x could be anything else than 0, 5 and 10. We could be looking at x ranging from 10 to 0 or 5 to 1 million and the function results could also be going from let's say 0 to -360. Whichever values you take as examples, with interpolation you can figure out what are the intermediate values for that same function, without explicitly saying what the function is. Now that you understand interpolation, let's see how this can be useful in React Native. We'll take a regular square with a simple  animation that moves it 100 pixels to the right. What we want, while this animation is playing, is to also change the opacity and even rotate the square. The problem is that I can't set the opacity to translation, because opacity goes from 0 to 1, not from 0 to 100. Instead, we could use interpolation to our advantage here When translation's value changes from 0 to 100, we want to interpolate this value from 0 to 1. If you keep the logic we had before, then if x equals 50 f(50) would be 0.5. This is exactly what we need to animate the opacity while the square is being moved to the right. To interpolate our translation, we can use .interpolate on any animated value. Interpolating needs two things: the x-s, the input range and the f(x)-s, the output range. Let's write this down. This means that opacity will equal 0.5 when the translation is 50 and 1 when it is 100. What is great with this helper function is that you can add even more examples to change the interpolation behavior. For example, let's say we want the opacity to start at 0, then 1 at 50 pixels and finally 0 again when it reaches a 100. To do so, we need to add another x, 50, and change our outputs. You could also add more inputs to change the interpolation behavior, it's all up to you! Great, now that it worked with numbers, let's add a rotation that uses degrees instead. Following the same logic, we'll keep the initial input range that goes from 0 to 100. But the output range here will be different since we want the rotation to be 0 degrees at 0 and 360 degrees when it reaches 100. I know it feels odd to be doing this using strings here, but trust me it works as well as with numbers. Another interesting example is to interpolate  colors. Now, this one is a bit tricky for one   reason which is: Animated cannot animate some style properties with native driven animations. This means that if you animate a background color  property using the native driver, you should get   an error saying that some properties cannot be animated this way. Since background color won't be animated using the native driver let's keep this in mind when writing the code. In this case, all you need is to set useNativeDriver to false, which might slow down your animations on low-end devices. As we did with the rotation we can animate the square color from orange to blue. All right now before going into the recap, you need to know about one last thing. Let's say I don't want to change the opacity when the animation starts, but only when translation reaches 25 pixels. The problem now is that this input range doesn't cover the whole range of values transition can take, which is from 0 to 100. If you run the following, you might see weird results since React Native by default, will try to extend your range and guess   what could be the value when the translation is between 0 and 25. This is what extrapolation is: "what should happen outside of the ranges, and what kind of pattern the outside values should follow". To fix this default behavior, we can cover the whole range again by adding another 0 before 25 when translation equals 0. This works great but let's change the rules one last time Imagine that we have no idea of what the boundaries are. Forget about this 0 to 100 range and think of a situation where this could go down to -500. Of course, your code would still need to start turning the opacity up, only after reaching 25 pixels. In this case, the solution will be to clamp your ranges which mean "whatever comes before that range, we'll keep the last given value". So if we clamp our extrapolation on the left side, this means that any value for translation below 25, will stay at 0. Likewise, if we clamp on the right side, any value that goes beyond 100 will also equal 0. Code-wise, it's pretty straightforward. As a side note, the default mode for extrapolation is extend which again, is React Native guessing what the other values might be. You can override this behavior with both extrapolateLeft and extrapolateRight according to your situation. A shorthand when you want to clamp or extend on both sides is only to use the extrapolate property. Pretty simple, isn't it? Okay now that you know about interpolation and  extrapolation, let's wrap this up. If there are three things to remember today, here they are. First, interpolation is a way. of estimating a function at intermediate points, learning from the ranges you provide. In React Native, you can interpolate animated values using interpolate which takes an input range, that interpolates and maps the values to an output range. Great thing is that you can interpolate not only to numbers, but also to colors and degrees. For extrapolation, you can extend or clamp the output range either on the left, right or both sides. Alright, that's it for now. In the next episode, we will look at animated events with scrollviews using what we've learned today. Rremember to subscribe if you don't want to miss it. Thanks for watching, and see you next time :)
Info
Channel: evening kid
Views: 4,606
Rating: 5 out of 5
Keywords: react native, animated, react, tutorial, animation, learn animations react native, animation types, interpolation
Id: ybcL8e6ImSo
Channel Id: undefined
Length: 8min 38sec (518 seconds)
Published: Fri Jan 29 2021
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.