1
00:00:00,850 --> 00:00:08,290
Come back again we use Core Animation basics to do things such as running an animation pausing animation

2
00:00:08,650 --> 00:00:12,220
or replaying animation or rewinding animation.

3
00:00:12,220 --> 00:00:17,650
So in this example I'm going to show you how to make a very simple animation that you can actually pause

4
00:00:17,650 --> 00:00:17,820
it.

5
00:00:17,820 --> 00:00:23,190
At some point and then continue running that let's see how you can get that done.

6
00:00:23,230 --> 00:00:24,790
Let's go to X.

7
00:00:25,170 --> 00:00:34,780
I'm going to make a new app called Core Animation basics in thrall and Laysan is called BASIX is because

8
00:00:34,810 --> 00:00:41,430
it's actually a term in there ARE CALLED see a basic animation of cool animation basic animation.

9
00:00:41,620 --> 00:00:47,530
So to do that I'm going to go ahead into my storyboard and quickly make some basic outlet's the out

10
00:00:47,530 --> 00:00:49,030
to say what are these.

11
00:00:49,030 --> 00:00:54,210
First of all I want to have some buttons so I can actually control my animation.

12
00:00:54,220 --> 00:01:02,150
I want to have a button that says pause let's call this one pause

13
00:01:04,660 --> 00:01:06,040
before that actually.

14
00:01:06,070 --> 00:01:10,110
I need another button which is a start before we can pause it.

15
00:01:10,120 --> 00:01:11,450
It has to be started.

16
00:01:11,450 --> 00:01:17,750
So I'm going to say start and then once it is paused I can say Give me a play.

17
00:01:17,860 --> 00:01:24,370
You could of course mix and manage all of these Baden's within only one so that the icons they change

18
00:01:24,400 --> 00:01:30,850
or anything that you know you can think of more creatively for me for the purpose of saving time.

19
00:01:30,850 --> 00:01:36,460
I'm just going to make very simple volume's very simple text and then I'm going to go ahead and have

20
00:01:36,460 --> 00:01:43,840
a label and this label essentially is going to have a sign on it like this one simply because I want

21
00:01:43,840 --> 00:01:47,390
to know where I'm going to travel to where.

22
00:01:47,590 --> 00:01:49,780
So where is my animation happening.

23
00:01:49,780 --> 00:01:56,350
Let's say it is going from this location to location and that's just to show us the C-g point you can

24
00:01:56,350 --> 00:02:02,850
think of that as essentially a crosshair that shows us where we are trying to beat.

25
00:02:03,190 --> 00:02:09,310
And then I'm going to go ahead and say Give me a you I view this is the end he made table piece.

26
00:02:09,460 --> 00:02:12,270
So this one is the one I'm going to make it read.

27
00:02:12,730 --> 00:02:20,140
I'm going to say it is smaller maybe 64 by 64 and that's about it is going to be animated from this

28
00:02:20,140 --> 00:02:21,560
point to that point.

29
00:02:21,880 --> 00:02:24,490
Let's quickly go to a system later on.

30
00:02:24,670 --> 00:02:31,290
All of these I don't think I need my view at lot so I want to get through the Fifth right away and in

31
00:02:31,310 --> 00:02:31,850
here.

32
00:02:32,140 --> 00:02:40,270
I don't need that perhaps in here I'm going to say this is a stalled action making sure it is of the

33
00:02:40,270 --> 00:02:43,710
type action.

34
00:02:43,840 --> 00:02:49,920
Similarly I'm going to call this one pause action again.

35
00:02:49,960 --> 00:03:05,370
If he's action and then play or resume action play action read the box is going to be read books and

36
00:03:05,370 --> 00:03:10,180
these two little locaters on what I call them start and locaters.

37
00:03:10,260 --> 00:03:15,920
So this one is the store locator and this is the end.

38
00:03:15,980 --> 00:03:17,280
OK.

39
00:03:18,600 --> 00:03:22,550
So that's all we have to do in the Interface Builder.

40
00:03:22,560 --> 00:03:29,760
We now have an application that has a main table piece an animated object or red box.

41
00:03:29,760 --> 00:03:34,320
It has two locations a start on and for where the red box should be animated.

42
00:03:34,350 --> 00:03:40,260
It has a function that begins the animation and then we have a function that is going to hopefully help

43
00:03:40,260 --> 00:03:41,950
us pause the animation.

44
00:03:42,180 --> 00:03:49,710
And if the animation was paused we will be able to resume it and start the play back once again.

45
00:03:49,710 --> 00:03:54,780
So let's go ahead and get this thought that the everything that we have to do and let go to the thought

46
00:03:54,780 --> 00:03:59,650
action and I'm going to say I want to have the very first core basic animation.

47
00:03:59,760 --> 00:04:07,830
So I'm going to call this one let Perhaps position animation position on them and that's going to be

48
00:04:07,830 --> 00:04:14,550
a core animation basic animation and then I'm going to give you the key parts and I'm going to call

49
00:04:14,550 --> 00:04:16,760
the keypad position.

50
00:04:17,070 --> 00:04:19,440
Now they have the position animation.

51
00:04:19,440 --> 00:04:27,830
I could actually decide the bought it from and two values so I could say position and him Darth from

52
00:04:27,850 --> 00:04:41,300
value is going to be my start location guard centers and then position and in DOD to value and these

53
00:04:41,300 --> 00:04:49,390
values are any sort essentially you can feed any value to them as long as they fit the value you want

54
00:04:49,480 --> 00:04:51,970
and this is have a little bit unsafe.

55
00:04:51,970 --> 00:04:58,720
So you have to be careful about for instance to this value you don't feel that something like 10.0 float

56
00:04:58,720 --> 00:05:03,450
value because even though it accepts it is going to crash your application.

57
00:05:03,610 --> 00:05:04,390
So I'm going to say.

58
00:05:04,510 --> 00:05:06,990
And location data center.

59
00:05:07,420 --> 00:05:10,530
So that is my animation that they want to run.

60
00:05:10,780 --> 00:05:23,140
And then I'm going to go ahead and say Redbox dot dot add the animation and the animation I want to

61
00:05:23,150 --> 00:05:33,400
add is this position animation for a key and this one I'm going to call it pause on him for instance.

62
00:05:33,430 --> 00:05:37,480
So we run the animation and we had the start action.

63
00:05:37,570 --> 00:05:43,160
This animation should Iran irrelevant of what's going to happen in the pause or play.

64
00:05:43,330 --> 00:05:44,590
Let's see if this works.

65
00:05:44,590 --> 00:05:45,300
Up until here

66
00:05:48,470 --> 00:05:55,670
and now if I go in here and press the Start button the start animating between these two locations which

67
00:05:55,670 --> 00:05:58,030
is kind of what I expected to see.

68
00:05:58,070 --> 00:06:05,380
I'm going to go over go and change something and that is I'm going to say position animation dot curation.

69
00:06:05,690 --> 00:06:11,920
Let's make it 5 so we can actually see more are more weariedly we want to be able to see exactly you

70
00:06:11,930 --> 00:06:14,830
know because right now it's happening within only one cycle.

71
00:06:15,050 --> 00:06:17,190
I wasn't really feasible for me.

72
00:06:17,210 --> 00:06:21,510
So a start is going to take it five seconds to go from one place to another.

73
00:06:21,740 --> 00:06:26,060
And that really helps me be able to see the animation properly.

74
00:06:26,180 --> 00:06:33,370
So so far we managed to have an animation that draws the horizon for essentially running it.

75
00:06:33,560 --> 00:06:37,390
So now we need to go ahead and pause the animation.

76
00:06:37,550 --> 00:06:42,950
If I go here to pause I can I could simply say this red box that lay here.

77
00:06:43,040 --> 00:06:45,720
Does this speed make it zero.

78
00:06:46,070 --> 00:06:52,600
And that simply means to stop the animation of what ever is happening at the Core Animation level at

79
00:06:52,600 --> 00:06:54,550
the sea level pause it.

80
00:06:54,830 --> 00:07:00,650
And that is kind of going to work for us but not exactly how we we're hoping is going to be and I will

81
00:07:00,650 --> 00:07:08,020
tell you why this is going to be so so if I press this thought and then pause is going to stop there.

82
00:07:08,080 --> 00:07:09,350
But he's not going to stop.

83
00:07:09,350 --> 00:07:13,420
Very easy then it's just going to pause it's summer.

84
00:07:13,710 --> 00:07:16,190
Meet here essentially.

85
00:07:16,380 --> 00:07:22,470
If we now press the Start button and let the animation run and then press the pause at some place it's

86
00:07:22,470 --> 00:07:28,140
going to hit this speed to be zero and is going to push our red box back to where it used to be simply

87
00:07:28,140 --> 00:07:33,840
because it doesn't know where in the animation we paused and that's something that we have to define

88
00:07:33,870 --> 00:07:35,280
in the pause action.

89
00:07:35,280 --> 00:07:40,200
We have to tell him how far of a set of the animation we are at.

90
00:07:40,230 --> 00:07:47,440
So here I'm going to go ahead and say Redbox dot layer Dot time offset.

91
00:07:47,790 --> 00:07:57,790
I'm going to make that to be cool and to redbox DOD later convert time convert time.

92
00:07:58,740 --> 00:08:05,310
And for the combat time value of the interval we have to get the current time of the core animation

93
00:08:05,310 --> 00:08:06,070
media.

94
00:08:06,210 --> 00:08:15,030
So I'm going to say CA and that's going to be a kind of media time which is the current absolute time

95
00:08:15,030 --> 00:08:18,920
and this is the point in time that we want to pause that commissioning.

96
00:08:19,050 --> 00:08:25,380
So let's review it really quickly we are saying when you pause this time of offset get it from yourself

97
00:08:25,440 --> 00:08:29,200
and stay there and don't run the animation anymore.

98
00:08:29,430 --> 00:08:36,480
So now with that one you could go ahead to our simulator and we should be able to pause the Redbox where

99
00:08:36,480 --> 00:08:38,930
it is in the middle of the animation.

100
00:08:39,120 --> 00:08:42,380
So it's going there parts and the stops there.

101
00:08:42,450 --> 00:08:45,090
Obviously if I play now nothing is going to happen.

102
00:08:45,150 --> 00:08:48,960
And here is a trick question for you and I want you to think about it for a second.

103
00:08:48,960 --> 00:08:51,450
What happens if I press the Start button.

104
00:08:52,570 --> 00:08:56,190
If I pass this thought then it's going to jump over the store's location.

105
00:08:56,200 --> 00:09:00,990
But he's not going to animate itself simply because this speed is still zero.

106
00:09:01,330 --> 00:09:06,640
So let's go ahead and see how we can manage to play animation or play action in the play action.

107
00:09:06,640 --> 00:09:10,960
The first thing we have to find out is how far off to the animation we are.

108
00:09:11,020 --> 00:09:12,310
What is this value.

109
00:09:12,310 --> 00:09:23,530
So I'm going to say let's just call it of pause the time that is going to be red box dot layer Dot time

110
00:09:23,620 --> 00:09:25,680
offset time offset.

111
00:09:25,750 --> 00:09:30,200
So is going to be of the type C-f time interval.

112
00:09:30,520 --> 00:09:35,170
So now I'm going to say Redbox not your speed.

113
00:09:35,500 --> 00:09:38,400
First thing just make it one.

114
00:09:38,400 --> 00:09:44,720
Dan let's go ahead and say there is no time I've said from this point on don't post it anywhere.

115
00:09:44,920 --> 00:09:54,160
So when I say red box dot later time offset lets make it zero now simply because we don't want to offset

116
00:09:54,160 --> 00:09:57,770
the time of the year to any specific point anymore.

117
00:09:57,970 --> 00:10:07,300
What we want to do is you want to say Redbox DOD layer DOD again begin time but we have to set to begin

118
00:10:07,300 --> 00:10:09,140
time to a certain time.

119
00:10:09,160 --> 00:10:12,820
And this is a bit of a calculation that we have to do.

120
00:10:13,030 --> 00:10:18,550
But if they go I'm going to write it for you what they need to do and then I'm going to do the calculation.

121
00:10:18,690 --> 00:10:23,470
We need to find out current absolute time.

122
00:10:23,740 --> 00:10:30,100
And then from that kind of absolute time we have to subtract the pause time and that is the time that

123
00:10:30,100 --> 00:10:31,710
we want to begin from.

124
00:10:31,780 --> 00:10:37,990
Because for instance if your animation was paused for certain number of cycles that say 108 seconds

125
00:10:38,380 --> 00:10:44,800
we have to start from after 100 seconds because that is how it is going to play the animation from the

126
00:10:44,800 --> 00:10:46,960
point in time there is a pause.

127
00:10:47,110 --> 00:10:52,870
So we have to get the current time and then subtract the post line from it and that time I'm going to

128
00:10:52,870 --> 00:11:01,740
actually call it let time seems pause and time says force is going to be the same characterization again

129
00:11:01,750 --> 00:11:03,510
we have to get the time again.

130
00:11:03,520 --> 00:11:06,880
And now this is the time that we get.

131
00:11:07,180 --> 00:11:11,430
And then from it we going to subtract paused time.

132
00:11:11,720 --> 00:11:20,750
So this time is now the time since pause God represents the air in time we have to start the animation

133
00:11:21,050 --> 00:11:23,380
to put this into a more numerical value.

134
00:11:23,390 --> 00:11:32,390
Let's imagine that we pause at let's say 1000 cycles of absolute time value of 1000 cycles which is

135
00:11:32,450 --> 00:11:35,690
not really the number but lets say we pause then.

136
00:11:35,750 --> 00:11:40,350
So the value that we collected here was one thousand and that is very paused.

137
00:11:40,590 --> 00:11:43,460
And then right now is 50 seconds later.

138
00:11:43,460 --> 00:11:46,420
We waited for 15 seconds and we are rerunning.

139
00:11:46,590 --> 00:11:49,660
So now is a 1050 science.

140
00:11:49,790 --> 00:11:56,140
So what we should do for our box we have to say you have to begin that difference between these two

141
00:11:56,150 --> 00:12:00,800
for you the difference between two is the 1050 minus 1000.

142
00:12:00,880 --> 00:12:02,330
Its all like that.

143
00:12:02,450 --> 00:12:09,050
You have to begin your animation from the time of 50 seconds which means you have to go back as much

144
00:12:09,050 --> 00:12:12,970
as 50 seconds and find out where you were in that point.

145
00:12:13,010 --> 00:12:15,690
And here is where you start your animation again.

146
00:12:15,860 --> 00:12:22,640
So the Begin time becomes time seems false and we are on the app and if it all works we should be able

147
00:12:22,640 --> 00:12:26,170
to see the animation running on posing properly.

148
00:12:26,350 --> 00:12:34,850
A start pause play and it continues from there which is what we were hoping to see again start pause

149
00:12:34,940 --> 00:12:38,060
play pause play pause.

150
00:12:38,150 --> 00:12:39,950
It was too late.

151
00:12:40,130 --> 00:12:46,160
Now the problem that they just created myself is I pressed the pause button when we were not playing.

152
00:12:46,160 --> 00:12:48,360
So the speed is now set to zero.

153
00:12:48,470 --> 00:12:51,740
So I'm going to have to say play and continue playing back.

154
00:12:51,740 --> 00:12:56,390
These are things that you have to like on what if you're making a real application for instance at the

155
00:12:56,390 --> 00:13:02,720
end of the play action or at the end of the animation action you have to reset the value of the red

156
00:13:02,720 --> 00:13:05,180
box to be where you want it to be.

157
00:13:05,210 --> 00:13:06,660
So many other things.

158
00:13:06,690 --> 00:13:10,220
One other thing that I want to show you however is this.

159
00:13:10,220 --> 00:13:16,400
You could actually have a singular animations such as this one or you could combine animations and here's

160
00:13:16,400 --> 00:13:20,070
what I'm going to do with combining a few animations.

161
00:13:20,090 --> 00:13:26,930
Let's say this copy this entire thing and then the new one I'm going to call it of background color

162
00:13:26,990 --> 00:13:27,870
animation.

163
00:13:28,040 --> 00:13:32,660
And for the keypad I'm going to write that around color.

164
00:13:32,690 --> 00:13:35,870
Keep in mind that these values are not arbitrary.

165
00:13:35,870 --> 00:13:41,810
You can just place any key that you want these kind of key are the ones that you can write whatever

166
00:13:41,810 --> 00:13:48,830
you like but the key pads have to be existing values you can in fact actually infere the values from

167
00:13:48,920 --> 00:13:51,110
actual see Aliah tributes.

168
00:13:51,200 --> 00:14:01,370
So you could instead of saying background colors say I want to have a cheap shot keep me from see a

169
00:14:01,370 --> 00:14:04,830
laser dot background color.

170
00:14:05,180 --> 00:14:12,200
So like this we make sure that the keypad we're getting is exactly our belongs to the a layer and we

171
00:14:12,200 --> 00:14:16,000
haven't made any spelling mistakes or anything of the sort.

172
00:14:16,580 --> 00:14:22,520
So now we have to actually use the background color animation I'm going to say animation from value

173
00:14:22,880 --> 00:14:28,650
goes from your eye color not red dot CEG color.

174
00:14:29,360 --> 00:14:35,550
To you value you my color dot black dot C.G. color.

175
00:14:35,630 --> 00:14:42,960
So we have another animation that goes from red to black for the background color.

176
00:14:43,370 --> 00:14:45,790
And this one the diagram collimation.

177
00:14:45,830 --> 00:14:49,180
I'm going to say the duration of it is five again.

178
00:14:49,370 --> 00:14:54,590
And now I have to find a way to basically combine these two animations with each other I have to mix

179
00:14:54,590 --> 00:14:59,020
them together and that will do it using something called an animation group.

180
00:14:59,180 --> 00:15:06,220
So I'm going to say let's add human growth to become see a animation group.

181
00:15:06,260 --> 00:15:12,140
So that's the group that I want to have and then I'm going to have to add to it whatever animation they

182
00:15:12,140 --> 00:15:21,710
want I'm going to say on AM group dog animations which is asking for an array of core animations becomes

183
00:15:21,710 --> 00:15:24,790
an array of paw's animation.

184
00:15:24,990 --> 00:15:29,020
And the other one which is called Biji color animation.

185
00:15:29,150 --> 00:15:35,690
And if you wanted to you could actually drop both of these durations and have only one duration for

186
00:15:35,690 --> 00:15:37,380
the group on his own.

187
00:15:37,430 --> 00:15:43,880
So you could say animation group that duration is five which essentially overwrites the animation for

188
00:15:43,880 --> 00:15:44,810
both of these.

189
00:15:45,020 --> 00:15:52,040
If they each had their own duration then Dave would override the group and they would work independently.

190
00:15:52,130 --> 00:15:53,450
So we have that.

191
00:15:53,450 --> 00:15:59,990
And of course Heidi and I have to say Redbox third layer that is sort of adding the position animation

192
00:16:00,320 --> 00:16:06,830
I have to say animation group and for the key since I'm not using the Q could just keep anything that

193
00:16:06,830 --> 00:16:10,910
you want if you don't want it to be confusing such as position animation.

194
00:16:10,960 --> 00:16:16,430
Just call it animation and everything else is going to work the same as it was before a game.

195
00:16:16,450 --> 00:16:22,000
My animation is going to find that where you are in time poses there and game is going to show it to

196
00:16:22,210 --> 00:16:24,920
replay from that particular time.

197
00:16:25,150 --> 00:16:33,430
McLean this court and this go back there the start it goes from red to black within five seconds as

198
00:16:33,430 --> 00:16:37,970
it is traveling starts on pause somewhere in between.

199
00:16:38,050 --> 00:16:43,510
Continue on goes all the way there with the same attributes as before.

200
00:16:43,510 --> 00:16:44,580
So that's about it.

201
00:16:44,590 --> 00:16:50,480
A very basic core animation basic animation and let's move on to our next.