From Figma to Android Studio - Infinite Lottie Animation - Easy Tutorial

foreign beautiful animation in figma and Export that directly to your Android Studio as a Lottie animation so as you can see here in this case we have won a beautiful background image which is uh infinitely a rotating in our application and it fills the whole screen even behind the status bar and behind the navigation bar also you can notice here that our button is also animating along the way so we are animating our button from a yellow to green and vice versa so be sure to watch this video if you want to learn how to achieve that ok so the first thing we are going to start with the figma so at this point as you can see I have only one background image that I'm going to use for this animation and if you're wondering where did I get that background image well there is one website which is called the midjourney.com so here you can just log in and go to this website and from there you can open up this explore Tab and just type a simple term for which you want to search a certain background image in this case I have decided to go with a healthy food and down below we can see all bunch of different images that were generated by the AI so a mid journey is basically an AI which allows different users to type different prompts and generate those beautiful images as well in this case I have already decided what kind of image I want to use for this project so this one the next thing we need to create here a new frame for our mobile device so let's press a on our keyboard and let's choose here for example Android large frame size okay so this one we can just name this Android the next thing I'm going to place this image within this Frame okay let's now decrease the size of this image to fit this uh this height of this Frame right so okay it looks very nice now the actual animation that we're going to make here will be for rotating this whole background in a 360 degree so if I now hold down control and select this background image and I now hold down the shift to rotate this image and then you will see that once I try to rotate this image then we are going to see here this white background of our actual frame which means that before we actually create this animation we need to increase the the height of this image a little bit more to hide this background so I'm going to now just increase this height of this image a little bit so for example something like that let's now try to uh rotate the desktop image and now as you can see we can freely rotate this image without any uh White space from the background now the next thing I'm going to also create the one a black overlay on top of this image because this image will also contain some other different elements like the text elements in the button however those text elements and that button will actually be not a part of this animation so only this image and one a black overlay that I'm going to create right now so just press r on your keyboard create one rectangle to fit the size of this actual frame now choose here a black color choose here 50 of the opacity of this black color and we can also name this layer to be an overlay okay and now that we have created this first frame that contains this background image and this overlay now I'm going to select this whole frame once again and open up the plugin which is called the N inyx so let's uh press this error from here and let's choose export prototype okay we can also use this other different button but nevertheless let's just press press here export and now a new window or actually new tab will appear in our web browser and from there we want to create that animation okay so this point as you can see we don't have any animation I'm going to now click this open in editor button so this is a plugin which will allow us to basically animate and convert our animation into a Lottie Json animation file so at the moment I'm going to here specify a 40 seconds the length of our animation right the next thing I'm going to choose here the background so this is the background image right I'm going to now go to this one second Point Let's just increase that to a 4D so this whole animation will last for 40 seconds and as a zero second for our background I'm going to choose here this angle or a rotation keyframe so now select and add this a keyframe so at the beginning our image will have a zero degree of a rotational angle when we start this animation and when we end this animation this angle will be 360. okay and now if I uh try to go here as you can see okay so we need to modify one more thing so let's select this whole background and specify this Pivot Point to be on the center and now whenever we rotate this uh um background image as you can see it will rotate for a 360 degree quite easily and that's how we can easily create an animation with the loading okay let's just increase that to the 40 seconds okay and we can also press this play button to see how this animation will actually play so this animation will last for uh 40 seconds and it will rotate this image from a 0 degree to a 360. okay there you go and now what we can do let me just pause this uh this actual animation now we are going to export this whole animation as a loaded Json file so let's here choose a load this so dot loading and click export so now we have received here a new file I'm going to rename this file to say a background and we can just copy this same file into our Android Studio project so in this case I have already done that so we already have that background Json file which does represent a load animation and the next thing let me just open up here this main screen so I have already placed here uh one column that contains the two text elements and the one button and now I want to also add basically that hello to animation so inside this box those are two text elements and this is a button will be placed on top of our background so now let's create our load animation so the first thing we need to create a composition variable and there we need to call a remember a low team composition and as a parameter here I need to pass a loading composition spec dot Arrow resource and then here I need to paste that resource so r.o.background there you go after that I'm going to create here one more variable named that progress I'm going to call here by uh animate a low T composition as a state as a composition I'm going to pass this composition dot value actually because I haven't used here a buy keyboard anyhow nevertheless let's continue the second parameter here will be iterations so I want to basically make this animation an infinite animation which means that this wallpaper will rotate uh all over again once it reaches the end state of 40 seconds so let's just hear call a low T constants dot iterate forever and after that we can call that the low decomposable function so let's call here a Lottie animation specify the composition as a progress just specify this progress so here composition dot value actually there we go and I'm going to specify here a modifier so that our animation can fit the whole screen size so just go here fill maximum size there you go and now I'm going to launch the application okay so before I open that application in Android emulator let me just show you the Gradle build file so here I have only one dependency for a low decompose there you go and in our main activity here I have called this a Windows set Flags to flag layout No Limits so that our main content or actually the content of our application can fit even behind the status bar and behind the navigation bar as well okay and there you go so this is how our animation now looks like so on top of this wallpaper we have a those uh two text elements and it's a button there you go and our animation is actually working quite good now the last thing that we need to also add here is the animation of the button color that will be triggered along with this uh background animation as well okay so for that purpose let's just go back to our project here and here I'm going to create a one variable named the infinite transition and then I'm going to call here remember infinite transition now after that we need to create a one a variable in the color and this color will be actually animated so let's just hear a call by infinitetransition dot animate color now as an initial value here I'm going to specify a yellow color and as a Target value I'm going to specify a green color and if you open up the color coding file you will see that here I have specified the two custom colors a yellow and green and those two colors will animate uh from one to another and vice versa with this animation right here so let's specify here the animation spec which should be an infinite repeatable here is an animation parameter we need to pass a duration so I'm going to call here a twin duration can be maybe let's say five seconds the easing can be uh so the easing can be linear easing Maybe okay and the second parameter here is a repeat mode so as a repeat mode I'm going to specify here a reverse so that this color can uh basically animate from yellow to green and from green to yellow and that the animation will basically elasta infinitely and this color will now need to be specified on our button so I'm going to comment how this is a code so in our button here we have passed the colors parameter and there we have specified the container color okay so now let's allow this application once again and we should be able to see the new color of our button that should animate from yellow to Green in a five seconds of Animation so this animation will last for 5 seconds and then it will repeat itself in a reverse order so from yellow to green and from here and from green to yellow in a five second animation so now as you can see we have a uh we have implemented that uh load the animation successfully along with this infinite color animation in our application with the jetpack compose and there you go so be sure to comment down below and let me know what you think about this whole animation also uh comment down below if you want to see some more interesting animations with the figma and the low team and of course be sure to like this video but only if you find it helpful for this video that will be all oh my God

Channel: Stevdza-San

Views: 16,735

Keywords: lottie, animation, android, android studio, kotlin, app, mobile, design, how to, guide, tutorial, export, from, figma, to, aninix, plugin, transfer, smooth, beautiful, infinite

Id: N3t7SIlFPrQ

Length: 11min 25sec (685 seconds)

Published: Sat May 06 2023