The Animation Module in React Native

In the last section, we spoke a little bit about the layout animation system and the animated system within React Native. Remember, these are two different ways of getting animation inside of your React Native app. The layout animation system module is used for very simple, very straightforward animations, whereas the animated module is used for custom or very fancy, very dramatic animations that we might want to put together. We're going to be talking in this section a lot more about the animated module and some of the code that sits inside of it. So the animated module contains many different functions, objects and components that we can use to set up animations. So there's a lot of code, a lot of properties that sit inside of this module. And the vast majority of the difficulty that I think exists around using this animated module is just understanding all of those different functions and modules and components and how they all work together to make an animation inside of your app. So inside this section we're going to explore the animated module a little bit. So I want to tell you a little bit more about the different properties, components, objects, all that stuff that sits inside the animated module to give you kind of a frame of reference of where we use each of those components and functions and blah blah, blah. I want to first start off by talking a little bit about a very simple animation. So we're going to talk about this animation right here on the screen, and then we're going to talk about how some of the different parts of code inside of the animated module are going to help us to put this animation together. So let's talk about the animation a little bit. The animation is just as straightforward as it probably looks. I want to start off with a ball at the top of the screen at zero seconds, so the ball starts at the top of the screen and then over the span of one second, the ball should move in a very smooth, very linear fashion down to the bottom of the screen, like so. So you can kind of imagine that if I played the animation for you right now, it would look something like this. So like one second, something like that. But it would be nice and smooth and it would be over the span of exactly one second. Okay. So whenever we look at any animation whatsoever, I want you to start thinking about three different questions. And these three different questions are going to help you understand all the different parts of code and tools that you have inside of that animated module. Okay. So these three questions are really important to be able to answer. So here's the three questions. First, where is the item on the screen at any given point in time? So I would expect to be able to able to ask you like or ask your application at time equals zero seconds. Where is the ball on the screen? If I asked you that question, hopefully you would say to me, Oh, well, Steven, the ball should be at the very top of the screen. Okay, fantastic. And then if I came back to you again and I said, Where's the ball at one second you should be able to tell me, Oh, Steven, the ball is going to be down at the bottom of the screen. And then in theory, if I also asked you, Hey, where would the ball be at one half second? So like 0.5 seconds, you should be able to tell me, oh, it's at the middle of the screen. Okay. So what I'm trying to convey here is that the first question we need to be able to ask or answer excuse me about any different animation that we put together is where our element should be on the screen at any given time. The second question that we need to be able to answer about every animation we put together is where is the element moving to? So obviously it starts up at the top, but where is the end goal or where are we trying to move this element to? And of course, we don't only have to talk about moving elements around as well. We could talk about elements changing in size or color essentially. Number two here is what is the end goal of this animation? What should the element look like? Where should it be on the screen? What color should it be? That's what I want to know about question number two here. So what are we trying to accomplish with this animation? Finally, third question and this one might seem like it's really obvious, but it is really important to be able to answer which element are we attempting to move around on the screen. So in the context of this animation, we're trying to move the ball around. Yeah, that's pretty straightforward. I want to move the ball around. Okay, so these are the three important questions that you need to ask about every animation that you put together. And I think that, you know, in your head you can probably start to imagine, think about any given application that you might work with or any animation you could possibly think of. You can probably apply these three questions to any animation you can imagine. So again, maybe we're changing the color of some element or we're changing its position on the screen or we're changing its size. Which element are we trying to change? How are we changing it? What is the final state that it should be? Those are the three questions we want to be able to ask. Okay. So now that we understand these three questions, we're going to talk about how the animated module or the different parts of code inside that module are going to help us answer these questions as we put an animation together. So all I want to do right now from this diagram that you're looking at, the one that I just pulled up, I just want you to understand these different properties or these different objects that sit on the animated module because we're going to make great use of them in the future as we start to work on our individual applications. So question number one, what is the current position of the element that we're animating? So that's the first question that we need to ask. Where is the item on the screen Right now? The animated module contains a values object. This values object helps us describe what the current position or what the current state of an element should be on the screen. This values object contains two smaller properties on it that are called value and value XY. So these are JavaScript objects that we are going to use and they're going to help us describe what the current position of an element should be on the screen or what the current color of it should be or what the current size of it should be. That is the purpose of this values module. The second question is how is the animation changing? This question gets answered by the types module inside of the animated system. The types module has the functions or excuse me, JavaScript objects, spring and timing. These three objects right here are going to be used to answer the question How is the animation changing over time? Like how are we changing the color or the position of it over time? Finally, what element are we attempting to apply this animation to? So that's the purpose of the components module inside of the animated module. And inside of there we've got these three components of view, text and image. So we use these three components right here to somehow specify what element we're trying to animate or change over time. So the last thing I want to say here, just to be 100% really clear about all these different things I'm clicking on and all these values value x, Y. Just to give you a very practical example of what's going on or what I am trying to convey here about the animated module, at the end of the day, when we start to put together some of our animations, we're eventually going to end up let me get up a JavaScript file here really quick. There we go. So we're going to eventually start importing the animated module from React Native like so. And you don't need to copy down this code. I just mean to give this to you as an example. So on the animated module that we are importing from React Native, there are the properties animated dot values, animated dot types and dot components. And then on each of these objects, there are additional properties that we can access. So like animated or spring for types and view. So this is a JavaScript object right here that's going to help us answer the question of where an element should be on the screen. This is a JavaScript object that's going to help us answer the question of how the element is changing its position or color or whatever we're trying to animate. And then this is a component that is going to help us answer the question of what element we're actually trying to animate on the screen. Okay. So so I want to make sure it's really clear what these things I'm talking about. These are all JavaScript objects that we're going to be working with to pull off these animations. Okay. So in this section, I know this is probably getting pretty deep pretty quickly, but as soon as we start writing some code, it's all going to come together really nicely. But getting this kind of introduction I think is going to be very helpful when we start talking about the code. So again, we spoke about in this section the three different questions that we want to ask about every animation that we put together. And then we spoke just a little, little bit about some of the different tools inside of the animated module that we're going to use to describe how our element is changing on the screen. So let's take a quick break and then we're going to come back and we're going to start working on our first animation to get a better sense of all these different components and objects that are sitting inside the animated module. We're going to figure out exactly how they work. So let's take a quick break and start writing some code in the next section.