12.
Groups & Advanced Timing
Written by Marin Todorov
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
In the previous chapter you learned how to add multiple, independent animations to a single layer. But what if you want your animations to work synchronously and stay in step with each other? It’s no fun having to fiddle with the math and timings of all the animations separately. That’s where animation groups come in.
This chapter shows you how to group animations using CAAnimationGroup, which lets you add several animations to a group and adjust properties such as duration, delegate, and timingFunction all at once.
Grouping animations results in simplified code, and ensures that all your animations will synchronize as one, solid unit.
CAAnimationGroup
To start off, you’ll extend your Bahama Air login screen using animation groups to add some new animation to the login button.
Open the starter project for this chapter, or carry on with your project from the previous chapter and challenge.
Open ViewController.swift and remove the following code from viewWillAppear():
loginButton.center.y += 30.0
loginButton.alpha = 0.0
Then remove the following code from viewDidAppear():
UIView.animate(withDuration: 0.5, delay: 0.5,
usingSpringWithDamping: 0.5, initialSpringVelocity: 0,
animations: {
self.loginButton.center.y -= 30.0
self.loginButton.alpha = 1.0
},
completion: nil
)
…and in its place add the following code:
let groupAnimation = CAAnimationGroup()
groupAnimation.beginTime = CACurrentMediaTime() + 0.5
groupAnimation.duration = 0.5
groupAnimation.fillMode = .backwards
This code creates a new animation group for your use. CAAnimationGroup inherits from CAAnimation, so you can work with the same properties you already know and love such as beginTime, duration, fillMode, delegate, and isRemovedOnCompletion.
You’ll add one final animation to the login button to scale, rotate, and fade it in with the end effect that the button falls neatly into place on the screen.
Add the first animation by adding the following code directly below the group animation code you just added:
let scaleDown = CABasicAnimation(keyPath: "transform.scale")
scaleDown.fromValue = 3.5
scaleDown.toValue = 1.0
In the code above you start with a very large version of the button and, over the course of the animation, shrink it to its normal size.
Here you specify only the fromValue and toValue, but you don’t say what the duration of the animation should be nor do you set the fillMode of the animation. Where will those values come from?
You might have already guessed that since these values will be the same for all animations in the group, you’ll set them on the group as a whole instead of on each animation separately.
Now add code for the next animation below the code you just added:
let rotate = CABasicAnimation(keyPath: "transform.rotation")
rotate.fromValue = .pi / 4.0
rotate.toValue = 0.0
This animation is similar to the previous one, but it animates the rotation component of the layer transform instead of the scale component. The animation starts with the layer rotated at a 45-degree angle and moves it to its normal orientation of zero degrees.
All that’s left to add is the fade-in animation. Add the following code again below the lines you just added:
let fade = CABasicAnimation(keyPath: "opacity")
fade.fromValue = 0.0
fade.toValue = 1.0
This is the basic fade-in animation you’ve seen multiple times in this book.
Now add the code below to combine all animations and add them to the button:
groupAnimation.animations = [scaleDown, rotate, fade]
loginButton.layer.add(groupAnimation, forKey: nil)
To group animations, you simply add them to an array and assign that array as the value of the animations property of the group, just as you would with an ordinary CABasicAnimation.
Build and run your project to see the end result:
The button flies in and rotates as expected, but the animation looks stiff. In real life, objects tend to accelerate as they fall through space.
Fortunately, it’s easy to add some realism to your animation. This is a great opportunity to learn about using easing with Core Animation.
Animation easing
You’ve already seen easing in action in the first chapters of this book that dealt with UIKit animations. Easing in layer animations is conceptually the same thing — only the syntax is different.
groupAnimation.timingFunction = CAMediaTimingFunction(
name: .easeIn)
More timing options
The final section of this chapter explores four more animation properties that let you control the timing of your animation.
Repeating animations
repeatCount lets you repeat your animation a specified number of times.
flyLeft.repeatCount = 4
flyLeft.autoreverses = true
flyLeft.repeatCount = 2.5
Changing the animation speed
Although they look nice, some of these animations feel a bit slow. You can control the speed of the animation independently of the duration by setting the speed property.
flyLeft.speed = 2.0
info.layer.speed = 2.0
view.layer.speed = 2.0
flyLeft.repeatCount = 2.5
flyLeft.autoreverses = true
flyLeft.speed = 2.0
info.layer.speed = 2.0
view.layer.speed = 2.0
Key points
- You can group animations via
CAAnimationGroupand easily set common properties that all animations in the group share. - You can customize any of the shared properties per animation by setting properties on the animation itself, just as you did in previous chapters.
- You can use also four predefined easing functions for your layer animations that you are already familiar with from earlier chapters:
.linear,.easeIn,.easeOut,.easeInOut.
Challenges
You learned quite a lot of new stuff in this chapter; so instead of having to solve a challenge on your own I’m giving you a free pass and walking you through a few more examples of what you learned above.
Challenge 1: Group animations for all form elements
In this challenge, you’ll create a group of animations and run it on your form elements. Since this code will replace the existing form animations, the first thing you need to do is remove some existing code.