So will come back again in this exercise.
You have to develop an application very user can draw one animation pad and then an object gets animated.
True that pass let me show you the final product because I've actually already developed it.
So this is the application that they have.
And in it I have a record unpause unplausible and an animator by then.
So if I want a record I can actually draw upon it whichever way I want.
Let's say this one.
And then I can stop the recording.
I can say animate and the ball gets animated Trudeau's points because I have recorded locations.
So that's kind of what you have to do.
An animation recorder based on where your user taps or their touch move is in a more technical term.
So good luck with it.
Pause the video now give it a shot on your own and then have a look at my solution as well.
I'm going to pause here for just a few seconds
OK.
Let's go ahead and start the next call.
I'm going to going here on a start a new project I'm going to call it the role that animation and it
might do all parts animation.
The first thing I have to do is I have to head to a storyboard and design the basics of the interfacing
here.
So the basics are this.
I have a view that's going to be the animating canvas essentially.
So I'm going to place it here maybe make the background a little bit of a different color such as a
light gray so you can see things easier.
Then I have another view here which I'm going to make it red that's going to be the ball.
Of course you have to change his corner radius in the court.
You could very well may can I be desirable view but I'm not going to bother with that.
So we have the ball in here and then we have to Baden's one by then we'll be
this is essentially my brother then that of course animation is so cool and I'm going to make it black
and I defend Bangon color.
Maybe if it is not recording maybe leave it orange and then I'll have another by then.
And this why that essentially animates based on whatever we have.
So this is called Me and that's all I have to do for my story.
So let's go ahead to assist on the window on all of the outlets here.
So this is going to be combis and that's the new eye view cameras.
This one I'm going to call it the ball or just ball.
This one will be my record by them right by then and then I will have two actions.
The reason I need it to have an outlet for this is because they want to change its color as the animation
as they use their taps on it.
And it's a recording I want it to be read showing that it's a recording.
And if it is not recording I want it to be this color orange.
So I need two actions.
One of them is called Record action and the other one is of course animate action.
And this is probably the last thing that we have to do animate action.
So that's all we had to do.
Let's go back in here and I'm going to fix a few things real quick so we can test their application
at least once I know that everything is kind of working the way we wanted it.
So that's that's now before a test and it's the application for the first time.
Let me write a little bit of code in here and that little bit of code is this the moment the viewer
wants to appear view will appear.
I'm going to say super that the view will appear to do this say Ball dot layer corner radius becomes
32 and then number 32 I got it from being half the size of the board.
Or if you wanted to you could actually say get it from the ball itself.
Ball dot bounds dot size dot divided by two.
So the moment the view will appear we will get some radius on the ball and that's going to help us of
visually recognizing the you eye view which is usually by default a rectangular shape into a a round
circular shape.
So now we have the ball and now we have to worry about the record and animate and everything else.
So the first thing I'm going to have to add some new variables one line is this.
And when I call it recording and that's going to be a boolean which is false by default.
So that's the one that's going to tell us we your current recording or not.
And if we are recording we have to remember the locations that we we went to and for that I'm going
to say I have another volume on this call it looks array and that's going to be an array of.
Points is an empty one by default.
So right the moment the uploads will have a recording and locations.
And now let's go to our record action and in here depending on whether we are recording or not we want
to change the look of the record button.
So I'm going to go ahead and say if re-occurring do something else do something else.
The the thing is that we want to do and we know for a fact if we want to do if we are recording we want
to switch out to be false.
So we don't want to be recording any more.
And if it is on the else you obviously have to change that too.
So that's one part of what we have to do.
The other thing is the look of this Bollen directed by then.
So if we are recording currently and we're going to get it false then I'm going to say this one dark
background color goes to your eye color that orange again.
And if we were not recording and now we're going to be recording I'm going to make this one record.
So we know that we are recording finally in year when we are about to start a new recording.
I'm going to say this array might already have some values in it.
So I'm going to have to set this to and empty it.
So every time the person record then we should get this.
Let's go ahead and see if that's happening the way we're hoping in here.
Record that becomes a red rocket that becomes orange again not the same color but that's OK for now.
So once again I'm saying now we have to think about what happens if we are recording.
If you are recording the idea was that as the user draws over this combis we get iPads and witer memorize
the locations where user has tabs and we use that for animation.
So apparently that has to do with Touch has moved or you could use you eye tap gesture recognizer.
So for here I'm going to go ahead and say I'm going to use the touches move touches move and in touches
move you have to check for two things.
One of them is Arvi reporting.
And the second one is Arvie on this combis view.
So I'm going to go ahead and say let's get the touch first let my touch be touches the heart first and
then I'm going to say if my touch to view is not Chamas floor or if you're not recording then you just
have to return don't need to do anything in here anymore because if one of these two options is not
met it means you are not recording.
We have to be in the recording mode and we have to be touching the cameras anywhere else.
We shouldn't be doing anything.
So once that is taken care of and we know this is not happening we end up here in the next line of the
code the next line of the code is actually rather simple and well go ahead and say this array locations
array Penn street South Koreans vocation which is my touch that location interview can last.
So we're going to say if this didn't happen it means all of those conditions are properly met.
Go ahead and append the new locations into the looks array and is telling me this value is an optional
one.
Are you sure you want to use it.
I'm going to say yes absolutely because I know this is happening and that's actually all we really have
to do.
But if you wanted to could actually offer your users some sort of a visual feedback as to where they
have tapped as well.
And I'm going to do that by drawing some views and when I say let guide you I view which is made in
this cjra Act and the record is going to be 0 0 and I'm going to give it a bit of six and a height of
six.
I'm going to say Guy.
Background color becomes your eye color that maybe yellow and then guy that dot laser dot the corner
radius make it three and then I'm going to have to place it somewhere and that place is where we have
tapped.
So I'm going to say Guy the Dart Center becomes my touch dart location in view compass.
And again we have to do the same thing making sure that this location actually forced our act.
And then I'm going to have to obviously add it to the compass they can muster at some view guide.
So this is completely unnecessary.
It really helps to give your users some sort of a visual feedback so let's see what we have.
So now in here if I try to draw nothing happens.
If I go to record Mart and I try to draw we see those little dots happening in there maybe yellow wasn't
really the best either to be honest.
I want to change real soon but we can see that it's actually working.
And then when we stop we should be able to press the animate button and then we record again I kind
of want to get rid of all of these guys and be able to add new ones a new path essentially.
So let's go ahead and fix both of these in one go.
In here and say first of all that yellow was a terrible choice.
So purple would be a lot better.
And the second thing is this if our cameras already has some guides on it gets rid of them.
Now there are two ways of doing that.
One of them would be to put all of the guides inside an array and remote remove them.
The other one would be a solution such as this one.
So every time that we go to our record in here record action and we're going to begin recording I'm
going to have to clear the camera so as to do that.
I'm going to say Do this for any view any view in Chamas dot Suppe views or any view that is a sub view
of cameras say any view that remove from superheavy or not there is a little bit of a problem with this
and that's something that I'm hoping you guys know this is the red ball is also a soft view of the of
the cameras and we have to account for it.
So I'm going to say if any view is not the ball to this so remove everyone unless they are the ball
which don't remove them.
So let's see where we ended up by all of these by making sure we remove everything every time we begin
the record.
And by making sure that we have a purple color guides that record I'm going to go ahead and that's the
direction like an S stop the record record again.
Everything disappears and we can do everything that we wanted.
Once again except that the ball stays there at all times.
And now if all has gone well and we have drawn this locations properly we should also have them between
the locations array so that locations should be now ready for the animation as well.
So let's go ahead and write the handmade part of this application.
We're coming here and this is actually rather simple I'm going to say let him just like the last time
see a key animation th frame animation the keyframe animation I'm going to give it with a key part and
the key part is he powers of the see a dot position.
So that's really simple.
Then I'm going to go ahead and say animation the values are my locations so they are called locks array
locations.
Now you could choose to have animation that time as well but if you don't give it that time it's going
to evenly distributed which is what they want to happen at this point.
I'm going to say animation the duration.
Make it maybe three seconds.
So we have not taken care of the ball dot dot dot animation tweet and the animation isn't going to be
this one for a kid that doesn't really matter at this point.
And once they had a key or anything to that effect it doesn't really matter.
There are a few things that I want to be careful about before I run this one.
One of them is this If user hasn't chosen sufficient number of locations let's say the bare minimum
is obviously too.
If you have less than two that there's no animation to be made.
And you can actually expand on that.
You can say that your user has to choose at least four locations.
But I'm going to stick to the bare minimum now.
I'm going to see if it looks great.
That count is a smaller than two which means one or zero return.
Don't do anything in here.
Or better you have to give user an indication that something is wrong and you have to choose more locations
or something to that effect.
That's part one of the things.
And the other one is I'm going to say you shouldn't be able to tap the animate if the record is on.
So because of that I'm going to go ahead and say we could do this in two different ways.
One is that we could disable this for then while you're recording.
Or two could actually go in here and say or if we are recording return don't do anything because we
are still recording.
So that's I think all we had to do in here is go ahead and run this application.
If it all works as I drove for the cameras with the touches moved we remember the locations and then
we can animated Reichelt go do this like a you know more record animates and that's not it works exactly
the way we want it record again and this time right.
Number three and stop and animate over number three very funky animation you're using can do whatever
they want to do with it.
And I think that's about that.
I will see you in the next lesson.