14 Layer Keyframe Animations & Struct Properties Written by Marin Todorov

You can unlock the rest of this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.

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 & 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]
``````

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)
``````
``````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),
].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 `CAKeyframeAnimation` class.
• 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 `NSValue` type.

Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.