1 00:00:00,590 --> 00:00:01,230 ‫Hey, there. 2 00:00:01,280 --> 00:00:03,070 ‫Welcome back, Siobhan, the site. 3 00:00:03,590 --> 00:00:06,380 ‫Now let us start our journey with animations. 4 00:00:06,830 --> 00:00:13,850 ‫Now animations are important, maybe just for small edits, maybe just for small movement, or maybe 5 00:00:13,850 --> 00:00:16,880 ‫some big tasks that you want to do on your home screen. 6 00:00:17,540 --> 00:00:23,000 ‫For example, we are going to work with that, Dave, and I'm going to give our glasshouse container 7 00:00:23,480 --> 00:00:27,710 ‫so everything that we are going to do with this is going to reflect there. 8 00:00:28,550 --> 00:00:33,680 ‫So the first thing I'm going to do is I'm going to control this container glass. 9 00:00:35,050 --> 00:00:38,410 ‫And I'm going to create some red tide and create some object. 10 00:00:38,770 --> 00:00:45,460 ‫For now, I'm going to create an object in the form of squid, so I'm going to have a wealth of maybe 11 00:00:45,460 --> 00:00:46,480 ‫100 in. 12 00:00:47,650 --> 00:00:50,080 ‫As well as hyped all politics in. 13 00:00:51,500 --> 00:00:55,460 ‫Save this one, it's not reasonable because we need some background color. 14 00:00:55,930 --> 00:01:00,920 ‫And let me select any and then I will have option about this drag and drop. 15 00:01:01,400 --> 00:01:02,700 ‫So let me save this one. 16 00:01:02,720 --> 00:01:05,270 ‫So at this point of time, this is my object. 17 00:01:05,840 --> 00:01:10,520 ‫Let me also give this opposition of absolute so I can control it. 18 00:01:10,520 --> 00:01:15,650 ‫Stop and Left-Right on the values so I can have some movement. 19 00:01:16,400 --> 00:01:20,480 ‫Now this is the basic structure that we currently prepared or our object. 20 00:01:20,870 --> 00:01:24,890 ‫But what is animation, what we are going through, how we are going to do? 21 00:01:25,070 --> 00:01:26,300 ‫Let's discuss now. 22 00:01:26,840 --> 00:01:30,710 ‫The first thing is a member we discussed about Transform. 23 00:01:31,310 --> 00:01:33,890 ‫Now the second thing we did is transition. 24 00:01:34,220 --> 00:01:37,010 ‫The third thing we are going to do is animation. 25 00:01:37,860 --> 00:01:44,340 ‫Now, when we work with animation, we can change things in the form of shape, in the form of color. 26 00:01:44,550 --> 00:01:46,350 ‫Also in the form of position. 27 00:01:46,740 --> 00:01:52,140 ‫For example, if I have a ball, I want to jump, which I can dig it up and then down. 28 00:01:52,500 --> 00:01:57,090 ‫Or maybe I can just tip whenever the ball's touching the ground. 29 00:01:57,480 --> 00:02:02,610 ‫Or I can also change the color and we are very doing the position change. 30 00:02:03,090 --> 00:02:05,010 ‫So all of this is together. 31 00:02:05,010 --> 00:02:07,800 ‫When we perform is called animation. 32 00:02:08,280 --> 00:02:13,920 ‫But the thing it is we can change and control things at every single level. 33 00:02:14,580 --> 00:02:17,620 ‫In animation, we are not going from A to B directly. 34 00:02:17,640 --> 00:02:20,580 ‫We are controlling things at every different stop. 35 00:02:21,120 --> 00:02:25,710 ‫I know this might get confusing, but let's start things to understand better. 36 00:02:26,130 --> 00:02:29,940 ‫For now, I'm going to take a property as animation NIM. 37 00:02:30,570 --> 00:02:32,970 ‫Now this animation NIM is important. 38 00:02:34,300 --> 00:02:40,060 ‫Because we are going to create an emission later and this animation name is going to control things. 39 00:02:41,040 --> 00:02:47,760 ‫For now, let's stick this Neymar's move, you can take any name we are going to control it now. 40 00:02:47,760 --> 00:02:50,990 ‫The next property I'm going to take is animation duration. 41 00:02:51,000 --> 00:02:55,070 ‫That means time it takes to go from A to B. 42 00:02:55,080 --> 00:03:01,350 ‫So if I say lose again, that means if I'm moving my object from a good viewpoint, it will take two 43 00:03:01,350 --> 00:03:01,890 ‫seconds. 44 00:03:02,130 --> 00:03:04,680 ‫OK, let me first do this. 45 00:03:04,680 --> 00:03:05,770 ‫Let me do this. 46 00:03:05,770 --> 00:03:11,850 ‫So we are going to utilize key frames of this key frame help us to implement this animation. 47 00:03:12,210 --> 00:03:14,040 ‫So I'm going to make this move. 48 00:03:14,820 --> 00:03:17,190 ‫Remember, you can give any name, basically. 49 00:03:17,880 --> 00:03:20,700 ‫And inside this key frame, we are going to control things. 50 00:03:21,000 --> 00:03:22,740 ‫So I'm going to go with move. 51 00:03:22,770 --> 00:03:23,730 ‫This is my move. 52 00:03:23,730 --> 00:03:29,730 ‫And had I have defined this key frame, our key frame help us to define rules and whatever, we want 53 00:03:29,730 --> 00:03:31,020 ‫to change a different point. 54 00:03:31,440 --> 00:03:38,940 ‫So we created this move key frame, and now we have option to define what we need to change and how 55 00:03:38,940 --> 00:03:39,750 ‫we need to move. 56 00:03:39,930 --> 00:03:41,220 ‫So there are two options. 57 00:03:41,760 --> 00:03:48,870 ‫The first one is from that means from where we need to start and two where we need to end. 58 00:03:49,380 --> 00:03:57,240 ‫So suppose we are starting from, let's say don't maybe five pixels and we are going then. 59 00:03:58,740 --> 00:04:02,040 ‫And if I save this one, you can see how this animation is going. 60 00:04:02,940 --> 00:04:04,250 ‫Now here we look. 61 00:04:04,450 --> 00:04:10,230 ‫Those against that quiet these new laws, nor am I saying once again and it's not going to be pixelated. 62 00:04:10,410 --> 00:04:11,480 ‫150 pixels. 63 00:04:11,550 --> 00:04:15,040 ‫So it is going front of five Pixel 2.1 gimmicks. 64 00:04:15,060 --> 00:04:18,900 ‫And if I save this one, you can see that's how it is going. 65 00:04:19,350 --> 00:04:21,260 ‫So this is just a basic example. 66 00:04:21,270 --> 00:04:23,190 ‫Let me try to move them horizontally. 67 00:04:23,610 --> 00:04:28,200 ‫So instead of top, let me take the left and I'm going to go with zero pixels. 68 00:04:28,380 --> 00:04:36,090 ‫I'm going to start with level zero and then turn left and I'm going from zero to 150 pixels. 69 00:04:36,110 --> 00:04:36,870 ‫Save this one. 70 00:04:37,260 --> 00:04:41,310 ‫Hey, you can see that's how we are moving now at this point of time. 71 00:04:41,640 --> 00:04:45,570 ‫We just took from N2, but that's not the case. 72 00:04:45,580 --> 00:04:47,160 ‫You can pick multiple parts. 73 00:04:48,250 --> 00:04:50,650 ‫From now, I'm going to do my 0%. 74 00:04:50,680 --> 00:04:54,250 ‫That means from where we are stopping 200 percent. 75 00:04:54,310 --> 00:04:55,690 ‫That means twenty point. 76 00:04:55,690 --> 00:04:56,980 ‫Our animation is or what? 77 00:04:57,250 --> 00:04:58,040 ‫Save this one. 78 00:04:58,060 --> 00:04:59,680 ‫You can see that art is moving. 79 00:05:00,040 --> 00:05:02,890 ‫So instead of 150, I'm going to take 300 pixels. 80 00:05:02,890 --> 00:05:03,730 ‫Save this one. 81 00:05:03,880 --> 00:05:05,440 ‫You can see that art is moving. 82 00:05:06,070 --> 00:05:12,340 ‫So these are the basic property that is named because with this move, our animation is connected, 83 00:05:12,760 --> 00:05:14,050 ‫then with no duration. 84 00:05:14,410 --> 00:05:15,970 ‫That is the total duration. 85 00:05:15,970 --> 00:05:17,860 ‫It is going from zero to 100. 86 00:05:18,340 --> 00:05:20,710 ‫Now here we can have multiple properties. 87 00:05:20,710 --> 00:05:24,940 ‫Maybe we can are 25 percent and add some definition. 88 00:05:25,180 --> 00:05:34,090 ‫So by the time we are at 25 percent, our left should be 75 pixels, and by the time we reach, 50 percent 89 00:05:34,300 --> 00:05:35,560 ‫are left should be. 90 00:05:38,490 --> 00:05:39,600 ‫150 pixels. 91 00:05:41,380 --> 00:05:45,700 ‫And similarly, we can act on that information, so that's how this is going to work. 92 00:05:46,150 --> 00:05:50,170 ‫So I'm going to remove these two or now I hope you got the idea. 93 00:05:50,890 --> 00:05:53,080 ‫Don't worry, we are going to work with a lot of things. 94 00:05:53,410 --> 00:05:57,390 ‫Whatever you observe, we are only animating for the first time. 95 00:05:57,400 --> 00:05:58,660 ‫That means only one thing. 96 00:05:59,190 --> 00:06:03,390 ‫That means we have a property, which is known as iteration count. 97 00:06:03,830 --> 00:06:10,240 ‫So if I use any mission and if I scroll down a bit, the IS iteration count at this point of time, 98 00:06:10,240 --> 00:06:11,740 ‫we are only doing for one time. 99 00:06:11,860 --> 00:06:16,240 ‫Maybe if I use to save this one one, do not done. 100 00:06:16,600 --> 00:06:18,700 ‫Maybe if I use five, save this one. 101 00:06:20,550 --> 00:06:23,040 ‫Now, I know this is going to run for the fifth time. 102 00:06:23,460 --> 00:06:25,110 ‫You also have infinite. 103 00:06:25,350 --> 00:06:29,220 ‫So certain times you see something loading, you see something bouncing. 104 00:06:32,140 --> 00:06:34,210 ‫That can happen with the help of anyone. 105 00:06:34,810 --> 00:06:40,300 ‫OK, I'm going to go with one, which is the default value, and I'm going to come in this one. 106 00:06:40,340 --> 00:06:44,950 ‫So and finally going to comment and say, OK, that's great. 107 00:06:45,380 --> 00:06:47,860 ‫Now there are other properties like timing function. 108 00:06:48,010 --> 00:06:53,440 ‫So with animation timing function, we can define how what animation should move. 109 00:06:53,530 --> 00:06:56,290 ‫At this point of time, we are moving in only in that one. 110 00:06:56,680 --> 00:06:58,480 ‫But we can define other values. 111 00:06:58,720 --> 00:07:04,770 ‫Remember, we can define cubic values as well as we can say, OK, let's say is in. 112 00:07:05,470 --> 00:07:08,590 ‫So if I save this one, that's how it is going to work. 113 00:07:08,950 --> 00:07:11,320 ‫Now we can control a lot of things here. 114 00:07:11,530 --> 00:07:15,190 ‫We will discuss, but I just want to discuss all these values for now. 115 00:07:15,670 --> 00:07:19,480 ‫So here we have this naming function. 116 00:07:19,490 --> 00:07:21,040 ‫Then we have about delay. 117 00:07:21,220 --> 00:07:23,110 ‫So I use animation delay. 118 00:07:23,140 --> 00:07:28,000 ‫That means time it should take before we start at animation until two seconds. 119 00:07:28,000 --> 00:07:33,430 ‫And if I save this one way second and then our animation stock may save this one again. 120 00:07:34,030 --> 00:07:37,330 ‫You can see two seconds and then we start our animation. 121 00:07:37,870 --> 00:07:39,910 ‫So that's how this delay is going to work. 122 00:07:40,110 --> 00:07:46,510 ‫Then we have other options like animation direction, which is important, really important, actually. 123 00:07:46,960 --> 00:07:54,730 ‫So if I see animation that action and if I say alternate, if I save this one and also create infinite 124 00:07:54,730 --> 00:08:01,180 ‫value and I also save this here you can see and is working in finite time. 125 00:08:01,210 --> 00:08:04,210 ‫That means with alternate, we also reverse back. 126 00:08:04,390 --> 00:08:09,430 ‫For example, if this is one save, it is animation is going from one to two. 127 00:08:09,430 --> 00:08:13,120 ‫But so it might save this one animation just run. 128 00:08:13,270 --> 00:08:14,010 ‫It is normal. 129 00:08:14,010 --> 00:08:16,450 ‫Like the other thing, we are not able to absorb this. 130 00:08:16,750 --> 00:08:17,980 ‫What if I said to? 131 00:08:18,190 --> 00:08:21,080 ‫That means the first will be the normal rotation. 132 00:08:21,100 --> 00:08:22,990 ‫What I showed them normal animation. 133 00:08:23,350 --> 00:08:27,220 ‫And then the second one will be the alternate, normal alternate. 134 00:08:27,550 --> 00:08:30,070 ‫And I saved this one normal, alternate. 135 00:08:30,640 --> 00:08:32,140 ‫That's how this is going to work. 136 00:08:32,980 --> 00:08:34,610 ‫I use in funny. 137 00:08:35,020 --> 00:08:39,190 ‫That means go from normal to alternate, normal to alternate. 138 00:08:40,870 --> 00:08:46,770 ‫OK, let me pause this one, so at this point of time, you also have a property called play. 139 00:08:47,340 --> 00:08:49,230 ‫So if I use animation? 140 00:08:51,680 --> 00:08:58,100 ‫Listed by default, it is running, but if I say bold, that means we have all these properties, but 141 00:08:58,100 --> 00:09:00,280 ‫none of them are walking in this post. 142 00:09:00,920 --> 00:09:05,450 ‫If I see running as animation will run and this is the default value. 143 00:09:05,480 --> 00:09:08,150 ‫We don't need to report this. 144 00:09:08,150 --> 00:09:12,880 ‫So I don't have to run this again and again, and you can see if I paused. 145 00:09:12,890 --> 00:09:14,270 ‫It's that exact. 146 00:09:14,860 --> 00:09:21,740 ‫I had one interesting value is we have this alternate universe that means we will start our animation 147 00:09:21,740 --> 00:09:23,180 ‫from the 100th question. 148 00:09:23,210 --> 00:09:27,260 ‫That means this position and go tell this and keep on going. 149 00:09:27,530 --> 00:09:29,630 ‫So it might also come in this time. 150 00:09:29,630 --> 00:09:30,830 ‫Boys, save this one. 151 00:09:30,830 --> 00:09:31,880 ‫We start from here. 152 00:09:32,390 --> 00:09:36,110 ‫So that means we are starting out animation from the opposite direction. 153 00:09:36,200 --> 00:09:38,120 ‫That's the simple way I can explain. 154 00:09:39,430 --> 00:09:42,550 ‫OK, I hope you got the idea, all these different values. 155 00:09:43,390 --> 00:09:44,450 ‫Let me comment. 156 00:09:44,490 --> 00:09:48,560 ‫All of them and also discuss about this short property. 157 00:09:48,610 --> 00:09:51,040 ‫So we have this in. 158 00:09:51,430 --> 00:09:54,310 ‫Let me comment everything and jump here. 159 00:09:54,880 --> 00:10:00,440 ‫That is the best resource for you, as it now is about sea assisted her friends, as I said. 160 00:10:00,460 --> 00:10:04,150 ‫You can dig any way of saying because things are going to remain same. 161 00:10:04,480 --> 00:10:10,800 ‫I just bring you here so you can just visualize think, Oh, there is a button which help you to visualize 162 00:10:10,810 --> 00:10:12,910 ‫all day walk by any region that we are using. 163 00:10:15,040 --> 00:10:20,230 ‫And if you scroll down at the bottom, you will see the shark and property and their sequence. 164 00:10:21,070 --> 00:10:27,880 ‫OK, so let me get back and here let me add all of these properties with a sequence so all I could take 165 00:10:27,880 --> 00:10:28,950 ‫is animation. 166 00:10:29,280 --> 00:10:33,760 ‫Remember, only two properties are required, which is name and duration risk. 167 00:10:33,760 --> 00:10:35,830 ‫Everything can work with default value. 168 00:10:36,310 --> 00:10:37,580 ‫So let me take name first. 169 00:10:37,630 --> 00:10:42,580 ‫I'm going to go with more and then I'm going to apply our duration to once again. 170 00:10:42,910 --> 00:10:47,920 ‫And then I'm going to apply the timing function, which is going to be at ease in. 171 00:10:49,820 --> 00:10:52,520 ‫And then I need to apply about my dilemma. 172 00:10:53,180 --> 00:10:57,710 ‫For now, I don't need any delay or if you want, you can take one again, again, again, whatever 173 00:10:57,710 --> 00:11:00,980 ‫you want and then you have a correction count. 174 00:11:01,350 --> 00:11:03,080 ‫I'm going to go ahead and find out. 175 00:11:03,710 --> 00:11:05,570 ‫Then you have to talk about direction. 176 00:11:05,750 --> 00:11:09,380 ‫I'm going to alternate and then you have more. 177 00:11:10,860 --> 00:11:17,430 ‫Now, Phil Mudd basically means before and after state of animation, we basically let our browser know 178 00:11:17,430 --> 00:11:20,640 ‫that if we want to keep that animation date or not. 179 00:11:20,940 --> 00:11:27,120 ‫What example if I'm just moving for one time and if I say forward, that means I'm going to stop, but 180 00:11:27,120 --> 00:11:30,690 ‫my animation excel and the default value is none. 181 00:11:31,020 --> 00:11:35,100 ‫OK, let me get back here so I can utilize to be all value if I want. 182 00:11:35,910 --> 00:11:42,360 ‫And then I have animation listed, which is running again, different value so I can see running. 183 00:11:43,320 --> 00:11:46,800 ‫Now you don't need to define them because these are different value. 184 00:11:47,190 --> 00:11:49,290 ‫Now if I save this one and get back here. 185 00:11:51,290 --> 00:11:58,090 ‫Now here you can see we took two second delay and then start moving, according to our animation state. 186 00:11:59,090 --> 00:12:02,230 ‫Now the interesting thing is we kind of find a lot of thing here. 187 00:12:02,240 --> 00:12:06,410 ‫Maybe we want to change the direction or anything if we can do that. 188 00:12:06,770 --> 00:12:11,990 ‫But then I want to do it later so we can have basic understanding of what this animation is. 189 00:12:13,360 --> 00:12:14,590 ‫I hope you got the idea. 190 00:12:14,620 --> 00:12:18,510 ‫Make sure to practice this one in the next lecture, let us know on something. 191 00:12:18,520 --> 00:12:24,970 ‫Let us try to make certain properties, let us try to create a small order and understand things in 192 00:12:24,970 --> 00:12:25,900 ‫a better manner. 193 00:12:26,440 --> 00:12:28,170 ‫So that's it for this lecture. 194 00:12:28,180 --> 00:12:30,940 ‫I hope you got the idea what we were trying to do. 195 00:12:31,660 --> 00:12:34,930 ‫Now you can control a lot of things that we will do and next one. 196 00:12:35,140 --> 00:12:38,530 ‫So thank you for following and I see you guys in the next one.