Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Swift 1
  • Overview
  • Transcript

2.3 Animation Groups and Timings

In this lesson, I will teach you all about using animation groups to share settings, how to time your animations, and how to avoid some common mistakes with layer animations.

2.3 Animation Groups and Timings

Hi, and welcome back to Go Further With Swift, where we build a weather app for iOS. In this lesson, we wrap up the Animation part of this course. We are going to look at Animation timings and how to create a more complex animation orchestration. To make this more visible, I'm going to use a preview image for the Condition icon to show something on the screen. First, I'm going to add a beginTime property to the FadeIn Animation. This is like a delay. It is done by taking the current media time and adding the number of seconds you want to delay by. When we build and run, you can see that the views are clearly visible. But after two seconds, they disappear and the Animation runs. To understand why that happens, I have to introduce an important concept. It is called a fill mode. Let me demonstrate this. First, you're waiting for the Animation to start. Then you animate, and finally, the Animation is over. Normally, the fromValue is set at the beginning of the animation, and the toValue will be reached at the end. When you want the same thing we want, which is to delay the Animation, this doesn't quite work anymore. In my little timeline, the first hash marks the point where we add the Animation to the layer. The second one is sometime after the Animation finished. Let's see what values the fillMode can have. There are four possible ones. Forwards means that the toValue will be visible even after the Animation finishes. If you remember in the last lesson, when the SpringAnimation stopped before it has reached its final position, it just snapped to the one we defined in interface builder. Backwards will set the value instantly when the Animation is added to the first Animation frame and then waits until the Animation begins. Both does it in both directions, and Removed deletes the Animation after it completed. So Backwards is what we want here. So let's see if it works. And it does, the views are not visible before the Animation fades in. The second topic of this lesson is Animation groups. You can create a CAAnimationGroup that can take properties that are identical for a group of Animations. In our case that would be the duration, timingFunction, beginTime, and fillMode. Let's add a second Animation that creates a zoom out effect for the Condition views. It works on transform.scale, and I'm starting with a 5 scale and reduce it to 1. To add this Animations to the group, I can add them to the Animations property, which takes an array. Now, instead of using the FadeIn Animation on the layers, we can just use the Animation group. If you set a value like duration or beginTime to a custom value, it will clip the Animation if it's longer or not show it all if the beginTime is before the time of the animationGroup, as you can see right here. This was merely an introduction to Animations, and this topic would easily fill a whole course. But you should now have an idea on how to animate your elements in iOS. In the next lesson, we will start with the networking part. And I'm going to show you how you can make a network call with the basic tools Foundation provides. See you there.

Back to the top