‫Hey, there.
‫Welcome back, Siobhan, the site.
‫Now let us start our journey with animations.
‫Now animations are important, maybe just for small edits, maybe just for small movement, or maybe
‫some big tasks that you want to do on your home screen.
‫For example, we are going to work with that, Dave, and I'm going to give our glasshouse container
‫so everything that we are going to do with this is going to reflect there.
‫So the first thing I'm going to do is I'm going to control this container glass.
‫And I'm going to create some red tide and create some object.
‫For now, I'm going to create an object in the form of squid, so I'm going to have a wealth of maybe
‫100 in.
‫As well as hyped all politics in.
‫Save this one, it's not reasonable because we need some background color.
‫And let me select any and then I will have option about this drag and drop.
‫So let me save this one.
‫So at this point of time, this is my object.
‫Let me also give this opposition of absolute so I can control it.
‫Stop and Left-Right on the values so I can have some movement.
‫Now this is the basic structure that we currently prepared or our object.
‫But what is animation, what we are going through, how we are going to do?
‫Let's discuss now.
‫The first thing is a member we discussed about Transform.
‫Now the second thing we did is transition.
‫The third thing we are going to do is animation.
‫Now, when we work with animation, we can change things in the form of shape, in the form of color.
‫Also in the form of position.
‫For example, if I have a ball, I want to jump, which I can dig it up and then down.
‫Or maybe I can just tip whenever the ball's touching the ground.
‫Or I can also change the color and we are very doing the position change.
‫So all of this is together.
‫When we perform is called animation.
‫But the thing it is we can change and control things at every single level.
‫In animation, we are not going from A to B directly.
‫We are controlling things at every different stop.
‫I know this might get confusing, but let's start things to understand better.
‫For now, I'm going to take a property as animation NIM.
‫Now this animation NIM is important.
‫Because we are going to create an emission later and this animation name is going to control things.
‫For now, let's stick this Neymar's move, you can take any name we are going to control it now.
‫The next property I'm going to take is animation duration.
‫That means time it takes to go from A to B.
‫So if I say lose again, that means if I'm moving my object from a good viewpoint, it will take two
‫seconds.
‫OK, let me first do this.
‫Let me do this.
‫So we are going to utilize key frames of this key frame help us to implement this animation.
‫So I'm going to make this move.
‫Remember, you can give any name, basically.
‫And inside this key frame, we are going to control things.
‫So I'm going to go with move.
‫This is my move.
‫And had I have defined this key frame, our key frame help us to define rules and whatever, we want
‫to change a different point.
‫So we created this move key frame, and now we have option to define what we need to change and how
‫we need to move.
‫So there are two options.
‫The first one is from that means from where we need to start and two where we need to end.
‫So suppose we are starting from, let's say don't maybe five pixels and we are going then.
‫And if I save this one, you can see how this animation is going.
‫Now here we look.
‫Those against that quiet these new laws, nor am I saying once again and it's not going to be pixelated.
‫150 pixels.
‫So it is going front of five Pixel 2.1 gimmicks.
‫And if I save this one, you can see that's how it is going.
‫So this is just a basic example.
‫Let me try to move them horizontally.
‫So instead of top, let me take the left and I'm going to go with zero pixels.
‫I'm going to start with level zero and then turn left and I'm going from zero to 150 pixels.
‫Save this one.
‫Hey, you can see that's how we are moving now at this point of time.
‫We just took from N2, but that's not the case.
‫You can pick multiple parts.
‫From now, I'm going to do my 0%.
‫That means from where we are stopping 200 percent.
‫That means twenty point.
‫Our animation is or what?
‫Save this one.
‫You can see that art is moving.
‫So instead of 150, I'm going to take 300 pixels.
‫Save this one.
‫You can see that art is moving.
‫So these are the basic property that is named because with this move, our animation is connected,
‫then with no duration.
‫That is the total duration.
‫It is going from zero to 100.
‫Now here we can have multiple properties.
‫Maybe we can are 25 percent and add some definition.
‫So by the time we are at 25 percent, our left should be 75 pixels, and by the time we reach, 50 percent
‫are left should be.
‫150 pixels.
‫And similarly, we can act on that information, so that's how this is going to work.
‫So I'm going to remove these two or now I hope you got the idea.
‫Don't worry, we are going to work with a lot of things.
‫Whatever you observe, we are only animating for the first time.
‫That means only one thing.
‫That means we have a property, which is known as iteration count.
‫So if I use any mission and if I scroll down a bit, the IS iteration count at this point of time,
‫we are only doing for one time.
‫Maybe if I use to save this one one, do not done.
‫Maybe if I use five, save this one.
‫Now, I know this is going to run for the fifth time.
‫You also have infinite.
‫So certain times you see something loading, you see something bouncing.
‫That can happen with the help of anyone.
‫OK, I'm going to go with one, which is the default value, and I'm going to come in this one.
‫So and finally going to comment and say, OK, that's great.
‫Now there are other properties like timing function.
‫So with animation timing function, we can define how what animation should move.
‫At this point of time, we are moving in only in that one.
‫But we can define other values.
‫Remember, we can define cubic values as well as we can say, OK, let's say is in.
‫So if I save this one, that's how it is going to work.
‫Now we can control a lot of things here.
‫We will discuss, but I just want to discuss all these values for now.
‫So here we have this naming function.
‫Then we have about delay.
‫So I use animation delay.
‫That means time it should take before we start at animation until two seconds.
‫And if I save this one way second and then our animation stock may save this one again.
‫You can see two seconds and then we start our animation.
‫So that's how this delay is going to work.
‫Then we have other options like animation direction, which is important, really important, actually.
‫So if I see animation that action and if I say alternate, if I save this one and also create infinite
‫value and I also save this here you can see and is working in finite time.
‫That means with alternate, we also reverse back.
‫For example, if this is one save, it is animation is going from one to two.
‫But so it might save this one animation just run.
‫It is normal.
‫Like the other thing, we are not able to absorb this.
‫What if I said to?
‫That means the first will be the normal rotation.
‫What I showed them normal animation.
‫And then the second one will be the alternate, normal alternate.
‫And I saved this one normal, alternate.
‫That's how this is going to work.
‫I use in funny.
‫That means go from normal to alternate, normal to alternate.
‫OK, let me pause this one, so at this point of time, you also have a property called play.
‫So if I use animation?
‫Listed by default, it is running, but if I say bold, that means we have all these properties, but
‫none of them are walking in this post.
‫If I see running as animation will run and this is the default value.
‫We don't need to report this.
‫So I don't have to run this again and again, and you can see if I paused.
‫It's that exact.
‫I had one interesting value is we have this alternate universe that means we will start our animation
‫from the 100th question.
‫That means this position and go tell this and keep on going.
‫So it might also come in this time.
‫Boys, save this one.
‫We start from here.
‫So that means we are starting out animation from the opposite direction.
‫That's the simple way I can explain.
‫OK, I hope you got the idea, all these different values.
‫Let me comment.
‫All of them and also discuss about this short property.
‫So we have this in.
‫Let me comment everything and jump here.
‫That is the best resource for you, as it now is about sea assisted her friends, as I said.
‫You can dig any way of saying because things are going to remain same.
‫I just bring you here so you can just visualize think, Oh, there is a button which help you to visualize
‫all day walk by any region that we are using.
‫And if you scroll down at the bottom, you will see the shark and property and their sequence.
‫OK, so let me get back and here let me add all of these properties with a sequence so all I could take
‫is animation.
‫Remember, only two properties are required, which is name and duration risk.
‫Everything can work with default value.
‫So let me take name first.
‫I'm going to go with more and then I'm going to apply our duration to once again.
‫And then I'm going to apply the timing function, which is going to be at ease in.
‫And then I need to apply about my dilemma.
‫For now, I don't need any delay or if you want, you can take one again, again, again, whatever
‫you want and then you have a correction count.
‫I'm going to go ahead and find out.
‫Then you have to talk about direction.
‫I'm going to alternate and then you have more.
‫Now, Phil Mudd basically means before and after state of animation, we basically let our browser know
‫that if we want to keep that animation date or not.
‫What example if I'm just moving for one time and if I say forward, that means I'm going to stop, but
‫my animation excel and the default value is none.
‫OK, let me get back here so I can utilize to be all value if I want.
‫And then I have animation listed, which is running again, different value so I can see running.
‫Now you don't need to define them because these are different value.
‫Now if I save this one and get back here.
‫Now here you can see we took two second delay and then start moving, according to our animation state.
‫Now the interesting thing is we kind of find a lot of thing here.
‫Maybe we want to change the direction or anything if we can do that.
‫But then I want to do it later so we can have basic understanding of what this animation is.
‫I hope you got the idea.
‫Make sure to practice this one in the next lecture, let us know on something.
‫Let us try to make certain properties, let us try to create a small order and understand things in
‫a better manner.
‫So that's it for this lecture.
‫I hope you got the idea what we were trying to do.
‫Now you can control a lot of things that we will do and next one.
‫So thank you for following and I see you guys in the next one.