Come back in this very first lesson of this section we're going to talk about view animations.
And these are the most basic types of animations we can use.
And even though they are basic they still get quite a lot done for us.
So let's go out into school and I'm going to start a new project I'm going to call it view animations
and for many of you animations I'm going to have two little blocks in my storyboard something I can
actually see in our morning meeting.
So I'm going to have a you I view this one
and another top down one maybe make it a little different color maybe red on this one the same an orange
one.
Let me add that two outlets for them.
The red box
and the other one is called the Orange Box.
And go back to my storyboard connect all of them properly.
That's my orange box and this is my red box.
And I also need to have a little action that's going to do my animation.
So action function animate and in my storyboard I'm going to go ahead and buy them.
This is going to be up here.
I'm not really worried about the graphical representation of my app because this app is meant to do
something else.
And in here it's as animate my animate has a white text color.
It also is connected to that action that we just made animate touch up inside.
That's about that.
Now let's go ahead and worry about all this action.
Once again I should mention that I speed through these parts because I know you already know how to
do them.
It might be a bit of a repetitious task for some of you might be still useful but I think for most of
us we don't really need to go to these anymore.
So here's the first thing I'm going to do.
I'm going to say you I view art begin animation and you can actually have an animation idea or a context
if you want to perhaps pause it or do something with an animation.
But I don't need to have any of those right now so I'm going to say both of these aren't.
And then the only really important animation property that you have to define is the animation duration.
So set animation duration too let's say to science and then you do all of your animations whatever you
want to happen between that and then I'm going to say you live you dot com it's animations and that's
all you have to do in here.
As simple as that.
So for me I'm going to go ahead and say let's go ahead and do some stuff in here.
First of all I'm going to go and say Redbox box center should become a new C.G. point which is not to
change it's X..
So X is going to be a red box data center that x y y value is going to be red box data center that Y
plus 400.
So wherever it used to be Pushit 400 points down.
And I'm going to do a very similar thing with the other one then I say Orange Box is going to be wherever
it used to be.
Maybe this time we go as much as 300.
A little bit less and let's see the animation.
Up until this point I'm going to run it on iPhone 8.
I should get rid of that simulator at some point.
I had to do a test for something totally different than I added a new simulator.
So here we should be able to press that button as an animation for both the red and the Orange Box animate.
Yes.
So they both end up getting that animation.
And of course every time we press it they're going to do the same thing because we haven't told it to
go to a specific place.
You have just told him to go.
And on top of the existing values.
Now here's a very interesting thing that you have to be mindful of you can't sit different animation
durations for different pieces of animation.
So you could essentially go ahead and select this one thing here and say Make it eight.
So if you're on this animation now as you can imagine the first piece of animation will happen within
two seconds.
The last the second one will happen within eight seconds.
And the red one has already landed in two seconds.
The orange one is taking its sweet time.
And that's about that.
So we managed to have a very basic animation.
There are so many options you can out for instance I could add an option for the animation pair of.
So you guys you got set animation curve which has you I view that animation curve Dot and I could go
on and say for instance it's linear.
For those of you who might have you know this might be the first time you are noticing something like
that animation colors essentially they refer to the way the animation plays out at the beginning or
at the end.
So linear means they goes with the same speed.
There is no acceleration or deceleration.
Essentially something like ease in it means whenever it's about to reach a keyframe.
In the Funimation let it ease into it or ease in and out means from both sides you have to have to do
the same thing.
I'm actually going to make most of these to be one of them to be actually ease in I'm going to make
use of them to have the same animation and the same duration but I'm going to make a UI of you animation
for that orange box to be linear hoping that we can actually see the difference between them.
So Lovatt I press to animate by then we will not it's not the red box will have an ease into animation
while the orange box will do everything in a linear mode.
So just do it yes.
As you can notice the orange one immediately starts moving one the red one takes a little while to get
the start.
OK.
So with that this is essentially a beginning and a very basic introduction on how to use you eye view
animations in the next lesson.
We'll talk about you or view animation blocks even like you mentioned but also a more advanced way of
doing things that is still a lot.
You can get done videos of these animations.
So give them a shot and then move on to the next lesson.