Hello and welcome back. Previously, you saw how to fade animations in and out like this. And in this video, we'll cover a few more animation basics, one after the other, which will lay the foundation for you to build other advanced things later on. So, I'll get rid of the fading bits in our app, and I'll show you the animation bits with Bart. First, right here, I'll get rid of this code and I have a reference to bartImage. So, I'm going to start with that. So, here we go, bartImage.animate. And I'll start with translation. Once I start typing in .translation, you see there is translationXBy, translationX, translationY, translationYBy. And for three-dimensional stuff, translationZ and ZBy. 

So, translation basically means move along the axis that's specified, so X or Y. And you get to specify how much to move by. So, if I use translationXBy, so let's use the first one right here, I can specify how much to move by over here. So, let's try 200f, okay? F for Float if you remember. So, we're expecting this to move Bart to the right along the X or horizontal axis, and we're going to set the duration, so .setDuration. We'll set it to two seconds, actually one second to make it a little bit quicker. All right, let's try it out. There's Bart, and if I tap on him, he moves to the right. Great. Working well.

Now, here are two challenges for you. Can you modify this and make Bart move out of the screen to the left, okay? We just made him move to the right over here. Make him move out of the screen to the left, that's part one. And then once you've managed to do that, make him move down below the screen and out of view. So, he starts off where he starts off and then moves down out of the screen. Go ahead, take a shot. Good luck. All right, hope you managed that. So, for the movement to the left, you can just turn this number into a negative, all right. And it has to be large enough that he actually moves out of the screen. So, I'll try minus, let's say -1,000. If I do that and apply, here we go. Here's the starting position. I'll tap on him, and there you go. He's out of the screen. And for the bottom, we can use translationYBy. And the same, I'll leave it as minus. Actually, I can't leave it as -1,000, I'll leave it as 1,000f.

Let's see what happens. Tap on him. There you go. Woah, he's not out of the screen yet. So, this has to be large enough that he moves out of the screen, so maybe 2,000 is a better option. And if you did minus, he would go up. All right. So, next we're going to try rotations. So, instead of translationYBy, I'm going to try rotation. So, if I start typing in rotation, notice you have all these options: rotationBy, rotationX, XBy, Y, and so on. I'm going to do simple rotation over here. And if you select 360, that's a full circle. So, if I did 360f, that would be a full circle. And if I did 180, which is half a circle, that means Bart would spin upside down. So, let's try this. There we go. 

Let's tap on the screen and there it is, Bart has turned upside down. Great. So, that's half a rotation. What if we wanted to rotate him in full but a few times? Well, we can add a zero to this to make it 1,800 degrees. That means you'd end up with five full rotations. Let's try it. If we did 3,600, that would be 10 full rotations, so 1,800 means five full rotations. I think the math on that is right, but I could be wrong. Let's try it. Okay, let's click on him. There you go, five full rotations. Great. Now you could also add multiple animations and chain them together. So, as we're performing the rotation over here, we could also fade him out. And as you know already, we can do that by setting the alpha. 

So, right here after rotation. I'm going to say alpha, and I'll set it to zero. So, as he's rotating, he's also going to fade out and disappear from the screen. Actually the zero, we'll have to put an f in there, all right. Let's apply and try it out. Okay, we're ready to go, tap. So, he spins and fades out at the same time. Excellent. And the final type I want to show you is scale. So, over here, instead of rotation, alpha, I'll get rid of this. And also said duration. So, as I start typing in scale, you see you have scaleX, scaleXBy, Y, and YBy. 

So, you can basically scale to a specific value or by a specific value, and we can do it in the X and Y directions as well. So, let's say we want to make Bart half size. We can do that by typing scaleX, and we'll say 0.5f. And then we'll change scaleY because X would only shrink him in width, scaleY 0.5f And we'll setDuration to one second. All right, let's apply. Okay, we're ready to go, tap. There we go. He shrunk in half. Great.

So, here's a quick challenge for you then. What I want you to do is to animate Bart into existence. So, we'll start off with a blank screen. So, the screen is going to be blank when the app opens up. And once the screen is tapped, you'll have Bart spinning into action from the left into his original size. You're not going to start off with half size or anything, he's simply out of the screen, and he spins into the screen. So, after the animation, he should be full screen on the app like he was before, okay? 

So, there's a little challenge for you there. Best of luck. Go for it. Okay, hope you managed that. Here's how I'll do it. Since we want him to move in from the left of the screen, the first thing we want to do is start him off somewhere out of range, off the screen to the left. And there are several ways to do this. What I'll do is simply set the X to be somewhere out in the left, all right? So, I have bartImage, and I'll get rid of all this. Actually, that's not what I want to do. I want to do it here because I want it to happen as the app starts up. So, right here, I'm going to set a reference for Bart. So, this one right here, var bartImage Command-C, Command-V. And then I'll set X, so bartImage.x. And I'll set it to -1,000f, all right. 

So, he's going to somewhere out of range to the left. And again, there are several ways to do this. You can do this over here in the code as well. In Bart's ImageView, you can set X over here, or you can do it the way we're doing it here in the onCreate function, okay. So, now he's going to start off out of the screen on the left. And once the screen is tapped, which means our fade method is called into action, we want to bring him in. So, bartImage.animate. We're not going to use scale. We're going to translationXBy 1,000f. And we also want to rotate him in, so rotation. And let's give him 10 full rotations, and we'll do it over the course of two seconds, so right here. Let's give it a shot. All right, so we're ready to go. You can see that Bart is nowhere to be seen, which means he is somewhere here, out of range of the screen. And if I tap on the screen, there you go, he spins into action.

However, that wasn't that many rotations. What happened? we only did one rotation. Let's try again for 10 rotations. So, looks slightly more interesting. Okay, ready to go. Tap on the screen, and there he is. Perfect. So, you can use these animations either to make your apps more exciting or to add actual fluidity and functionality to them, games in particular. And that's actually what we're going to be doing over the course of the next few videos, where we'll first prep for and then build our own version of the Tic Tac Toe game. Hope you're excited. I'll see you in the next video.