Android Animations Using Android Studio : Translate, Rotate, Scale, Alpha, Set Animation

hello everyone welcome to this channel this is Burke today we are going to learn about different types of animations in Android as you can see I have already designed the layout for this particular tutorial so there is an image and five buttons basically there are four types of animations in Android the Translate animation rotate scale and alpha also you can combine multiple animations in one it spits it said we are going to animate the this image view on click of all these buttons i have already assigned ids to all these views as you can see image underscore animation in all these buttons i have already assigned the objects ids so now let's go to our java code here I have already initialized all the views that is buttons an image I have created one function that is initialized and in that I have already initialized all the buttons and image view and already implemented the onclick listener so we can directly go to creating animations and implementing them so let's begin for creating animations we have to create a folder which is an Impala as you can see we just have to go to Android resource directory and then just press a and this annum option will come up now to create animations we have to create files in this folder so when we click on an 'm it gives us option that animation resource file so here of first animation is translate so we'll name it translate and yes so what is translate animation so basically in translate animation we can move object from left to right bottom to top top to bottom in any direction on this axis X and y axis so in this tutorial we are going to move this image u from left to right that is minus X 2 plus X so minus is the negative x-axis so we will start from from X Delta which is minus thousand and the initial position of this image that is its current position is zero so will come from - thousand to one know for every animation we have to provide duration that for how much time the animation will happen let's say 2000 so this is our translate file now to use it we have to create its object in Java code so let's do this animation and him translate again we will have to initialize an intransitive animation utils dot load animation this this is the context and r dot and m dot translate so this way we have initialized at the animation object now on click of this button let's animate the image view image animation dot start animation so Anam translated now we will run this code on the device connected so that you can see how this animation works I have my device connected so this is the process you can create animations in Java as well but initially it's better to learn how to create animations in XML so we are doing that so for now let's create all of the files here that is rotate and rotate animation then we have scale animation and the last one is alpha as you can see by default which we see the set animation object there so that we are going to implement at last so alpha so now it is installing the apk file and launching that to Jason now as you can see this is our view whatever we have designed so now when we click on translate the image will come from left to middle in two seconds again we will click in two seconds so this is the animation Translate animation so now we will go to the next animation that is rotated so what is the rotate animation so basically it will rotate this image anti-clockwise or clockwise for a particular duration so for that we need from degrees to 2 degrees so from degrees will be 0 and let's have one rotation and what is one rotation one rotation will be of 360 degree so 360 degrees and duration we have to manually pass here they are not suggesting this function here ok so so now if I'll be animate this rotate this image one thing we have to consider that what will be its rotating point if we want its rotation to happen from the middle then we have to pass the pie what values the pie what value define what will be the middle or rotating point so x and y considering X and y-axis this middle portion comes at 50% from X and 50% from Y so that's why I would value is 50% why would x is 50% now we'll go to and him wrote it and him we will create all other objects and him alpha and him rotate animation utils dot wrote animation this dot and m dot wrote it so now we can and he made the image on click of this button and him rotate I can run this less than this so that you will understand how all these animation works indexing and installing the apk so now it's here now let's click on rotate as you can see it is rotating the image in 360 degree in two seconds so this duration is basically in millisecond which is two seconds 2,000 milliseconds is two seconds so now let's go to our third animation that is scale animation scale animation is basically the image will be loaded from its minimum size to current size at let's say this this is the image here so it will be the smallest and it will increase its size to this current side so you will understand when we implement it so for that we have to pass from X Kaelyn from Y's cancel from scale will be 0 and to scale will be 1 again from loading it in center or the middle of this image by what will be 50% and duration is 2,000 seconds so this is the scale animation and him skill and here we say skip he made start animation and him skill till then we can create the last animation as well the set animation so it is this set object so it's ap Caid in its Alma so we will see scale so this is the scale that is zero so again we can go back to this file and you will see from zero to one from the middle that is 50% and in two seconds you can reverse this by saying from one to zero it it is same in case of rotate you can reverse it in your anti-clockwise using giving - degrees like this from zero to minus 360 so it will go anti-clockwise now alpha let's go to alpha animation so this animation is basically fading so from 0 to 1 so it is fading in and 1 to 0 it is fading out so we will fade in this image mm now again we have already let's define the last animation that is set as well then we don't have to initialize it every time animation set and here initialized both of them animation alpha and in alpha and said so alpha and said in onclicklistener also start animation alpha and alpha so this is it will run this so these are basically four types of animation and in last we will see how can we combine two animations so here we have already loaded it so now let's go to our file so you will get some idea that yes so alpha fading in so if you want to fade out it will come from 1 to 0 ok so these are the phone app for animations now what we'll do we'll combine two animations like will rotate and scale in this set animation so you you will see there are 4 tags here rotate scale translate and alpha so what we'll do we will scale this image from 0 to 2 1 to 1 5 what values will be 50% by what value 50% and duration relation we will pass the same two seconds now rotate rotate is from degrees zero to degrees 360 and five what values 50% 50% and duration duration can be different it can be different so it will animate accordingly so now we have these this set animation is ready we'll implement it we already have initialized with that particular file so now let's just play this start animation and then set now let's install this so set animation is basically combination of two animations you can play with this group of animation differently as per your idea and use all this combination of all these animations now as we can see on click offset we will see it rotating as well let's scaling rotating as well as scaling so these are all the types of animations we will see all of them one by one this is rotate this is scale this is alpha which is fading out and said is the combination of different animations so this is it from this tutorial in the description of this video I will share the links of the application of games that we have developed using this animation so you will get better idea that how can you use the simple animation and develop something interesting thank you for watching this video see you in the next

Channel: Droid Guru

Views: 12,782

Keywords: android animation, android studio, native android animation, scale animation, rotate animation, translate animation, alpha animation, How to animate

Id: 8fB917XM6_Q

Length: 20min 33sec (1233 seconds)

Published: Mon Jan 14 2019