Full Guide to Jetpack Compose Animations - Android Studio Tutorial

hey guys um welcome back to a new video in this video I will show you how you can use animations in Jetpack compose so you can take this as a full animation guide if you take a look at the end of documentation you will be bombarded with this chart which um yeah some beginners might think whoa that's a lot about animations in Jetpack compose and yes there are a lot of different animations um but I want to make this easier for you with this video to show you what you really need in practice all the time and how you can use that to animate something in your compose UI I will say right away um I will focus on the more high level animation apis here so that means it's pretty much this part here without this animation animatable and animation state if you want to also see how you can make super customized animations which in my experience you don't need that often but if you need it it's good to know that then I will make that a separate video so just let me know that down in the comments and then I'll also make a video about things like animation animatable and animation state so let's actually jump into Runner studio and see what we got here we got an empty uh Japan compose UI and I will simply start to create a Sim simple layout let's just make this a column and we're just going to put in a button with which we can toggle some state to trigger our animations later on and by the way you will also find Jump marks down below to see the different types of Animation so if you're only interested in one type then you can easily move forward to that let's add a modifier to this column here to yeah make it fill the whole size of our screen and then we're going to add a simple button when we click that we want to toggle some state and the text of the button will be I don't know just toggle or so and we will actually start with this animated visibility because that is really the easiest um the easiest type of these of this animation API animated visibility is used if you well need to animate usability of a composable so if there is a composable in your compose UI that is sometimes shown and sometimes hidden and then you can use animated visibility to easily animate the change when it becomes visible and when it becomes invisible how can we do this we could create a simple State here is visible for example by remember and we make the immutable state of false initially so we can import get value and yeah that's it and then here when we click on our button we simply toggle this state like this and now let's create a little composable that we want to animate the visibility of so down here below our button we can say animate it visibility and you can see this has this condition visible and here we simply apply the compose state that determines whether our composable that we want to animate should be visible or not so in our case that's just simply is visible so in the end you just need to return a Boolean oops a Boolean here that's true when it should be visible and false if not so this this animated visibility composible is in the end just a wrapper around whatever you would normally put in an if statement so we could also say if is visible and then simply show our composable here or we simply put in our composable in here to have it with an animation so for example box with a modifier of um let's say background color.red so we just have a red box we can add a little modify here for the animated visibility to make it fill the rest of the space so first of all the hole will with and then we give it a weight of one F so it just occupies the remaining space of our column and now we effectively already created an animation based on visibility so if we launch this here on my emulator and we then click on this toggle button and then we will see oh we actually have an animation and we can easily toggle this so how can we actually customize this you can see it actually expands in height and it also Fades a little bit but we can of course also change that for example if we wanted to slide in from the left or so then we can apply another parameter here to animated visibility and we can specify on the one hand and enter transition or an exit transition so enter is obviously the transition when it becomes visible and exit when it becomes invisible and here we can simply yeah the describe this animation in simple words that's what I really like about compose so we can really say okay to enter the screen we wanted to slide in horizontally for example like this and then we can say oh we also want it to fade in so we can say plus fade in and it seems you actually don't need this Lambda block so we can just take this and paste it directly like this yes and if we now re-launch this now we only change the enter transition then now it slides in from the left and then it becomes invisible like it did before because we didn't change the exit transition but that's how we can actually also change the type of Animation here with your animated visibility cool so what is next what if we actually want to animate some kind of specific value of a composable that's not simply whether that's visible or not so for example if we want to animate the color of a composable or we want to animate the size well we want to animate the rotation or something like that then we obviously can't use animated visibility because that has nothing to do with visibility so we simply comment this out and let's say we now create a state that represents the current animation value of whatever we want to animate so whenever the state will be updated which will be um yeah for every frame when we run this animation then it will also update all the composables where we use it at which in the end will then be an animation so for example if we have another state here and let's call it a is around which will also be a Boolean and we now want to animate the Border radius of a box so we have a square and then after we click the button we want to animate it to a circle and back so what we can do for that is we can now say first of all we also toggle this here when we click our button and then we can say okay we actually now create our border radius State and we can say by animate int as state so there are a ton of these animate as state functions which are another part of this animation API encompose so depending on which value you want to animate you of course choose the right function here so if you want to animate a rectangle and integer size a DP or a color in our case that's an integer because we want to animate the percentage value from 0 to 100 so that our border radius will also be animated from um yeah no border radius at all which would be zero and 100 would be obviously a complete circle so we can say by animate intest State and here we need to specify a Target value this target value whenever this changes this function will animate the current value of our border radius to the new Target value so if we say if oops is round then we want this state to animate to 100 since that would be a full circle and else to zero because that would just be yeah the Border radius of a rectangle of a square and I assume we also need to import something here no it actually needs to be a vowel and that is the issue and now this baller radius is effectively an integer which comes from a state so whenever this changes then it will also recompose wherever we use it and that will then cause the animation so if we now create a little box here with a modifier let's say we have a modifier size um let's give it a 200 DP import DP import size and then we say okay we clip this we clip this to a rounded Corner shape and here you can see we have this percent overload we can simply yeah enter our percentage value as an integer and that's simply our border radius and then we give it a background color so we actually see something color.red and that now also works as animation so since when is around changes so first of all is round is false so this border reuse state will start at zero since it's false if we then toggle it to True after clicking the button this if condition will apply so we change this to 100 but we don't directly change it to 100 because we use animate intestate so it will smoothly animate this value from 0 to 100 and then whenever this border radio State changes it will obviously recompose our box so since this changes here and then yeah apply the corresponding boileries so if we launch this take a look here here we have our squared box and if we click toggle then we will animate it to a circle Oracle it's of course very quick so how can we change this um the how quick it is we can actually apply a perimeter here and that is this animation spec so animation specs are another concept of compose animations you will often face there are different types of Animation specs there are some very common ones that is on the one hand tween which just um yeah that's the most basic one here you can define a duration so how long that takes a delay so if you wanted to start after a second only and some easing functions so how fast the animation will play at which time so let's try around with that a little bit we have duration Millis that would be for example three seconds let's say delay millise is 500 milliseconds empty easing here we can just hear as I said define at which time the animation plays how fast so I'm not sure we could also say something like linear easing so that at every time it plays exactly as fast as before I will just leave that this as it is relaunch this and take a look here if we now click toggle it will be slower as you can see and there are of course other types of Animation specs as well for example what you also sometimes like to use is spring to have a little bumpy animation here we don't have these values let's see what we have we have a damping ratio we have stiffness and both these values are actually just used to determine how bouncy this animation is I will just leave it as it is to see it to show you what this spring actually does so we now click toggle then okay now we actually don't see this let's add some some bounciness here by changing the damping ratio to Spring dot high bouncy and we could change the stiffness to Spring that stiffness very low for example and that should now look a little bit different um it crashed let's see why so I'm not sure why but it says the percent should be in the range of 0 and 100 which it is that's a bit weird uh maybe we better choose 99 I don't know if it's normally with float I could imagine that this happens that it's not exactly one but with integers it shouldn't happen not sure why let's try this again oh and I'm actually dumb of course because we use the um spring animation spec it will also yeah it will change the value beyond what we specify here since it's a spring that of course makes sense so if we let's choose something like 20 maybe then it makes more sense yeah now you can see there is a little bit of bounciness in there and of course if we do if you animate it back to zero then it will crash again because it will then also kind of set the value to something like minus 10 or so and that does not make any sense as a percentage value for the Border radius but if we say okay we have 40 and 20 try that again the bottle radius is actually a bad example for this but you see what this does so it's a lot more bouncy which is a bit of fun so are there any other animation specs yes there is a rather low level one which is key frames so we can say keyframes and here we can really specify specific keyframes so um from this time to this time um play it that fast from this time to this time play it that fast um so this is rather low level and if you want that I will cover that in a separate video but usually you're fine with tween so that is what I use the most often so we can say iteration middle east and set it to something to play our animation so that's it for animate as state but there is also a comparable API that is yeah very similar to animate as state which is called updated transition and that is used if you have a single state or like an animation that is dependent on a single state for example on is round and you want to animate multiple values based on that so in that case we can use update transition we can get this transition value by saying remember oh actually no just update transition and it's very similar so here we also need to specify a Target state which is just is round here so here we don't have this if statement this will come afterwards and we also should assign a label here and we'll set it to null so we get rid of the warning and now we can use this transition value which is dependent on our is round state to now animate multiple values based on that so instead of Border radius by animate into a state we could now say by transition a DOT animate int and actually let's get rid of that this will now take a transition to a spec which we could also change so that is again to change how fast this animation plays you could say tween and that plays two seconds it again wants us to pass a label here and the most important part most important part here is ah we actually need to assign a non another label for example or border radius radius like this and this target value by state is the interesting function here because here we get access to our is round value whether that's true or false and here we now just put in what we would have put in in this target state of this animate intest date before so we can say if is round we say 100 and else zero but since we now have this transition value we can also use that to animate multiple values based on that so down here we could say we also animate the color based on our is round value so we could say color by transition animate color here we can say the transition spec is for example a twin but this time just one second we give it a label of color and let's assign a Target value by state again and get rid of this block here we again get a reference to our is round value now we could say okay if our box is actually round we want it to be green and else we say it's red and then it will just simply animate between green and red when our is around value changes with this corresponding time so if we now go down to our box and we change this background color to our color state relaunch the app take a look here click toggle then you can see it now animates both values so we have a green circle and a red square and something important here is that you can of course also specify an animation like that with multiple values in another way so all these animation apis are just recommendations for specific scenarios so here for this update transition the Android documentation says Hey use this if you want to animate multiple values based on the single state which we do here but you could also represent the exact same animation by simply having two animate intestate and yeah just an animate color as state without this transition so that would also work what I just want to say here is if you take a look at this Android documentation you're like whoa so many different animation apis but in the end you can achieve the same type of behavior with a lot of them without being super wrong and I want to just show you how you can actually use these for example of the transition animate in the estate and stuff like that and all these and this animation apis that you've seen these ones and then depending on your situation just use what you feel comfortable with but in the end you can use most of these to achieve what you want cool so I will actually comment this out again since we don't need this anymore now let's come to the next type of Animation which are infinite animations so if you infinitely want to animate a value for example always animate the color of our box always animate the rotation to make it always rotating then you can use something called an infinite repeatable so we can say Val repeatable is remember infinite transition and what's actually called this transition again and then with this value you can create this infinite transition so for example a vowel color by transition dot animate color you can also animate a float or any other value with a float you can by the way pretty much create all types of animations since you can always just animate this between zero and 100 so for example if you were to animate a whole rotation of a circle you could animate a float between 0 and 1 and then multiply this value with 360 degrees and then you also are able to animate a degree value so even though you don't have an animate int function here to directly animate these degrees you can always use a float to achieve that behavior just as a little side tip or side advice we want to animate a color here the initial value will be let's say color red target value will be be color green again and now the animation spec will be our transition I'll actually not transition it will be an infinite repeatable and that is yeah some kind of custom animation spec that I didn't mention before and it will just execute here infinitely so we can say the animation is a duration based animation spec so here we could pass a tween again let's say like a whole transition from red to Green will last two seconds and we could say we have a repeat mode whether yeah basically what happened when this animation finished once so when our color animated from red to Green what happens then does it start at Red again or does it animate back from green to red that is what we can Define here so we can say repeat mode reverse so it would yeah animate back or restart then it would yeah just start at Red again restarting doesn't make sense for colors because then we have this jump to red again so we say reverse so it's always a smooth animation then we can go to our box get rid of the clip here don't need this anymore and just pass our color here from our infinite animation state if we Now launch this take a look and then you can see now it always animates the color without us needing to do anything so if you need an infinite transition or infinite animation then there's really no way around this don't try to make any other hacky animations with while Loops or so with the other apis this should really be used for that too so you have an infinite repeatable and then you're good but I think it's pretty easy to use to um yeah to actually create this infinite animation now I want to come to the last type of animation for this video at least and that is animated content and that requires a little bit of more code but in the end that's used if you want to swap out content so it's comparable to animated visibility what we had in the beginning while animated visibility is just used to toggle one piece of content so one composable to just make it invisible invisible animated content on the other hand is used if you have two pieces of content and you want to make one invisible and the other one visible instead that is when we use animated animated content so let's go down here and I will also get rid of this let's actually get rid of this whole thing and comment this out and the very bottom below animated visibility we can say animated content here we first of all need to also specify a Target state which let's say is visible again let's assign a modifier to make it fill our whole screen so fill Max width and assigning a weight of one F again then we need a transition spec we could also pass some Quantum alignment which we don't need here since we fill the whole screen anyways and then some content that we actually want to have here and swap out let's actually start with that because that might be a bit more I'm easy to understand so here we actually get a reference to our is visible value and then we can check okay if is visible no not that one is visible we want to show this composable so we can say we have a box with a modifier background color green and if it's not visible we just have a different type of composable which can also be a box just with a different background color for example like this so here we again just um toggle the content of our animated content and of course that doesn't only work with um with two pieces of composables you could also have some kind of seed class or sealed interface here and then you have a big one expression where you check for different branches and they can have as many branches as you like to yeah if you need to swap five different pieces of content for example for an onboarding screen or so where you just have five different screens to onboard the user and you want to animate between these then you could also do something like animated content here so now that we specified our content the last thing we need to specify is our transition spec and that works a bit different from the transition specs we we did before because here we specify the enter and exit transition in one single spec so the easiest type of transition spec we could have here is simply a fade in and then we say with Fade Out so this is simply then the enter translation Edition and this is the exit transition and we get an error here because we need this experimental animation API let's just add this to main activity let's see how this looks like we will also Implement some some more complex um transitions back here but you can see we have our red box if you click toggle we swap this out with a green box and we simply fade it out and the other one in so but what if we actually want to have some more complex transitions back for example if we want to move one box to the left and the other one to the right or the other way around and then we can use something called slide oops we always use this slide in horizontally this one here um and here we get an integer and this integer is basically the offset so with this integer we can now Define from where our sliding in actually starts and where it will lead to Let's actually get rid of this Lambda block and Define this here in a normal parenthesis instead what we need to have here is an initial offset X and we can make this based on this integer value here so that requires a little bit of explanation if we say that is minus it then the initial value would be or this would be a zero here at this at this corner and then if we set this to minus it then it would be somewhere here if we would set this to just it it would be here so the the sliding will start from here and then we can say it slides to some other value I think we just try this out this is really hard to explain um so we can also go here and we say the exit transition is slide out horizontally where we say okay we do have a Target offset and here we could say where we want to animate to so for example to it let me show what it does and then I will explain this it stuff again if we now click toggle you can see that is now how it looks like it looks very cool right um so that is now the way how our content is swapped out so let's think about why it looks like that so now we have this green box composable and with this initial offset X we Define where the the box is that will now animate in so that will replace our current box and this is at minus it if we take a look here as I said minus it would be somewhere here so we say here is our current box that we now want to move to our screen and with this exit transition with this target offset X we say hey what is the target offset where we want to animate this to when it leaves the screen so when it slides out and that is it so again it starts here that would be zero and it would therefore be here so it will be a full yeah just a full length in according to its width so we say the green box that will now leave the screen will slide from this Edge to this Edge so just a whole time yeah based on its width if that makes sense if we change this to it divided by 2 for example and this as well then it will look a little bit differently if you check this then yeah it will basically start at exactly 50 of the width uh if we want to make this based on our is visible State we could also do this so we could say if is visible we say that's equal to it and else minus it and then we copy this and do the oops the other way around for this one so here we say minus it and it then we also achieve a very cool effect if we take a look here then it will look like this so we basically move it always the other way around depending on what is currently visible so that's just a very quickly composable to animate the change from one composable to another feel free to play around with that there's also a similar one which is called Crossfade which I won't go into here it's just a simplified version of animated content so if you if you just care about animating the alpha value so just fading it fading in a composable and fading out the other one then you can simply use Crossfade and you need to write a little bit less code but if you want some custom animation when swapping on content you need this animated content composable so I hope that gave you a good impression of animations in Jetpack compose if you want to learn more advanced Android Concepts and topics where I can go much deeper into then I have plenty of courses where I do that simply check the link down below check out my courses other than that I hope this video helped you to get a good version of the animation apis in Japan compose if you want to see more low-level apis and want to see me cover these then let me know that down below enjoy your day and I'll see you back in the next video bye bye

Channel: Philipp Lackner

Views: 32,208

Keywords:

Id: 6ZZDPILtYlA

Length: 28min 23sec (1703 seconds)

Published: Sun Oct 23 2022