[MUSIC] Welcome back. In this lecture, we're gonna continue where we left off and actually do some animations. If you remember last time, we showed a view and we remove the view. And as cool as that is, this is prime time for an animation. I'm sure you agree and animations in iOS are not that difficult. There is a very nice way of performing them. Of course, it's a very deep topic and there are many ways of performing animations and ways to do very, very fancy animations. But here we're going to cover basic UI view animations which let you move a view around, adjust it's properties, and make some cool stuff like that. And so it introduced the API. On UIView there's a series of animation methods, each one more complicated than the next. And so UIView.animate and you can see here's the few animate with duration ones are the ones I'm talking about. And they all take. So this first one, as you can see here, takes the duration and animations run perform. So that's the simplest one ever. You can provide it however long you want it and do the animations. And it will do a linear animation. And there's a bit more, one step that you specify to let you execute code after an animation is complete. Another one that is basically the same thing lets you add a delay to this animation, and also some options, which we will take a look at in a second. And lastly, a much more complicated one that uses a spring and lets you do spring damping animations. And those are really neat, and we'll take a very brief look at them in this lecture. So, we're gonna start from the basics, animateWithDuration. All right, so we're gonna do a duration of 0.5 to make sure we see it and it's not too slow. You know what? Let's start slower, let's go one second animation. And the animation itself is a block which takes a closure, and if you remember from course one, this is the trailing closure syntax and it's technically a argument of the animate with duration method. We don't really need a signature up here to make everything look clean. All we're gonna do is animate in like fade a view in. And this is the easiest of animations because fading a view in is simply changing its transparency, which is its alpha. And so in here we're simply setting sit alpha to 1.0. And, but that's not really enough, because it starts from 1.0 and not view. We want secondary view, menu. And since it's inside a closure we need to reference self. So, we're setting its alpha to 1.0, and that's not enough because it's already at 1.0, so it's not gonna do anything. That's very easy thing to fix still. Just before we animate it. We will set alpha to zero. And now we got some funny looking code. We're setting it to zero and setting it to one right here. What's awesome is that it's an animation and so while it looks like its not gonna do anything, it will animate the transition from zero to one over one second. And we can see that right away by building and running, and pressing on the filter button. Nice. You can see that as many times as you want. Once I can, I guess you can sort of see it is a little bit slow. I generally can stick to half or even zero point four seconds, which is the length of a lot of the system animations. And if we do that, as you can see it's a much more sort of normal length of animation. Just a comment here. Remember how we set the background color to be transparent. That didn't affect alpha here. The alpha at zero, at one, means this view is fully visible. Which means its background color is also fully visible. Just, in this case, it's background color is transparent. So when it goes from zero to one, the background color goes from 0 to 0.5. All right, so that's nice. But when you remove it, it just goes away, and that's not as nice. And so we have a little complication here. So we can copy this code down here, and set it's alpha to zero. You think that that might work, right? It may very well, it very well may. Let's take a look. And nope, that doesn't work. And you can kind of see that coming because you already removed this view and then you animated it up. So that's really not what you want, because it may be animating, but you don't see it because it's already removed from the view. And that's where the completion handler comes in, so instead of removing from the view right away, moving it down here doesn't help because when this code runs, it runs anime with duration it starts the animation and then before you even see, it's removed from the super view. And so unfortunately switching the order of these operations here won't matter here. What you can do which is use the one step up of the animateWithDuration, which gives you the completion handler. And so put back in the same options, hit Enter to create this side. Closure and this next one, as well. So this passes in a completion variable. I'm gonna clean this up because the default doesn't look as clean. That. All right. I'm going to take this code and just place it down here. The difference in the completion is it tells you wether or not the animation completed or not, which is not useful here, but potentially useful. Since it's nice for here we're just going to name it sort of clarifies our intentions. I'm not using it and down here is where we will move, we're gonna move this line of code into the completion block. Now this code is a tiny bit messy, as you can see. This is the animateWithDuration, and this is it's which is now the completion block. And the animation is now in the middle. So it's explicitly. I'm going to delete this part up here. See how that works. Nice. Not bad, either. So here we have a nice fade in, fade out animation. But, as you can see, it take 0.4 seconds to fade in and 0.4 to fade out. Now what happens if we press the button really quickly? Sort of messes up. Because while it's see, I just pressed it twice there and it should've went faded out, but it didn't because it was still doing the previous animation. And then you put it into a bad state. And this is not a big issue because there are one, animation options that can handle this. And two,this sort of completion thing that will help us solve this problem. So what's happening here when I press it it dismisses, it cause our hide secondary menu method and it's animating here and then we press it again, and it caused it so once animated it's off to one again and while it's doing it doesn't matter while this code has finished running. And it's all this adding the view part gets called. But then these zero point four seconds pass and then your completion block is called. So that's not cool. As you can see, when I'm gonna tap it here and then it will execute this code but this will be delayed by seconds. So if you type it in again, within those four seconds, you'll call this top code. But then, remove FromSuperview will immediately run. And you actually don't get your view back even though the still have it. And that's a bug. And actually, that's what the completion handler does. So in this case, will be solved just by checking whether or not the animation completed. Now you wanna call it completed instead, so if completed equals true, we're gonna do this or else we're not. And what you get, I mean it is the same thing, it is just that you won't be able to get that state of it not being there anymore. So you have very basic understanding of how to animate views and properties now and we'll see you next time.
