1 00:00:00,640 --> 00:00:03,070 So will come back again in this exercise. 2 00:00:03,070 --> 00:00:09,010 You have to use what you have learned from both of you animations as well as the animation blocks or 3 00:00:09,100 --> 00:00:14,770 either of them that you think you can manage it to make an animation loop the animation loop is essentially 4 00:00:14,770 --> 00:00:20,740 something that you have a little you eye view or any kind of outlet that passes through the screen over 5 00:00:20,740 --> 00:00:25,930 and over and over every time it goes from left to right and it reaches the right side of the screen 6 00:00:26,230 --> 00:00:30,150 then jumps by the beginning and read does the exact same thing. 7 00:00:30,160 --> 00:00:33,420 Let me show you what they mean in the actual simulator. 8 00:00:33,430 --> 00:00:39,520 This is the animation loop that I wanted to produce a little UI view as code red box that goes from 9 00:00:39,520 --> 00:00:42,160 left to right continuously. 10 00:00:42,160 --> 00:00:44,180 So keep that in mind. 11 00:00:44,200 --> 00:00:50,290 Pause the video if you want to and give it a try and then if you want it you can have a look at my solution 12 00:00:50,320 --> 00:00:50,860 as well. 13 00:00:55,930 --> 00:00:56,360 OK. 14 00:00:56,430 --> 00:01:03,180 So I'm going to start those then I'm going to go to ex-school make your project called animation. 15 00:01:05,140 --> 00:01:08,240 And in my estimation look the only thing I need in this story. 16 00:01:08,250 --> 00:01:10,280 What is the red box. 17 00:01:10,350 --> 00:01:12,690 So that's going to be a you view. 18 00:01:13,020 --> 00:01:21,690 I'm going to make it maybe 128 by one hundred twenty eight points and a bank on that is right load up 19 00:01:21,690 --> 00:01:27,430 my assistant and say this is red X. 20 00:01:27,510 --> 00:01:32,090 That's essentially all I have to do in the visual side of the mouth. 21 00:01:32,340 --> 00:01:40,620 So here is how I'm thinking of doing this animation and thinking of resetting the position to the utmost 22 00:01:40,710 --> 00:01:44,490 left running animation. 23 00:01:46,820 --> 00:01:51,440 Once animation is done the reset again. 24 00:01:51,820 --> 00:01:54,380 So I want to do this process over and over. 25 00:01:54,380 --> 00:02:01,310 So I want to reset the position of this red box to the utmost left corner of the screen then the animation 26 00:02:01,730 --> 00:02:05,220 until the utmost right. 27 00:02:05,790 --> 00:02:09,640 Then once it is done I want to reset. 28 00:02:09,680 --> 00:02:13,440 So when I reset the get to the left we run the animation. 29 00:02:13,490 --> 00:02:14,690 We get that right. 30 00:02:14,840 --> 00:02:19,060 Then we reset and we keep doing this over and over and over. 31 00:02:19,070 --> 00:02:21,470 So let's go ahead and write all of these. 32 00:02:21,470 --> 00:02:26,840 In our programming language as opposed to our literal language. 33 00:02:27,110 --> 00:02:34,580 So here I'm going to go ahead and say I have a function called reset and my reset function does this 34 00:02:34,670 --> 00:02:42,230 says red box dot center becomes a C.G. point of two values. 35 00:02:42,350 --> 00:02:43,710 One of those values. 36 00:02:43,730 --> 00:02:46,280 Why is the one they don't want to change. 37 00:02:46,280 --> 00:02:52,310 Red Box dot center dot why the X-File you however wants to become 0. 38 00:02:52,340 --> 00:02:55,580 It wants to go to the most left corner of the screen. 39 00:02:55,730 --> 00:03:04,610 So that's the reset one and have another function function called animate and my animated DAW's this 40 00:03:06,080 --> 00:03:11,040 and we get a better formatting up every function by default is void. 41 00:03:11,090 --> 00:03:14,030 So you could either keep it here or drop it. 42 00:03:14,240 --> 00:03:17,680 Essentially this one and Gathorne are exactly the same thing. 43 00:03:17,690 --> 00:03:20,060 They both have no returns. 44 00:03:20,330 --> 00:03:27,530 So in the animate I'm going to say you I you dot animate with completion let's say within two seconds 45 00:03:28,080 --> 00:03:39,410 I want to do an animation of making the red box Center to become CGU point of these values and the values 46 00:03:39,440 --> 00:03:41,440 are these X doesn't. 47 00:03:41,600 --> 00:03:45,250 So why doesn't change so the why is it stays there. 48 00:03:46,100 --> 00:03:52,020 X however become self taught to view that frame. 49 00:03:52,130 --> 00:04:01,250 Dr. V so x essentially goes as far right to the utmost right side of the screen. 50 00:04:01,520 --> 00:04:03,050 Why the red boxes. 51 00:04:03,080 --> 00:04:05,340 Why doesn't change the center. 52 00:04:05,540 --> 00:04:13,610 Why it stays intact essentially I should remember using self more often and then at completion when 53 00:04:13,610 --> 00:04:17,600 the completion happens I want to say reset again. 54 00:04:17,660 --> 00:04:26,120 So reset let's look back at all the code once again at the beginning of the animation was the beginning 55 00:04:26,120 --> 00:04:27,120 of the application. 56 00:04:27,140 --> 00:04:29,070 I'm going to say reset. 57 00:04:29,630 --> 00:04:37,730 So when I reset we go all the way to the left side of the screen but we don't begin the animation since 58 00:04:37,730 --> 00:04:38,690 we don't do that. 59 00:04:38,690 --> 00:04:43,790 And when I say well do a self Da'ath animate. 60 00:04:43,880 --> 00:04:50,930 So at the very beginning we go all the way to the zero and I start animating when the animation happens. 61 00:04:50,990 --> 00:04:53,890 The animation goes through the when it completes. 62 00:04:53,900 --> 00:04:57,710 And when I say self that reset valuation. 63 00:04:57,770 --> 00:05:06,620 So the research takes us to the left animate animates us to the right and then resets and that's all 64 00:05:06,620 --> 00:05:08,010 we have to do for here. 65 00:05:08,270 --> 00:05:11,820 Go ahead and run this see Forget what you are hoping to get. 66 00:05:14,720 --> 00:05:15,740 That's about that. 67 00:05:15,740 --> 00:05:24,200 Now if you want to be super careful you would actually account for the sides of the red box to completely 68 00:05:24,200 --> 00:05:26,630 disappear and then reappear. 69 00:05:26,630 --> 00:05:28,560 So I can show you how you could do that. 70 00:05:28,580 --> 00:05:31,200 Let me show you how to do that for the reset. 71 00:05:31,220 --> 00:05:39,700 I'm going to say go back to the left as much as the weight of the red box divided by two. 72 00:05:39,860 --> 00:05:41,780 And in the negative direction. 73 00:05:41,840 --> 00:05:50,830 So does that mean it means negative red box dot frame size dot net divided by two. 74 00:05:51,050 --> 00:05:58,750 So Pushit to the left as much as one half beat as well to the left and for the animate. 75 00:05:58,760 --> 00:06:02,110 I'm going to go ahead and say Let me get myself a little more space. 76 00:06:02,150 --> 00:06:06,730 Say go to the furtherest point on the screen. 77 00:06:06,810 --> 00:06:11,990 But that's going to be the center of the red box not the left corner of it. 78 00:06:12,100 --> 00:06:17,680 When I say add a little value to it self read box. 79 00:06:17,690 --> 00:06:25,560 I remember to solve this time frame dot sized dot vet divided by two. 80 00:06:25,700 --> 00:06:33,530 So when you go with the left subtract one half with as well for you go to the right and one half with 81 00:06:33,650 --> 00:06:34,430 as well. 82 00:06:34,430 --> 00:06:35,720 So let's see it again. 83 00:06:39,310 --> 00:06:40,340 Yes. 84 00:06:41,260 --> 00:06:43,670 That's exactly how I want it to be. 85 00:06:43,870 --> 00:06:45,790 So that's a very simple exercise. 86 00:06:45,790 --> 00:06:52,060 It shows you a lot of things about how to combine a lot of the code that we all really have learned 87 00:06:52,060 --> 00:06:55,450 because that's most of what programming is about. 88 00:06:55,460 --> 00:07:01,840 It's not about this groundbreaking finding some weird new technology is about knowing how to use the 89 00:07:01,840 --> 00:07:04,390 things you already know properly. 90 00:07:04,570 --> 00:07:07,240 So let's move on to our next lesson.