So I'll come back again in business and we're going to talk about Core Animation keyframe and that's
an animation that essentially moves an object from one cue frame to another one to another one to another
one as many of them as you might have.
And then you can decide about the timing between them.
You can choose to go slower at the beginning faster at the end or any other combination that you might
want to think of.
So to do that I'm actually going to go ahead and make a very simple project to demonstrate to you that's
score.
I'm going to start a new app called it.
See a core keyframe animation.
I mean here I'm going to go to the storyboard and I want to make an animation that when I press a button
a little object or maybe a I view passes through certain locations.
So here is the premise of what I'm doing here is a button that button I'm going to place it somewhere
up there.
I'm not going to worry about the constraints or anything like that and I'm going to call it animate
it.
So this is called zoom into it.
He made it and it has a background color such as this one.
So again see it's more distinctively then.
I have some locations.
So for each location I'm going to make a label label one here.
Here three here and maybe four of them would do.
And each of them is being going to be called something like one.
This one is called location tool.
This is location 3.
And this is location for now I'm using this approach even though this is not the best way of doing anything
you know animating simply because I don't want to add extra code to this process.
If you want to do this in a better way you should have an array of the locations and use that array
as your data essentially an animate based on that.
But for me here I'm only going to go ahead and use these labels as the locations that they want to pass
through.
What am I doing a little bit smaller.
And then I will have a UI view.
And this is the one I want to actually animate.
This is the one that is maybe 64 of 64 and it is red.
So I can actually see it clearly.
So this is my animated object.
If if you call it.
So let's go to the assistant though and in here let me close this like a little bit of space.
I'm going to go ahead and say I don't need any of those.
I actually don't need to view that lot so I'm going to get rid of it but I don't.
It is adding a function for animate.
So that's going to be an action called Antium action.
And then I need an outlet for the red box.
That's going to be called the red box and maybe duplicate these four times this find a label label you
or even you a label and this form I'm actually going to call them one
3 and 4.
Like I said not the best approach but very clear for what we are doing.
I'm going to go to your controller and say let's connect all of these guys together.
So in here I will have a for which I have to connected to for me.
Open the other window so it's easier.
So for connects to four and of course two connects the two to be connected to three and one connects
to one.
So now we have all of our outlets properly connected to the programming side.
Yes.
The first thing I need to do is I need to find the locations of all of these.
I'm going to have a large physician's array that's going to be an array of CGI points.
It is empathy by default.
And now once the view has been properly laid out and even though this is not the core topic of this
lesson it's a good thing that we ran into it.
Once you properly laid out.
You have to find positions that means you have to go to view it appear once the view has properly appeared.
I'm going to say positions array becomes one that's Center to data center to the data center.
And for that.
So once the view is properly laid out and then go ahead and get all the positions are not going to do
that on view that a lot.
And I forgot that in the view that you have to call this super that if you did appear so by now we have
all the positions.
Let's go ahead and see how you're going to actually animate them.
This is the function that we have to write the keyframe animation.
So the animations actually rather simple.
And then I say let animation to be a see a sheaf frame animation and that keyframe animation.
I'm going to have to give you the key parts.
I'm going to say the key part for it is our pound parts for eight years that position.
So I want to animate the position using See keyframe animation and then some time later.
And that's not happening just yet.
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
you want of your own.
I'm going to call it my animation because this is a key that we can use it for anything.
Once again this is a key.
Those are cheapass that they have to exist.
These are arbitrary values that we just are on our own and we can use them to for instance pause an
animation.
So now that animation is actually added to the red box we have to actually define what are the properties
of that animation.
I'm going to go ahead and say the first thing we need to know is we need to know when do these things
happen.
We know we have four positions that are going to happen.
But when do they happen.
So I'm going to say let's just call this one time well the times are it has to have four different positions
and one of them has to be zero at the very very beginning.
One of them has to be one at the end and then we have to have two more in between.
So the tween between them going to say let's have them go.
We're just slow at the beginning point eight and then point nine and one.
So between the first keyframe which is one and the second one which is to we're going to take point
eight of the time nearly 80 percent of the time then we get to the next one and the next one really
quickly.
So that part is taken care of.
I'm going to go ahead and say and them dart values become the values that we have in the positions array.
So they become the values in the positions.
And then we have an him Dot cheat times the times in which we want to run this animation becomes.
And here's an important thing.
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
number while my array is actually floats.
So I'm going to say give me the times array as an array of that and his numbers.
So I'm going to convert the floats into numbers on the fly.
So now you got the key times taking care if I need the animation duration and time duration.
It does give you the larger number so we can actually see the animation happening and then begin to
actually have an animation mode.
So I'm going to say I am not animation calculation mode which has to be a CTA animation calculation
mode and I'm going to see more of it.
Let's make it linear for now.
So that's all we had to do.
Introduce a new CAQ frame animation inside the body the times and locations inside the bar.
You ration and add it to whichever object that you want to add it to.
Let's go ahead and run this to see how it fares.
So now if a person animates by then it goes from one to two really slowly in point eight of the time
and then between those other two really quickly.
Now pay attention to something.
HALL It is going between one to two.
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
going to come in here and change the calculation type 2 cubic and let's see how it changes now.
Now pay attention of course between one to two goals and then comes down as if it is trying to make
a busy curve as it reaches each of the points.
So once again if you look at it it clearly shows that how it is going between the different points and
that's essentially what the calculation does for us linear simply means from this point to that point
go straight out Kubic obviously produces a more curved approach or more care of hats of animation.
So now there's something else you might be wondering about and that is how come I personally animate.
But then it goes from one to two to three to four.
And then it jumps like that used to be how come it doesn't stay around there.
Number four is that's something we have to do manually.
Also if you wanted to you could actually write the code to place it on top of one.
At the very beginning.
So let me do both of these in one go.
Essentially somebody to read it up here once they have all the positions I'm going to say Redbox Dart
Center becomes positions or a location zero.
So make sure that at the very beginning the moment the view appears you place the red box exactly where
one is.
So that's one part of the problem.
And if you run the application now we should see that happening right away.
You should see that the red box at the very beginning it is sitting exactly.
Number one is so that part is taken care of.
Now let's go to our animation and say an M dot delegate.
And he's of the type C animation delegate.
I'm going to say self so it's delegating it's animations to here.
And we have to add a protocol of C-8 animation delegate to it.
So my class view controller will have access to the methods from s.a.a animation delegate.
And one of those many methods is this one animation did a stop.
So here at the moment the animation stops.
It will make an announcement on what we want to do when there is this red box that center becomes positions
or a number three or better yet positions arrayed that count minus 1.
This is a more dynamic way of doing this and it makes sure that we get the last position.
So let's go ahead and rerun this one.
And now by these two methods by adding the first location and knowing the stopping point we should be
going between these and stay at the very end.
So we go from one to two to three to four and we stay there.
And that's about that.
So just the basic keyframe animation and let's move on to our next lesson.