14.
Layer Keyframe Animations & Struct Properties
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
Keyframe animations on layers are a bit different than keyframe animations on a UIView. View keyframe animations are a simple way to combine independent simple animations together; they can animate different views and properties, and the animations can overlap or have gaps in between.
In contrast, CAKeyframeAnimation lets you animate a single property on a given layer. You can define different key points of the animation, but you can’t have any gaps or overlaps in your animation. Even though that sounds restrictive at first, you can create some very compelling effects with CAKeyframeAnimation.
In this chapter, you’ll create a number of layer keyframe animations, from the very basic to more advanced animations that simulate real-world collisions. In Chapter 17, “Stroke and Path Animations”, you’ll learn how to take layer animations even further and animate your layers along a given path.
For now, you’ll walk before you run and create a funky wobbly effect for your first layer keyframe animation.
Introducing keyframe animations
Think for a moment how a basic animation works. Using fromValue and toValue, Core Animation progressively modifies a particular layer property between those values over a specified duration.
For instance, when you rotate a layer between 45° and -45° (or π/4 and -π/4 for you math types out there) you only need to specify those two values and the layer renders all intermediate values to complete the animation:
Instead of fromValue and toValue, CAKeyframeAnimation uses an array of values to animate through, named values. The elements of values are the measured milestones of your animation. You’ll also need to supply the time that the animation should reach each value’s key point.
Take a look at the following simple layer keyframe animation example:
In the above animation, the layer rotates from 45° to -45°, but this time it has two separate stages: first, it rotates from 45° to 22° during the first two-thirds of the animation duration, and then it rotates all the way to -45° in the time remaining.
In essence, animating layers with keyframes requires you to provide key values for the property you’re animating, along with a corresponding number of number of relative key times that progress between 0.0 and 1.0.
Creating a layer keyframe animation
Open the starter project for this chapter, or alternatively if you worked through the project from the previous chapter you can pick up where you left off.
let wobble = CAKeyframeAnimation(keyPath: "transform.rotation")
wobble.duration = 0.25
wobble.repeatCount = 4
wobble.values = [0.0, -.pi/4.0, 0.0, .pi/4.0, 0.0]
wobble.keyTimes = [0.0, 0.25, 0.5, 0.75, 1.0]
heading.layer.add(wobble, forKey: nil)
Animating struct values
Struct instances are first-class citizens in Swift. In fact, there’s very little difference syntactically between working with classes and structs.
init(cgPoint: CGPoint)
init(cgSize: CGSize)
init(cgRect rect: CGRect)
init(caTransform3D: CATransform3D)
let move = CABasicAnimation(keyPath: "position")
move.duration = 1.0
move.fromValue = NSValue(cgPoint: CGPoint(x: 100.0, y: 100.0))
move.toValue = NSValue(cgPoint: CGPoint(x: 200.0, y: 200.0))
Intermediate keyframe animations
First you need to add the balloon image on screen. Open ViewController.swift, then add the following code to the bottom of login():
let balloon = CALayer()
balloon.contents = UIImage(named: "balloon")!.cgImage
balloon.frame = CGRect(x: -50.0, y: 0.0, width:
50.0, height: 65.0)
view.layer.insertSublayer(balloon, below: username.layer)
let flight = CAKeyframeAnimation(keyPath: "position")
flight.duration = 12.0
flight.values = [
CGPoint(x: -50.0, y: 0.0),
CGPoint(x: view.frame.width + 50.0, y: 160.0),
CGPoint(x: -50.0, y: loginButton.center.y)
].map { NSValue(cgPoint: $0) }
flight.keyTimes = [0.0, 0.5, 1.0]
balloon.add(flight, forKey: nil)
balloon.position = CGPoint(x: -50.0, y: loginButton.center.y)
Key points
- You can easily create layer keyframe animations by using the
CAKeyframeAnimationclass. - Unlike views, layer keyframe animations animate a single property in a continuous animation over several possible key-points.
- You can animate complex property data types by wrapping them as an
NSValuetype.