Time again we use animation blocks to block every piece of our animation inside of one block of code
which gives us a lot of flexibility in controlling the animation as well as knowing when the animation
ends.
So let's go ahead and see that in ex-cult.
I want to go ahead and start a new application called animation block
and I have to make the same set of outlets again and I apologize for that.
I know for a lot of you is repetitious but I just might be.
I actually know there are users who would watch these lessons in all their eyes so they wouldn't really
know where things are happening so that's why I have to kind of read these things every time.
So that's that.
I'll try my best to make it as fast as I can.
You I view.
Let's say this is going to be the read the one.
So this is the read view.
This one is the orange.
Just like the last time and this time I'm going to use the assistant editor.
So maybe this time it would happen a little bit faster.
So red box.
And then after the red box I have the orange box and then after those I will have my own innate function
animate action and that's an action that's about it.
So we have all of these now and when we go back to my shift file and here is how you build that animation
block essentially.
So let me get myself a little bit of formatting you I view dot animate duration of let's say two science
and animations and a closure and the animation that I want to use is I want to have Redbox data center
to become CGI point of the two values just like the last time.
I'm going to say red box center should become red box Start center dot X and red marks dot center dot
y.
Plus let's say 300 Let's run this animation see what we get up until this point.
We are a very important point.
I totally forgot we are retaining a closure.
So we have to use the self in here.
So it says using a red box with closure you need to make it make sense for it.
So self self self.
So then let's go ahead and run it.
And now if I press the animate but then my red box essentially does that animation.
So that's the basic animation block.
Let's go ahead and then other animation block which does things a little differently.
I'm going to say you got animate and this time I'm going to use the animate Vitt duration as well as
completion.
So this is very soon of the previous one.
It gets a time let's say two cycads it has an animation set.
We want to do something and it has a completion set.
So here's how we're going to use that.
And when I actually get myself a little better for my gear so they can see things easier and Mikol the
result result for instance.
And I want to push all of these a little bit further around there.
This format thing usually it's quite important so that you know how things are happening essentially.
So this first part is obviously our animation block.
Let's say you want to have orange box dot Alfar to become a point too.
So you want to become almost transparent.
And I have to mention self again I forgot.
So self that orange box that Althorp becomes 0.2.
And then in the closure of the compilation I want to know when the animation ended.
So when the animation ends in the two seconds are gone I wanted to print that for me.
I went to see Prince animation is done.
And let's run this application.
So this time when I press and now we got that little text saying animation is done this changed he said
it'll be so it makes more sense.
Right.
So I'm going to say when the animation runs when the orange box Alfar changes to point to when it is
done.
Let's run this or that animation and then cut that out.
Place it here and I don't see the first animation block anymore.
So my new animation does this in two seconds runs our animation of making that orange box out for becoming
somehow transparent.
Once it is done it makes the red box push down.
So let's enjoy the game now the way will work right now is when I press the animate button it's going
to make the Orange Box almost disappear within two seconds.
And then in a split second the red box is going to jump down.
There's the red box is not going to animate itself simply because we really didn't call for another
animation here.
Let's see animate disappears.
It jumps down there.
Now if you wanted the red box to also animate we had to have another animation block.
So let's go ahead and do that.
Let me reformat everything as much as I can.
So I have more space.
So this is the animation block maybe I make it like that.
So it's a bit easier to see.
Even though it really isn't.
Now here in the completion block I'm going to save you my view that animate without a completion this
time.
And the animation this time is let's say three seconds and the animation I want to see is this the red
box doing something.
Let me reformat everything again.
It becomes a little bit of a messy code.
I'm not really happy with that myself if you ask me.
But unfortunately it is how it is.
You could manually try to move things.
You could actually try to push things back like this and like that which is something I usually do but
I keep an eye on you know where things are actually happening.
The auto format itself makes it something like that which is not the most expert artery situation.
So if I run it now this time for every person that I made the orange box disappears then the red box
moves let's see orange box disappearance and then the red one moves through.
And that's a basic introduction on how to use animation blocks.
There are multiple different ways of using animation blocks most notable ones or with animation as well
as a completion block which helps you know when the animation ended.
And on that basis you can decide something else.
So just keep it up to here and move on to our next.