2.2 Layer Animation

Hi and welcome back to Go Further with Swift, where we build a weather app for IoS. In this lesson we are tackling layer animations, another powerful way to enhance your interface. To show these, I'm going to add another function called a peer animation. Core animation is a whole framework that offers many ways to animate your elements. For now, let's keep it simple and use the CA basic animation. You can also set a specific keyPath for the animation. This animation type needs three values to be set to work properly. The firm value is the starting point of the animation. Its type is defined by the keyPath you want to animate. Since I'm going to animate the temperatureLabel, I wanted to start out of bounds and then fly in. The negative half-width of the bounds seem appropriate. The two value specifies the end-point. This is normally the point you have defined in Interface Builder. In our case it is the center meaning off leaf. Duration defines the time the animation takes. Now that my animation is set up, I can add it to a fuse layer to cure it. Here I'm using the temperatureLabels layer property to edit. Before we can test let's call a pure animation in field that appear. Wow, it worked, that was very fast. Let me slow it down a bit. All right, 2.5 seconds seem appropriate. What you've already seen is that it flies in from the left. What's very neat about those layer animations is that you can add them to as many layers as you like. Let's add it to the condition label as well. Now both fly in at the same time. Okay. Let's continue with another animation. I'm going to this fade in since I want to fade the conditions fields in even though you can't see the image yet. In this case, I will need the opacity keyPath, not alpha because we are in a different frame work and it's named differently there. This can be quite confusing, so I want to go from 0 to 1. And let's take about a second for the duration. Finally, I need to add the animation to the layers to make them work. Another new thing is that you can stack animations on a layer. For instance, I could add the fade in animation to the temperatureLabel as well. It is also easy to change the animation's behavior if the type matches, just change the keyPath. Maybe it would be better to use the current value as a two value which is easier to change and rechange the keyPath in Let's have a look at other animation types. The spring animation is a very cool way to make your elements bounce around a bit before settling on a spot. This animation takes an initial velocity and a dampering value. For instance, the controller. Let's see how it looks. Well my values are way off as you can see. Let's try a different combination. Now you can see that the element bounces around it's target for a bit. In this case especially it's an iterative process before you make it look like you want it to. Okay, my idea is to drop temperature from below, having a little bounce around it. To do that, I'm not going to use the initial velocity property, but mass and stiffness. Let's build and run and see the result. Not bad for a first try. I'm going to play around a bit with the various until I'm happy with them. I'm back and now I have an animation I like. I changed it so that the label comes in from the bottom and just bounces once or twice. I also turned the animation duration way so the animation will finish for sure before it get's removed. Let's return to the fade in animation and add another concept. Timing functions. Those are similar to animations options in the UIU's animate function. Here I am also using ease in ease out for the fading. So let's remove the debug repetition and activate it again. So we can see how it looks like when all comes together. Not bad at all I would say. With a few animations, we have suddenly transformed this interface to be more dynamic and engaging. In our next lesson, I'm going to continue with layer animations and look at animation groups and timing. See you there.