Come back again we use Core Animation basics to do things such as running an animation pausing animation
or replaying animation or rewinding animation.
So in this example I'm going to show you how to make a very simple animation that you can actually pause
it.
At some point and then continue running that let's see how you can get that done.
Let's go to X.
I'm going to make a new app called Core Animation basics in thrall and Laysan is called BASIX is because
it's actually a term in there ARE CALLED see a basic animation of cool animation basic animation.
So to do that I'm going to go ahead into my storyboard and quickly make some basic outlet's the out
to say what are these.
First of all I want to have some buttons so I can actually control my animation.
I want to have a button that says pause let's call this one pause
before that actually.
I need another button which is a start before we can pause it.
It has to be started.
So I'm going to say start and then once it is paused I can say Give me a play.
You could of course mix and manage all of these Baden's within only one so that the icons they change
or anything that you know you can think of more creatively for me for the purpose of saving time.
I'm just going to make very simple volume's very simple text and then I'm going to go ahead and have
a label and this label essentially is going to have a sign on it like this one simply because I want
to know where I'm going to travel to where.
So where is my animation happening.
Let's say it is going from this location to location and that's just to show us the C-g point you can
think of that as essentially a crosshair that shows us where we are trying to beat.
And then I'm going to go ahead and say Give me a you I view this is the end he made table piece.
So this one is the one I'm going to make it read.
I'm going to say it is smaller maybe 64 by 64 and that's about it is going to be animated from this
point to that point.
Let's quickly go to a system later on.
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
here.
I don't need that perhaps in here I'm going to say this is a stalled action making sure it is of the
type action.
Similarly I'm going to call this one pause action again.
If he's action and then play or resume action play action read the box is going to be read books and
these two little locaters on what I call them start and locaters.
So this one is the store locator and this is the end.
OK.
So that's all we have to do in the Interface Builder.
We now have an application that has a main table piece an animated object or red box.
It has two locations a start on and for where the red box should be animated.
It has a function that begins the animation and then we have a function that is going to hopefully help
us pause the animation.
And if the animation was paused we will be able to resume it and start the play back once again.
So let's go ahead and get this thought that the everything that we have to do and let go to the thought
action and I'm going to say I want to have the very first core basic animation.
So I'm going to call this one let Perhaps position animation position on them and that's going to be
a core animation basic animation and then I'm going to give you the key parts and I'm going to call
the keypad position.
Now they have the position animation.
I could actually decide the bought it from and two values so I could say position and him Darth from
value is going to be my start location guard centers and then position and in DOD to value and these
values are any sort essentially you can feed any value to them as long as they fit the value you want
and this is have a little bit unsafe.
So you have to be careful about for instance to this value you don't feel that something like 10.0 float
value because even though it accepts it is going to crash your application.
So I'm going to say.
And location data center.
So that is my animation that they want to run.
And then I'm going to go ahead and say Redbox dot dot add the animation and the animation I want to
add is this position animation for a key and this one I'm going to call it pause on him for instance.
So we run the animation and we had the start action.
This animation should Iran irrelevant of what's going to happen in the pause or play.
Let's see if this works.
Up until here
and now if I go in here and press the Start button the start animating between these two locations which
is kind of what I expected to see.
I'm going to go over go and change something and that is I'm going to say position animation dot curation.
Let's make it 5 so we can actually see more are more weariedly we want to be able to see exactly you
know because right now it's happening within only one cycle.
I wasn't really feasible for me.
So a start is going to take it five seconds to go from one place to another.
And that really helps me be able to see the animation properly.
So so far we managed to have an animation that draws the horizon for essentially running it.
So now we need to go ahead and pause the animation.
If I go here to pause I can I could simply say this red box that lay here.
Does this speed make it zero.
And that simply means to stop the animation of what ever is happening at the Core Animation level at
the sea level pause it.
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
tell you why this is going to be so so if I press this thought and then pause is going to stop there.
But he's not going to stop.
Very easy then it's just going to pause it's summer.
Meet here essentially.
If we now press the Start button and let the animation run and then press the pause at some place it's
going to hit this speed to be zero and is going to push our red box back to where it used to be simply
because it doesn't know where in the animation we paused and that's something that we have to define
in the pause action.
We have to tell him how far of a set of the animation we are at.
So here I'm going to go ahead and say Redbox dot layer Dot time offset.
I'm going to make that to be cool and to redbox DOD later convert time convert time.
And for the combat time value of the interval we have to get the current time of the core animation
media.
So I'm going to say CA and that's going to be a kind of media time which is the current absolute time
and this is the point in time that we want to pause that commissioning.
So let's review it really quickly we are saying when you pause this time of offset get it from yourself
and stay there and don't run the animation anymore.
So now with that one you could go ahead to our simulator and we should be able to pause the Redbox where
it is in the middle of the animation.
So it's going there parts and the stops there.
Obviously if I play now nothing is going to happen.
And here is a trick question for you and I want you to think about it for a second.
What happens if I press the Start button.
If I pass this thought then it's going to jump over the store's location.
But he's not going to animate itself simply because this speed is still zero.
So let's go ahead and see how we can manage to play animation or play action in the play action.
The first thing we have to find out is how far off to the animation we are.
What is this value.
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
offset time offset.
So is going to be of the type C-f time interval.
So now I'm going to say Redbox not your speed.
First thing just make it one.
Dan let's go ahead and say there is no time I've said from this point on don't post it anywhere.
So when I say red box dot later time offset lets make it zero now simply because we don't want to offset
the time of the year to any specific point anymore.
What we want to do is you want to say Redbox DOD layer DOD again begin time but we have to set to begin
time to a certain time.
And this is a bit of a calculation that we have to do.
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.
We need to find out current absolute time.
And then from that kind of absolute time we have to subtract the pause time and that is the time that
we want to begin from.
Because for instance if your animation was paused for certain number of cycles that say 108 seconds
we have to start from after 100 seconds because that is how it is going to play the animation from the
point in time there is a pause.
So we have to get the current time and then subtract the post line from it and that time I'm going to
actually call it let time seems pause and time says force is going to be the same characterization again
we have to get the time again.
And now this is the time that we get.
And then from it we going to subtract paused time.
So this time is now the time since pause God represents the air in time we have to start the animation
to put this into a more numerical value.
Let's imagine that we pause at let's say 1000 cycles of absolute time value of 1000 cycles which is
not really the number but lets say we pause then.
So the value that we collected here was one thousand and that is very paused.
And then right now is 50 seconds later.
We waited for 15 seconds and we are rerunning.
So now is a 1050 science.
So what we should do for our box we have to say you have to begin that difference between these two
for you the difference between two is the 1050 minus 1000.
Its all like that.
You have to begin your animation from the time of 50 seconds which means you have to go back as much
as 50 seconds and find out where you were in that point.
And here is where you start your animation again.
So the Begin time becomes time seems false and we are on the app and if it all works we should be able
to see the animation running on posing properly.
A start pause play and it continues from there which is what we were hoping to see again start pause
play pause play pause.
It was too late.
Now the problem that they just created myself is I pressed the pause button when we were not playing.
So the speed is now set to zero.
So I'm going to have to say play and continue playing back.
These are things that you have to like on what if you're making a real application for instance at the
end of the play action or at the end of the animation action you have to reset the value of the red
box to be where you want it to be.
So many other things.
One other thing that I want to show you however is this.
You could actually have a singular animations such as this one or you could combine animations and here's
what I'm going to do with combining a few animations.
Let's say this copy this entire thing and then the new one I'm going to call it of background color
animation.
And for the keypad I'm going to write that around color.
Keep in mind that these values are not arbitrary.
You can just place any key that you want these kind of key are the ones that you can write whatever
you like but the key pads have to be existing values you can in fact actually infere the values from
actual see Aliah tributes.
So you could instead of saying background colors say I want to have a cheap shot keep me from see a
laser dot background color.
So like this we make sure that the keypad we're getting is exactly our belongs to the a layer and we
haven't made any spelling mistakes or anything of the sort.
So now we have to actually use the background color animation I'm going to say animation from value
goes from your eye color not red dot CEG color.
To you value you my color dot black dot C.G. color.
So we have another animation that goes from red to black for the background color.
And this one the diagram collimation.
I'm going to say the duration of it is five again.
And now I have to find a way to basically combine these two animations with each other I have to mix
them together and that will do it using something called an animation group.
So I'm going to say let's add human growth to become see a animation group.
So that's the group that I want to have and then I'm going to have to add to it whatever animation they
want I'm going to say on AM group dog animations which is asking for an array of core animations becomes
an array of paw's animation.
And the other one which is called Biji color animation.
And if you wanted to you could actually drop both of these durations and have only one duration for
the group on his own.
So you could say animation group that duration is five which essentially overwrites the animation for
both of these.
If they each had their own duration then Dave would override the group and they would work independently.
So we have that.
And of course Heidi and I have to say Redbox third layer that is sort of adding the position animation
I have to say animation group and for the key since I'm not using the Q could just keep anything that
you want if you don't want it to be confusing such as position animation.
Just call it animation and everything else is going to work the same as it was before a game.
My animation is going to find that where you are in time poses there and game is going to show it to
replay from that particular time.
McLean this court and this go back there the start it goes from red to black within five seconds as
it is traveling starts on pause somewhere in between.
Continue on goes all the way there with the same attributes as before.
So that's about it.
A very basic core animation basic animation and let's move on to our next.