Simple view animations

- [Instructor] The first thing we want to do is open up the exercise files and make a copy of the Animator_Starter folder. I'm going to hit Command + D to duplicate this, Enter to rename. I'm going to say this is Animator_Working. I'm going to move this onto the desktop and open up the Xcode project. Now let's go into the main storyboard and we want to make sure that the basic animation scene is set as the initial view controller so let's zoom out, select BasicAnimationViewController, and in the attributes just check is initial view controller.

Now let's briefly go over what we want this screen to do. First of all, we want all the elements to start off invisible and fade in and we want the title label to move up in the y direction, the image to stay where it is but to get slightly bigger, and for the chapter challenge, we want to get the loading label to fade in and out and sort of pulse. Now this might sound like a lot, but once we break each of these down into their own animations, you'll see how manageable they become and how much work the UIKit API really does for us.

So in the project navigator, let's open up the controllers folder and select the first one, BasicAnimationViewController. Now as we went over in the earlier video about view life cycles, the best place to do this kind of setup is in viewWillAppear, especially since we want the animations to reload if we ever need to go back to this screen. Now I've left a TODO here for us so underneath Animation setup, let's go ahead and change the alpha property of all three views to zero so we're going to say titleLabel.alpha equals zero, graphic.alpha equals zero, and loadingLabel.alpha equals zero.

Go ahead and save that off. Now we're using the alpha property here because the other option, the isHidden property, is not animatable. However, we'll see that we can use the isHidden property in transition animations a little bit later on. Let's change the simulator to an iPhone 8 and run this just to make sure everything is working. Perfect, our views have initially disappeared and are ready to be animated in. Let's go back to our code and in viewDidAppear, let's actually write our first bit of animation code.

Now under our TODO here Fire initial animations, let's start off by calling UIView and we're going to say .animate. Now there are going to be a number of options here, but let's focus on the simplest method that just takes an animation duration and a closure. For the duration, I'm going to put in 1.5 seconds. And for the animations closure, I'm just going to hit Enter to auto complete it. The animation closure here isn't looking for any return values so its only purpose is to execute its code over the course of these 1.5 seconds.

So inside the closure, let's animate our titleLabel.alpha back to one and move its y position up by 50 pixels. So since we're within a closure, we need to call self.titleLabel.alpha equals one and self.titleLabel.frame.origin.y is minus equals the compound operator 50. Remember that in the screen coordinate system on iOS, in order to move up, we need to decrease the y's position value, not increase it.

Let's save this off and run it one more time. Beautiful, so this looks really nice and smooth with just a few lines of code. Now you might have already guessed this, but it's important to note that everything in an animation closure will execute together. So for instance if we wanted the alpha and the y position animations to happen independently, that is with their own effects, they would need to be in separate animation calls. Now just to keep things organized, let's cut our animation from viewDidAppear and we're going to put it into a new function.

So here I'm going to add another mark statement underneath viewDidAppear. I'm just going to say Animations. I'm going to make myself a little bit of room and declare a new function. This is going to be called func animateTitleLabelIn. It's not going to take any parameters. It's just going to be our newest UIView animation. And back in viewDidAppear, let's just call it. You'll see that this kind of structure will help when you're writing a lot of animation code and make concurrent and chained animations a lot easier to keep track of.

So let's run this one last time to make sure that everything is still working and yes it is. So with that, we've successfully implemented our first view animation and we can get into some of the other options we have to mess around with.