How to Easily Animate Composable in Jetpack Compose

hello guys welcome back in this network compose tutorial we'll learn about animations api and how to use them properly we'll focus on animated visibility and animate as a state and how do you customize them to reflect your app needs now let's get started so we're going to create here a new file so this we are going to call it home and inside here let's create here a new composable and we are going to call this main screen now inside here we have to create a state so that we can animate so we're going to use this state in order to animate and we are going to call this visible so we are going to create here a column so that we can structure our code and inside here we are going to create an if statement so if this is going to be visible then we want to add a text inside here and now let's create here button so that we can use to toggle between animations so inside this one click here we want to we want to change the state so we are going to negate the value here and inside here we can pass in a text and this text is going to be an image also we can try to pass in here modify in order to align this to the end so now we have created here let's call this main screen inside here our main activity so we are going to call this main screen now let's try here and run our application and see how it's going to behave now let's press this button here so in order to animate that visibility changes we have to use a composable functions and indeed compose is really simple it's just replacing this if a statement with the animated visibility and as you can see here we're getting here an error and we have to add this experiment to api so we have to reference these classes of the animation apis and they can be added new features or removed entirely so this is just a word of caution so right now let's try and run our application and see if there is changes now let's press this animate button as you can see now it's just coming from the top and sliding down and this is the power of jetpack compose so we can try to customize this in our preference so let's do this right now so in order to customize that animation visibility so there are a bunch of parameters which this animated visibility provides so as you can see here we have this inter and it's a inter transaction and exit transaction and this api provides several different inter and exit transactions which are built in and you can just try to use them so let's navigate here and create the inter transaction so inside here there are different if you go to the google documentation you can see these transactions so we can have the slide in for example here we can have the fade we have to fade in and also we can specify here the exit with the fade out as you can see here it's just really simple to customize and you can try here to add other other transactions for example here we can add the expand horizontally and also here we can add the shrink horizontally now if we try to run our application you can see the changes inside our view now let's press this animate button here and see as you can see now it's sliding from this top left corner and if we press this it slides out from this and it's fades out now as you have seen here we can really customize this easily and we can further customize this also as you can see here there are different parameters which we can pass inside here as you can see you have the initial float value which you want to start to fade out of it in and we have another variable which is called the animation spec and we're going to talk this ma in more details in later in this video so let's add here the animation speak so for example here we can provide the we can use a twin so we're going to speak about this screen later in this video as you can see here we can provide the duration of this animation so for example you can provide here for one second and also if you want to delay this this this animation for example here we can provide just like 50 mils a second and if we try to rerun our application you can see now let's press this animate here and as you can see that the fit in is just delayed for a certain amount of time now this was all about animating visibilities so what if we wanted to animate the changes in colors or changes in size of an object and animating the content changes so there are other composables which are built in by these apis you can try and use them so right now let's try and use the animate as a state composables which are really just good in order to animate so we are going to create here another object and this composable is going to be called my object as you can see inside here we are just using a surface and this surface has the size the padding and the of absolute offset value and the offset value is going to offset this the y value so we want to create a movement between one point to another point so we are going to use this to animate the offset so in order to animate this we are going to remove this animated visibility because we are not going to use it anymore so now in order to do that we have to create a state so inside here we are going to create an nm class which is going to hold up our state and we are going to call this so we have here a stat let's start state and and state so we are going to use this as our our state and inside here now we can try and remove this because we we are going to use that the the box state and we can try to change this box state inside here so we are going just to we're going to use a win statement so in this box state so now basically here we are just swapping these values so if it isn't start we want to change the state to end and if it's end we change the state to start so now we are done with this button inside here now we can try to animate these boxes so we can provide here the box so we can use this my object inside here now we want to create a state that we can use to offset these values so inside here now we can create another variable so this is going to be the let's just create outside here so we want to create this the offset and it's just going to be the value of dp so now we want to use the animate as float we want to use this animate db as a state and we want to provide the target value so now we are going to use the if statements that if this box is going to be so if this one is going to be at the start we want to return a 5 db offset else we are going to return here a 300 dp offset so let's pass in here our target value and then we are going to pass in the offset value now let's try and rerun our application c so now we want to move this box from this position to this position and let's try to animate this now as you can see the box is moving toward these two positions they start and finish the position so we can try to customize this and provide is in and other ways so let's start with a spring now in order to change that default animation which we have seen we can try to customize this by using the the animation specification as earlier this animation specification stores the animation including the data type so for example here we can provide that animation specification and inside here now we can pass in now we are going to start with the spring let's see here this spring so inside this spring function as you can see here we have the damping ratio also we have the stiffness so the damping ratio this is the amount of oscillation and this is just a float from zero to one so you can try to provide you a value or you can use the built-in also we have the stiffness this defines the time or the amount of time which the animation is going to run also we have the visibility threshold so the time when the animation is going to be stopped now let's try here and pass in now the now the dumping ratio and this damping ratio here we can use the and we can use here the high ponzi let's go with high and also you can provide here for example stiffness and this is the amount of time so for example here we can use this medium or we can go with this high so it's going to take this time and it's going to bounce up and you can pass in the visibility threshold but you're going to leave it so let's try and rely on our application also let's change this offset let's change this offset here of this object and we are going to change this from not from y we are going to change this from x value let's try and rely on our application and see so right now we have changed the offset position we are going from this point to this point so we are going from the x-axis and not the y-axis so let's try and animate here now as you can see here it is just bouncing around and we have used the high bouncing option however this animation give us a little room of control on how we are going to animate this so there are other these functions which you can use and the next one which is twin let's see how we are going to use this twin so let's use the twin animation which is going to give us a room for control of our animation so twin function here provides the duration the delay mails and easing in curve so you can see here the duration of the animation specification and also the amount of time in meals that the animation waits before starting and also the easing curve that interpolate between start and end state so we can provide here for example the duration meals and here we can specify for example 1000 so we are going to 1000 mil second which is equivalent to one second also we can provide here the delay meals so we are going to delay this by just 50 milliseconds and also we can provide the easing curve now here using there a bunch of of built in easing as you can see we have here the linear easing and also we have for example here let's pass in the linear linear outslow is inning in so let's try and reland this up and see now let's press here animate now as you can see here it is starting fast and then here the middle is slowing down then going fast also so this one is going to interpolate inside the curve and you can provide your own custom animations here for example here this linear isn't in if you press ctrl q you can see that is using the cubic bezier is inning in which you can use to provide yourself so for example here we can use this and now let's rerun it so now let's press here animate now as you can see here it is going slowly then going really fast so this was just a simple way which you can use between animation let's try also another animation which is the keyframe animation so now let's use the keyframe animation function so we can try to change this and we have been using this dp every time so we want to change the data type and for example here we can use a float so we can use the animate float as a state so we are going to change also the data type here and this we are going to specify here to be a float and we are going to change this because we want to increase the size of the object so we are going to call this scale in our point here and we are getting here an error because we are returning adp so for example here we want this to be one f at this point and when it is when it is being in a finished state we want this to be for example here 10 times the the actual size and now we can change this my object here and because we don't need this anymore so inside this my object here we can set the offset value to a default value of 0 dp and also we can add here a new value which is called the scale and this scale is going to take up the float and now inside this modifier here we can add a scale function and we can provide that scale data which we want now if we come inside here this my object and we can try now to use the scale now we want to use here keyframe animation so we are going to use this tweet so inside this keyframe animation we have this scope here and it has a data type of slot and inside here we have the power of using the light between but with more more customization options so for example here we can use the duration we can provide here the duration for example we want our animation to last for example here we want to use the 1000 milliseconds and also we have the power of adding here the keyframes so for example at a certain point we want this to be in a certain in a certain position and so for example here we will use 5f then we can use this at and this at as you can see here it adds a keyframe so that animation value will be this at the timestamp which i have specified here so for example here we want this to be at five and we can try to add is in for example here we can use this width and this width adds an easing for the interval stated so for example here we have provided this interval here and we want to is in so we can provide here for example at this is in we can use the first first out slow in and also we have the power of adding the the delay the delayed mills so for example here we can use just this 50 milliseconds so that we can delay the animation to get started and right now we can try to reboot our project and see now let's scale things up and as you can see here now it's scaling so guys let's leave it here and as you have seen we have been animating a certain value at one point but you can try to animate two values for example if you want to scale and change the color simultaneously and that is another api which is called the transition api and there are so much more which we have not covered in this video so if you want more videos about this just comment down below and i'll make a next video so if you find this video helpful please don't forget to provide a like and subscribe for more videos thank you see you next time

Channel: HoodLab

Views: 4,527

Keywords: jetpack compose, android developers, kotlin, android jetpack compose animation, jetpack android UI, android jetpack tutorial, jetpack compose tutorial, jetpack compose android, android jetpack compose

Id: Z5GYz8L6Ubc

Length: 17min 33sec (1053 seconds)

Published: Sun Sep 05 2021