Ultimate Guide to Animations in Jetpack Compose

Hey everyone. Welcome back to my YouTube channel, Creating Animations in xml. Were not the easiest job, to be honest. Luckily for us, Jet Pack Compose has made it pretty easy to create some wonderful animations with just a couple of lines of code. If you're wondering that, how do we animate in Jet Pack, compose, stay until the end of this video where we will discover exactly that. 

Starting with the video here I have a basic project set up. This project has a column, a button that toggles the color of the box based on the state. That is, it turns the box to blue when it is red and to red when it is. So this is a 200 by 200 box that takes in a color from the color state.

Now I want that the color should toggle with some kind of animation. So what am I going to do is use animate color asState, which does exactly what it states. That is animate the color as a state function, Now, it would take into values. That is the target value. That means the value that is going to animate. And the second parameter is optional, that are the animation specifications. I have given it a. tween animation with a duration of thousand milliseconds. That means the animation would run for one second and have also given a time of 200 milliseconds.

That means the animation would start after 200 milliseconds of delay. Tween animation is nothing but a simple fade and fade out animation that is already provided to us by Jet Pack Compose.

Now that we have animated the color value, we need to use this animated state in the place of a regular state in the box. So let's do that as well.

  Now, if you build and run the app, you'll see that now the animation is working as expected.

 So you can see that the animation is happening as expected. It is having a simple fade in and fade out animation that is the Tween animation, and also having the 200 milliseconds delay and the animation is lasting exactly one seconds.

We can have multiple sorts of animations that are already provided to us by default. Like let's say we want to animate the size of the box for that, we have the animate DP as state function. Let's use that and see how's it looking.

 So now you can see that here I have used the size state, and for the animation I have used the DPS state, given the target value as the size state. And for the animation spec, I have used the spring animation this time also. When I click the button, now I am manipulating the size state as well, along with the color.

So on the click of the button along with the color change, I am also changing the size as well. And finally I have used this animated size parameter as the size of the box. So now let's run the app and see that. How's it looking?

So here we can see that now the animation is happening for both size and color.

 We can do a lot with these animation as state functions, which are provided right out of the box. As you can see, we have a lot of different functions, which are in our tool belt for doing all kinds of animations such as animate color as state, animate int state, animate dp as, state animate float as state, and much more. Play around with them and see what kind of animations can you do with them. To summarize, to add an animation, you need a state. That state would be the target value for the animation. Animate those states and use the animated states at the point where you'd like your animation. So now that we have animated values, let's head over and animate the visibility of the box as well. So to animate the visibility, we would need another state for the visibility of the box. Let's add that.

 So to do that, as you can see, I have created is visible state to toggle the visibility of the box. After that, I have also added a button to toggle the visibility state. And finally, to animate the visibility, we have animated visibility composable, which is provided to us by jet pack compose.

Now the stakes in a parameter visible, which is based on our state. Now, this composable will assign some animations automatically, which are provided by default to this box. So let's test ahead and see that. How's it looking?

So as you can see that now our box is being hidden and visible on the click of a button with some animations already in check.

What's cool about jet pack compos animations is that we have so much already provided right out of the box. So in the animated visibility method, we can also enter our own enter and exit animations if we do not want to use the default ones.

So let's add that as well.

  Here you can see that I have already added enter and exit animations to the box, which will now sign different type of animation to the visibility of the box. Now, not to mention that these animations slide in vertically and slide out vertically are already provided by jet pack, composed by default as well.

Now instead of slide out vertically, we can also use the slide out horizontally function, which is already provided to us by Jet Pack, composed by default as well. Now, if we do not want to use any of the already pre-made animations that are provided by Jet Pack composed, we always have the option to create our own animations from scratch as well.

Now, these are not the only functions that are provided by Jet Pack composed by default. There are a lot of different animation functions that are pre-built by Jet Pack composed. I highly recommend that you go and try each one of them out and see how different animations work altogether.

Now, as you can see that the visibility of the box is animating pretty well. Not only that, we can adjust the default behaviors of these functions. Like in our case, let's change the default behavior for our enter transition function. So in our case, we are already using the slide and vertically function right now. Let's change some of the properties of this function.

 So for the enter transition, we can adjust the default behavior to use our entire height of the item to animate it properly. By setting the initial offset y parameter, the initial offset y should be a lambda returning the initial position. So that is what we have done here.

So for our case, the animation will start from the entire height of the box plus thousand pixels from the top. The Lambda receives one argument, the height of the element to ensure that the item slides in from the top of the screen will turn its negative value since the top of the screen has the value zero.

We want the animation to start from minus height of the box to zero, which is the final resting position of the box. So that it starts from above and animate's in similarly, slide out vertically assumes the initial offset is zero, so only target offset y needs to be specified.

So, as you can see here, that I've used the target offset y and the target offset y would be the boxes height in negative direction, and also not that I have used slide out vertically instead of slide out horizontally.

If you were using the slide out horizontally function, then you could use the target offset x.

Now in our case, since we are using the slide out horizontally function, so to target offset Y would become target offset X. Since the animation is working in the horizontal direction, that's why we are setting the target offset in the X direction and instead of height, we are using the width. One thing note here that I feel is very important to know is that  these animations are interruptable.  What does that mean? Well, if we go ahead and rapidly click the button of the change color,

We'll see that only the size was changing rapidly, but not the color. And the color changed only when the animation stopped.  Similar is the case with Toggle. If we rapidly click on the toggle visibility. You'll see that the animation is not happening properly. Instead, it is just sliding back and forth in the horizontal direction.

 Now in the toggle visibility case, this is happening because we have specified that the exit transition will happen until the full width of the box. But  if we interrupt the animation before it's completion, it would just cancel the animation and bring it back to the original position.

 The same happens when we rapidly click the color button. There also, since we are clicking the button rapidly, you would find that all the clicks would be interrupted and the function would intercept only the last click.

Anyhow. Moving on from that until now, we are animating the changes separately. Now let's take a look at how can we animate the multiple values at the same time. To do that, we have the Transitions API that allows us to create more complex animations. The Google documentation for the transition API is pretty awesome, and the example I'm about to show you has been taken from the Google Docs directly.

 So we saw that on rapidly clicking on the change color button or on the toggle visibility button, the animations were not happening perfectly. They were getting interrupted. So to make them happen in one go, we have the Transitions api. The Transition API allows us to define different transition specs when transitioning between different states.

Let's take a look at how we can use it.

 So what we did here was that first we added a state enum class that will tell us whether the box was collapsed or expanded.  Next thing we added, a state that will allow the box to change the state from collapsed to expand it, and vice versa.  After that, we added a transition API that takes in the state of the box, and this transition function will now apply all the animations to it.

  Once that is done, we add size and color animations to the box, animate, DP, and animate color, which behaves the same way as animate as state functions, just with a difference that now all of them are tied together into one single animation.  With the transition API in the animate DP function, I am telling the transition API that when the state of the box is expanded, ae the size of it to 200 dp. Whereas if it is collapsed, make it a hundred. Similarly, in the color, I am animating the colors as well based on the state of the box. So now transition API will take care of all the animations and will apply them together in one single go.

Next up, let's use those animations over our box.

 Here I have created a surface that responds to our click. This means that when we click the surface, the state of the box will change, and the transition API will apply those animations to the box. Also noticed that I am, I am changing the state on the button click.

So when the state is collapsed, I'm changing the state to expand it and vice versa. On the click of the button. So let's go ahead and try the app. Now, if I click the button rapidly, also, then also all the animations will be working just as fine. So as you can see here, that all the animations are working just as expected, even on the rapidly clicking of the button. And also, this time you can notice that all animations are working in sync. So the color change and the size change are working together.

Now. Apart from this, we can also animate the visibility of the constant using this API as well.

 So in here you can see that I have animated the visibility of the text. The visible function of the animated visibility is a lambda function that will provide you the target and would need a boolean in return. That means in our case, it provides us a target that is the state of the box and needs either true or false in return.

So we have made the content that is the text to not to be visible when the boxes collapsed. So now if we go ahead and run that, you'll see that the text is visible only when the box is expanded and when the box is collapsed, the text would not be visible.

This behaves as expected. Amazing thing about the Transition API is that it provides a lot of customization options to us right now the animations are not controlled by us. Rather they are controlled by the transition api. I want to control them for that. This API provides the transition specifications for us to use, so let's use them for size.

 So what I have done here is that I have specified a transition specification that when the state is transitioning to expand it from collapsed, I want a spring animation with low stiffness, whereas if it is going otherwise, I want the spring animation with high stiffness.  So if you go ahead and run the app, you'll see that currently the box is collapsed, but when I go ahead and expand the box, the expansion process is slow as compared to the collapsing process. So the box is expanding slowly but collapsing quickly. So this is how we can control the transition specifications of any particular animation.

Similarly, let's supply transition specification to the color.

 Here as well. You'll see that I am applying a tween animation with different time durations based on the transitions. If I go ahead and build the app now.

 You'll see that the color changing to blue is pretty slow as compared to red.

 So now we'll be able to see that the animations are completely controlled by us. We can add as many transitions as we like. So we might be getting the importance of this transition API and how it can help us to create some really complex animations with just a few lines of code.

 And the amount of controllability it provides is also top notch

 Hey guys, just a quick pause here. Just want to tell you that if you're interested in learning about the advanced concepts of Jet Pack composed such as creating our own animations, gestures, views, and layouts, then do check out my course.

The link will be in the description box down below. Now, back to the video. .

 now one final thing that I'd like to cover in this video would be repeating animations.

 So here, as you can see, that I'm having a very basic setup of the app, which is just simply showing the text and then hiding it, showing it, and hiding it. That's all it is doing at this point of time. Now that we have a basic project set up, which is just a simple setup with a text and a button. Now we want to show a loading animation. So until the loading state is true, we would like to show a box. And when it is false, we would like to show a text. So let's make a repeatable animation.

 Here we create an infinite transition and then set up a color value by telling the infinite transition to animate the color. Infinite transition holds one or more style animation like transition, but the animation starts running as soon as they enter the composition and do not stop unless they they're removed.

 You can create an instance of the infinite transition with, remember, infinite transition, child animations can be added with animated color, animated float, or animated value. Now let's give this color property to the box and let's test the app.

 So here can see that I have given the color property to the box. Now let's test that.

In here, we'll see that when we click the refresh button, the box animation appears, and when we stop that, the animation disappears now there's one more way to specify an animation specification that I want to talk about that are key frames.

 We can  specify the key frames and tell what happens at a particular point. So in our case, we specify the key frame animation that runs for one second and at 500 milliseconds, the color turns to red and then it goes to gray.  So let's first run the app.

Now if I click the refresh button, you'll see that the color is changing to red, to light gray and dark gray.  In our case, we have specified a key frame animation that runs for one second and at 500 milliseconds, the color turns to red and then it goes to gray. That means the animation is going from the light gray color to the gray color.

 The animation will last for one second, but at 500 milliseconds, the animation would turn the color into red,  so the animation would go from light gray at 0th second, red at 500 milliseconds, and then finally to dark gray at one. The repeat mode would then repeat the transition to go in backward direction for one second, and this would continue to happen until we manually stop the transition.

 So let's keep the video. Until this point, I hope that you learn something of value in this video. Thank you for watching the video and for your time, we'll meet in another video. Until then, keep contributing Court to Humanity.