2.1 Animation Basics
In this lesson, we'll start adding some animation to our app. We'll begin with constraint-based animation and then advance to cross-fading the background image with a handy technique.
1.Introduction3 lessons, 12:12
2.Animation3 lessons, 21:28
3.Networking3 lessons, 23:55
4.Custom Controls3 lessons, 32:22
5.Conclusion1 lesson, 01:44
2.1 Animation Basics
Hi and welcome back to Go Fabulous where we'll build weather app for IOS. In this lesson, I'm going to show you how you can animate your UI elements with basic view animation. There are a few different types of animations. The simplest is constrain animation. Here, you are changing the constants and constrains to animate them. UIKit will do the animation part automatically for you, if you tell it that you want to animate the constrain to a target value. Let's simulate that in Interface Builder. For instance we want to animate the City Name from the top. It needs to start offscreen, so I'm settings its initial value to -80. What UI kit does, is to slowly increase the value step by step, to make it appear fluid. To be able to change the constant of the constraint, it needs to be referenced in the view controller of course. It is as easy as dragging and dropping any other UI element into a view controller. I'm going to create a function called debug animations. It will hold all animations for us to test. Normally, you would want to do this after you received some data from the server. I will leave that to you as an exercise. After the view gets loaded, we need to move the label off screen. Since -80 worked well in interface builder, let's also use this while you're here. Now that we know what we need to animate, I'm going to write down the end result. I have one to set it up on string to have a value of 8. Doing this won't really animate things, because that isn't what we told the app to do. UIView, however, has a function called animate. It has a few variants. I'm going to take the one with the duration, a delay, and some options, because it's the most complete one. All animation shall take half a second with a delay of one second. So it won't instantly display after launch. There are a few animation options available. One of the most common ones is curveEaseInOut, which will have a little bit of acceleration and deceleration at the beginning and end of the animation respectively. The next two parameters are blocks. The first one, animate, will hold our animation commands. The second one, completion, gets called when the block is completed. We want to use this here but later on. To animate the constraints, you simply have to call view, layout as needed. This will tell the view to check its constraints and update the screen if any of them are misplaced. And that's all to do constrained based animation. Easy. I also need to call the debugAnimations function in viewDidAppear of course, to make the animations run in the first place. Let's build, and run and see if the animations are running. Here's the city name appearing from the top, great. Constrains only can do so much for animation. In some cases, all lay out will work against you or you want to change other things like the opacity, it isn't possible of constraints but, there are other ways of course and we're going to look at them right now. I want to animate the background to change between images smoothly. To get some backgrounds, I'm going to pull in four more images to the assets. If you have copied the assets file from the course project, you should already have them. To have some background in Interface Builder, let me add the generic background and match to it. I want to be able to show and explain some things to you and have the background be constantly changing. To do that I'm going to add an async call on the main dispatch queue. As I called it debug animation method every three seconds. I'm also going to add a debug switch that works every time and based on its value, we can display one or two images Now we're ready for the background animation. But let's think a moment about how to do that. First you need to know that you have four position based properties that you can animate. The frame, the bounds, the center, and the transformation matrix, which is the most flexible and what we are using. Why are we using that? My animation will start with an upscaled image that is totally transparent. And that slowly appears and at the same time, shrinks to its original size. To be able to do that, we need to duplicate the current background image, so it has the same properties but holds a new image. In our case, only the frame, the content mode which we set to aspect fit a few minutes ago, and the center are relevant. So let's create this oval image in our animation functions. Here I'm going to switch between the generic, and the snowy background images. Since the overlay has to fade in, it needs to start with an alpha value of zero. And I wanted to scale it a bit, so let's use a transformation matrix for that. Since not everyone can calculate a scale matrix quickly and conveniently, the cloud graphics framework has some convenience methods that do that for us. We want to scale it by 20% in each axis. Before the overlay can be animated it needs to be added to the view. To be extremely flexible, if, for instance, the background image is contained in a stack view or something. We can reference the background super view, and insert the overlay right above the background. Let's animate. Again, I want an animation time of half a second, but no delay this time. In the animation block, we are going to set the alpha property to one, and reset the transformation matrix next to the identity metric which is the default. After the animations are done we have to do some cleanup. Otherwise, we will just be adding fields for every animation ever run. In the completion block, I can set the background image to be the overlayed image. And then remove the overlay from its SuperView. Of course in blocks, we have to use self in accessing instance variables. Next step is to build and run and see the result of our work. After a few seconds, the image changes and it will appear like we wanted it. Cool. To review, within a few minutes, we've created a cool background animation for our app. It switches between two images. Before that, you also learned about constrained based animation. In the next lesson, we are going to look at another type. It is layer-based animation. See you there.