Come back again in this lesson we're going to talk about s.a.a transactions when you see a transactions
essentially to make different animations of the year happen simultaneously.
It is a way of making all the CA I Nations atomic So they happen at the same time at the same thread.
You could also add the UI view animations into the CIA turns action animation.
So it is a system for combining different animations.
It is often used for when you have a more complex set of animations happening.
So I'm going to go to school and starting your project I'm going to call this project C A transactions
and you might see a transaction.
I'm going to have to go to the a storyboard and add the one object for animating essentially that object
is going to be you I view.
I'm not going to change anything other than making it my on a more distinct color then I'm going to
go to my assistant window and I'm going to add an outlet for it.
I'm going to call that outlet to read the box.
That's all I'm going to do in this story.
Now let's go ahead to our viewer controllers 55 and in here I don't need to use that lot.
What they need is some sort of mechanism for running the animation and we usually use.
But then this time I want to use that touches.
And so every time the touch ends I want to run the animation.
So let's see what all those animations that I went on over on three animations.
I want to change the center of the object B.
I want to change the shadow color and see I want to change the corner radius.
So I want to change these three animations as we go through everything every cycle of the animation
essentially every time the touch ends we have to change these three.
So let's go ahead and get started with not before I can do these things particularly for the shadow
color.
I have to actually set up some things and the most important one of them is the shadow offset.
We should know where the shadow is going to be generated so to do that.
I'm going to go ahead and say that box dot layer dot shadow of said I'm going to put that as a CGI size
and the CGI size.
I'm going to put it to the left onto the bottom so minus 10 and maybe 20.
So to the left and to the bottom and that I'm going to say Red Box dark or dark shadow opacity and I'm
going to set that at maybe point 7 5.
So this is kind of my initial settings.
Now let's go ahead and get this started with actually animating using the see a transaction and the
way you see a transaction works is very similar to a basic view animation USACA transaction door to
begin.
And then you do a lot of things and then you say see a transaction that come out.
So that's essentially the block that you're right.
You start with that begin and then you do a comment and then between the two of them you decide about
the animations that you want to see.
So before I go ahead and do that let's do some settings for R-CA transaction.
I was going to say s.a.a transaction that said animation you ration.
Which is this one I they give it to seconds for instance and then I'm going to have to change my animation
timing function even though you don't have to.
But you know it's kind of optional thing that is useful to do it.
So that's going to be called animation timing function.
And if you're expecting me to give it a see a media timing function which I'm going to say it is based
on one that is named let's say linear or ease in or ease in and ease out.
So it's essentially the same thing as we have gone through before how you run your animation how you
ease in and out of different keyframes.
So once I have that that we get myself a little bit of a space so I have my s.a.a transaction it's basic
settings are ready it is ready to essentially come it or to launch and now have to give it the animations
that they want to see the first bit of animation is a view animation.
When I change the center so that's going to be a you if you animate.
And I'm going to use the animation that doesn't have a completion because I don't care about that let's
say into science let's do this animation self self dot the red box data center becomes self view dot
center.
So simply it goes and sits in a middle of the screen.
And that's really really simple.
Now let's go ahead and add two other animations for our lawyer.
One of them for the shadow color.
One of them for the corner radius.
So both of them are going to be rather simple.
I'm going to say let's corner on him and that's going to be a basic animation that's the basic animation
I usually have to get the cheap shot.
This time I'm not going to give it they keep either you will see you soon.
And I'm going to say quarter animation.
Of course you have to have it from you.
So it is a core animation.
Currently it is zero.
And I need the corner animation to value which again I have to give it to let's give with a really large
number maybe 50 so we can see it very clearly and then I'm going to see once this animation ended.
I want to have my red box dot dot corner radius to stay at 50.
Otherwise it would just jump back to being zero.
So I'm going to set that to be back to 50 and then I'm going to have to say Redbox dot dot dot.
I'm going to add the corner animation to it for the keypad.
And here's what I'm going to use the keypad on the keypad is going to be your the corner radius.
So this animation is now properly added to my red box.
Let's go ahead and I'm actually going to copy everything in here because I know he's going to be an
exactly similar thing except that this time it's called shadow shadow color on him and the shadow on
him and the keypad to it right.
Have the same keypad is it.
See a dark shadow color.
And then I'm going to see shadow color on him.
It's from body you is you white color dot black dot C.G. color its truth value is you white color dot
green perhaps dot C.G. color.
And at the end we have to say layer dark shadow color becomes green as well.
So I'm going to copy paste it there and then I'm going to say Red Box layer that shadow color animation.
And if you don't need a key part this time because we already have added up here.
So two different ways of adding animation depending on the keypad and obviously different from values
and two values.
And you have to keep in mind that the from and to is there kind of I don't know what kind of what type
of valuable you have to fit them.
So it's kind of unsafe but you have to be very careful with it.
And now we have a C-8 transaction animation with two values.
And if it all works when we go to our simulator every time that we head touches and we should see these
three animations happening at the same time.
Let's see if that's the case type and it's happening again it's happening of course you view animation
center is already there so that that's not really changing but everything else is beginning from those
values and ending at the same time.
And that is C.A. turns action a way to combine different primarily see Aliah animations but you could
also view animations in them as well.
Let's keep it up to here and let's move on to our next lesson.