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 :)
Really well explained. Thanks!
Great tutorial, thanx! :)