Contents

Hide contents

iOS Animations by Tutorials

Section IV: Layer Animations

Section 4: 9 chapters
Show chapters Hide chapters

14 Layer Keyframe Animations & Struct Properties
Written by Marin Todorov

Heads up... You're reading this book for free, with parts of this chapter shown beyond this point as scrambled text.

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]
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 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.
© 2022 Kodeco Inc.

You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.

Unlock Now