1
00:00:01,420 --> 00:00:07,430
So I'll come back again in business and we're going to talk about Core Animation keyframe and that's

2
00:00:07,430 --> 00:00:13,140
an animation that essentially moves an object from one cue frame to another one to another one to another

3
00:00:13,140 --> 00:00:15,510
one as many of them as you might have.

4
00:00:15,660 --> 00:00:18,470
And then you can decide about the timing between them.

5
00:00:18,570 --> 00:00:24,570
You can choose to go slower at the beginning faster at the end or any other combination that you might

6
00:00:24,570 --> 00:00:25,460
want to think of.

7
00:00:25,680 --> 00:00:31,430
So to do that I'm actually going to go ahead and make a very simple project to demonstrate to you that's

8
00:00:31,670 --> 00:00:32,350
score.

9
00:00:32,630 --> 00:00:35,270
I'm going to start a new app called it.

10
00:00:35,450 --> 00:00:44,720
See a core keyframe animation.

11
00:00:44,790 --> 00:00:49,590
I mean here I'm going to go to the storyboard and I want to make an animation that when I press a button

12
00:00:49,690 --> 00:00:55,110
a little object or maybe a I view passes through certain locations.

13
00:00:55,120 --> 00:01:01,600
So here is the premise of what I'm doing here is a button that button I'm going to place it somewhere

14
00:01:01,600 --> 00:01:02,130
up there.

15
00:01:02,140 --> 00:01:07,720
I'm not going to worry about the constraints or anything like that and I'm going to call it animate

16
00:01:07,740 --> 00:01:08,370
it.

17
00:01:08,410 --> 00:01:12,970
So this is called zoom into it.

18
00:01:13,260 --> 00:01:19,800
He made it and it has a background color such as this one.

19
00:01:20,110 --> 00:01:22,920
So again see it's more distinctively then.

20
00:01:22,990 --> 00:01:24,390
I have some locations.

21
00:01:24,410 --> 00:01:29,750
So for each location I'm going to make a label label one here.

22
00:01:29,980 --> 00:01:33,460
Here three here and maybe four of them would do.

23
00:01:33,790 --> 00:01:38,150
And each of them is being going to be called something like one.

24
00:01:38,170 --> 00:01:41,940
This one is called location tool.

25
00:01:42,040 --> 00:01:44,510
This is location 3.

26
00:01:44,920 --> 00:01:51,760
And this is location for now I'm using this approach even though this is not the best way of doing anything

27
00:01:51,790 --> 00:01:56,710
you know animating simply because I don't want to add extra code to this process.

28
00:01:56,830 --> 00:02:02,320
If you want to do this in a better way you should have an array of the locations and use that array

29
00:02:02,320 --> 00:02:06,280
as your data essentially an animate based on that.

30
00:02:06,430 --> 00:02:12,070
But for me here I'm only going to go ahead and use these labels as the locations that they want to pass

31
00:02:12,070 --> 00:02:12,740
through.

32
00:02:12,860 --> 00:02:14,930
What am I doing a little bit smaller.

33
00:02:15,020 --> 00:02:17,820
And then I will have a UI view.

34
00:02:18,070 --> 00:02:20,450
And this is the one I want to actually animate.

35
00:02:20,470 --> 00:02:27,180
This is the one that is maybe 64 of 64 and it is red.

36
00:02:27,430 --> 00:02:30,580
So I can actually see it clearly.

37
00:02:30,580 --> 00:02:32,980
So this is my animated object.

38
00:02:32,990 --> 00:02:34,530
If if you call it.

39
00:02:34,600 --> 00:02:43,190
So let's go to the assistant though and in here let me close this like a little bit of space.

40
00:02:43,240 --> 00:02:46,060
I'm going to go ahead and say I don't need any of those.

41
00:02:46,360 --> 00:02:50,190
I actually don't need to view that lot so I'm going to get rid of it but I don't.

42
00:02:50,190 --> 00:02:53,580
It is adding a function for animate.

43
00:02:53,710 --> 00:03:00,300
So that's going to be an action called Antium action.

44
00:03:00,450 --> 00:03:03,060
And then I need an outlet for the red box.

45
00:03:04,320 --> 00:03:15,160
That's going to be called the red box and maybe duplicate these four times this find a label label you

46
00:03:15,160 --> 00:03:19,160
or even you a label and this form I'm actually going to call them one

47
00:03:22,360 --> 00:03:25,370
3 and 4.

48
00:03:25,650 --> 00:03:29,870
Like I said not the best approach but very clear for what we are doing.

49
00:03:30,210 --> 00:03:35,060
I'm going to go to your controller and say let's connect all of these guys together.

50
00:03:35,110 --> 00:03:41,190
So in here I will have a for which I have to connected to for me.

51
00:03:41,220 --> 00:03:43,380
Open the other window so it's easier.

52
00:03:43,530 --> 00:03:54,460
So for connects to four and of course two connects the two to be connected to three and one connects

53
00:03:54,460 --> 00:03:55,350
to one.

54
00:03:55,720 --> 00:04:00,900
So now we have all of our outlets properly connected to the programming side.

55
00:04:01,010 --> 00:04:01,670
Yes.

56
00:04:01,900 --> 00:04:06,510
The first thing I need to do is I need to find the locations of all of these.

57
00:04:06,550 --> 00:04:15,810
I'm going to have a large physician's array that's going to be an array of CGI points.

58
00:04:15,880 --> 00:04:18,620
It is empathy by default.

59
00:04:18,700 --> 00:04:25,060
And now once the view has been properly laid out and even though this is not the core topic of this

60
00:04:25,150 --> 00:04:27,930
lesson it's a good thing that we ran into it.

61
00:04:27,940 --> 00:04:30,420
Once you properly laid out.

62
00:04:30,440 --> 00:04:37,630
You have to find positions that means you have to go to view it appear once the view has properly appeared.

63
00:04:37,660 --> 00:04:47,630
I'm going to say positions array becomes one that's Center to data center to the data center.

64
00:04:48,010 --> 00:04:50,480
And for that.

65
00:04:50,830 --> 00:04:56,530
So once the view is properly laid out and then go ahead and get all the positions are not going to do

66
00:04:56,530 --> 00:04:58,320
that on view that a lot.

67
00:04:58,580 --> 00:05:06,520
And I forgot that in the view that you have to call this super that if you did appear so by now we have

68
00:05:06,520 --> 00:05:07,480
all the positions.

69
00:05:07,480 --> 00:05:11,250
Let's go ahead and see how you're going to actually animate them.

70
00:05:11,260 --> 00:05:15,300
This is the function that we have to write the keyframe animation.

71
00:05:15,550 --> 00:05:18,040
So the animations actually rather simple.

72
00:05:18,040 --> 00:05:27,330
And then I say let animation to be a see a sheaf frame animation and that keyframe animation.

73
00:05:27,340 --> 00:05:29,440
I'm going to have to give you the key parts.

74
00:05:29,440 --> 00:05:39,140
I'm going to say the key part for it is our pound parts for eight years that position.

75
00:05:39,280 --> 00:05:46,390
So I want to animate the position using See keyframe animation and then some time later.

76
00:05:46,420 --> 00:05:48,150
And that's not happening just yet.

77
00:05:48,160 --> 00:05:57,760
I'm going to have to say red marks dot dot and I want to add the animation called an M for any key that

78
00:05:57,820 --> 00:05:58,810
you want of your own.

79
00:05:58,810 --> 00:06:03,640
I'm going to call it my animation because this is a key that we can use it for anything.

80
00:06:03,670 --> 00:06:05,330
Once again this is a key.

81
00:06:05,330 --> 00:06:08,290
Those are cheapass that they have to exist.

82
00:06:08,440 --> 00:06:13,780
These are arbitrary values that we just are on our own and we can use them to for instance pause an

83
00:06:13,780 --> 00:06:14,820
animation.

84
00:06:14,890 --> 00:06:20,830
So now that animation is actually added to the red box we have to actually define what are the properties

85
00:06:20,830 --> 00:06:21,920
of that animation.

86
00:06:22,090 --> 00:06:26,770
I'm going to go ahead and say the first thing we need to know is we need to know when do these things

87
00:06:26,770 --> 00:06:27,490
happen.

88
00:06:27,520 --> 00:06:29,910
We know we have four positions that are going to happen.

89
00:06:29,980 --> 00:06:31,340
But when do they happen.

90
00:06:31,390 --> 00:06:39,160
So I'm going to say let's just call this one time well the times are it has to have four different positions

91
00:06:39,210 --> 00:06:42,770
and one of them has to be zero at the very very beginning.

92
00:06:42,790 --> 00:06:47,900
One of them has to be one at the end and then we have to have two more in between.

93
00:06:48,160 --> 00:06:51,200
So the tween between them going to say let's have them go.

94
00:06:51,220 --> 00:06:57,100
We're just slow at the beginning point eight and then point nine and one.

95
00:06:57,100 --> 00:07:04,600
So between the first keyframe which is one and the second one which is to we're going to take point

96
00:07:04,720 --> 00:07:10,540
eight of the time nearly 80 percent of the time then we get to the next one and the next one really

97
00:07:10,540 --> 00:07:11,530
quickly.

98
00:07:11,530 --> 00:07:13,320
So that part is taken care of.

99
00:07:13,390 --> 00:07:21,560
I'm going to go ahead and say and them dart values become the values that we have in the positions array.

100
00:07:21,610 --> 00:07:24,240
So they become the values in the positions.

101
00:07:24,580 --> 00:07:34,090
And then we have an him Dot cheat times the times in which we want to run this animation becomes.

102
00:07:34,450 --> 00:07:35,940
And here's an important thing.

103
00:07:35,950 --> 00:07:41,950
I don't know if you noticed it when we were going to write the key times it said it has to be in its

104
00:07:41,960 --> 00:07:45,520
number while my array is actually floats.

105
00:07:45,610 --> 00:07:53,460
So I'm going to say give me the times array as an array of that and his numbers.

106
00:07:53,500 --> 00:07:57,930
So I'm going to convert the floats into numbers on the fly.

107
00:07:57,970 --> 00:08:05,340
So now you got the key times taking care if I need the animation duration and time duration.

108
00:08:05,400 --> 00:08:10,320
It does give you the larger number so we can actually see the animation happening and then begin to

109
00:08:10,320 --> 00:08:12,140
actually have an animation mode.

110
00:08:12,160 --> 00:08:22,210
So I'm going to say I am not animation calculation mode which has to be a CTA animation calculation

111
00:08:22,220 --> 00:08:24,840
mode and I'm going to see more of it.

112
00:08:24,850 --> 00:08:26,990
Let's make it linear for now.

113
00:08:27,490 --> 00:08:29,710
So that's all we had to do.

114
00:08:29,710 --> 00:08:36,020
Introduce a new CAQ frame animation inside the body the times and locations inside the bar.

115
00:08:36,040 --> 00:08:41,120
You ration and add it to whichever object that you want to add it to.

116
00:08:41,350 --> 00:08:45,120
Let's go ahead and run this to see how it fares.

117
00:08:48,190 --> 00:08:54,800
So now if a person animates by then it goes from one to two really slowly in point eight of the time

118
00:08:55,010 --> 00:08:57,740
and then between those other two really quickly.

119
00:08:57,920 --> 00:08:59,860
Now pay attention to something.

120
00:08:59,860 --> 00:09:02,480
HALL It is going between one to two.

121
00:09:02,570 --> 00:09:09,200
It's going in a very linear way as if it's going directly from one to two and three and four then I'm

122
00:09:09,200 --> 00:09:16,690
going to come in here and change the calculation type 2 cubic and let's see how it changes now.

123
00:09:18,350 --> 00:09:27,350
Now pay attention of course between one to two goals and then comes down as if it is trying to make

124
00:09:27,410 --> 00:09:31,630
a busy curve as it reaches each of the points.

125
00:09:31,640 --> 00:09:39,020
So once again if you look at it it clearly shows that how it is going between the different points and

126
00:09:39,020 --> 00:09:45,140
that's essentially what the calculation does for us linear simply means from this point to that point

127
00:09:45,370 --> 00:09:53,870
go straight out Kubic obviously produces a more curved approach or more care of hats of animation.

128
00:09:53,900 --> 00:09:58,470
So now there's something else you might be wondering about and that is how come I personally animate.

129
00:09:58,490 --> 00:10:02,410
But then it goes from one to two to three to four.

130
00:10:02,630 --> 00:10:06,860
And then it jumps like that used to be how come it doesn't stay around there.

131
00:10:06,860 --> 00:10:10,190
Number four is that's something we have to do manually.

132
00:10:10,190 --> 00:10:14,090
Also if you wanted to you could actually write the code to place it on top of one.

133
00:10:14,090 --> 00:10:15,440
At the very beginning.

134
00:10:15,650 --> 00:10:18,330
So let me do both of these in one go.

135
00:10:18,450 --> 00:10:25,800
Essentially somebody to read it up here once they have all the positions I'm going to say Redbox Dart

136
00:10:25,820 --> 00:10:30,280
Center becomes positions or a location zero.

137
00:10:30,500 --> 00:10:36,800
So make sure that at the very beginning the moment the view appears you place the red box exactly where

138
00:10:37,010 --> 00:10:38,060
one is.

139
00:10:38,240 --> 00:10:40,040
So that's one part of the problem.

140
00:10:40,070 --> 00:10:43,920
And if you run the application now we should see that happening right away.

141
00:10:43,940 --> 00:10:48,720
You should see that the red box at the very beginning it is sitting exactly.

142
00:10:48,800 --> 00:10:52,000
Number one is so that part is taken care of.

143
00:10:52,010 --> 00:10:57,730
Now let's go to our animation and say an M dot delegate.

144
00:10:57,880 --> 00:11:01,190
And he's of the type C animation delegate.

145
00:11:01,190 --> 00:11:06,010
I'm going to say self so it's delegating it's animations to here.

146
00:11:06,110 --> 00:11:11,470
And we have to add a protocol of C-8 animation delegate to it.

147
00:11:11,720 --> 00:11:18,530
So my class view controller will have access to the methods from s.a.a animation delegate.

148
00:11:18,680 --> 00:11:27,000
And one of those many methods is this one animation did a stop.

149
00:11:27,020 --> 00:11:29,560
So here at the moment the animation stops.

150
00:11:29,570 --> 00:11:38,210
It will make an announcement on what we want to do when there is this red box that center becomes positions

151
00:11:38,200 --> 00:11:45,260
or a number three or better yet positions arrayed that count minus 1.

152
00:11:45,400 --> 00:11:51,140
This is a more dynamic way of doing this and it makes sure that we get the last position.

153
00:11:51,140 --> 00:11:52,950
So let's go ahead and rerun this one.

154
00:11:52,950 --> 00:12:00,830
And now by these two methods by adding the first location and knowing the stopping point we should be

155
00:12:00,830 --> 00:12:03,610
going between these and stay at the very end.

156
00:12:03,920 --> 00:12:09,800
So we go from one to two to three to four and we stay there.

157
00:12:10,210 --> 00:12:11,660
And that's about that.

158
00:12:11,660 --> 00:12:17,200
So just the basic keyframe animation and let's move on to our next lesson.