Home iOS & Swift Books iOS Animations by Tutorials

10
Getting Started With Layer Animations 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.

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

Unlock Now

Layer animations work much like view animations; you simply animate a property between a start and an end value over a defined period of time and let Core Animation take care of the rendering in between.

However, layers have a bigger number of animatable properties than views; this gives you a lot of choice and flexibility when it comes to designing your effects; many specialized CALayer subclasses add other properties that you can use in your animations.

This chapter will introduce you to the basics of CALayer and Core Animation. You’ll get a feel for working with animations in layers; you’ll learn how to move layers around, fade them in and out and create animations comparable to the ones you created using UIKit.

Animatable Properties

Some of the animatable properties in CALayer correspond directly to the view properties you worked with in previous chapters, such as frame, position and opacity. You’ll see both the familiar and the new animatable properties used in layer animation in this chapter. You’ll re-create some of the earlier view animations but with layers, so you can draw the parallels and see for yourself where the similarities end — and where the new possibilities begin.

Position and Size

Border

Shadow

Contents

Your First Layer Animation

You’ll begin with the completed Bahama Air login screen project from the end of Chapter 5, “Transitions”. As always, you can build on your previous work or open the starter project included with this chapter.

heading.center.x -= view.bounds.width

UIView.animate(withDuration: 0.5) {
  self.heading.center.x += self.view.bounds.width
}


let flyRight = CABasicAnimation(keyPath: "position.x")
flyRight.fromValue = -view.bounds.size.width / 2
flyRight.toValue = view.bounds.size.width / 2
flyRight.duration = 0.5

heading.layer.add(flyRight, forKey: nil)

More Elaborate Layer Animations

You’ve handled the title layer on your login screen; your next task is to take care of the username field.

username.center.x -= view.bounds.width

UIView.animateWithDuration(0.5, delay: 0.3, 
  usingSpringWithDamping: 0.6, initialSpringVelocity: 0, 
  animations: {
    self.username.center.x += self.view.bounds.width
  }, 
  completion: nil
)

username.layer.add(flyRight, forKey: nil)


flyRight.beginTime = CACurrentMediaTime() + 0.3

Using fillMode

The fillMode property lets you control the behavior of your animation at the beginning and end of its sequence.

backwards

CAMediaTimingFillMode.backwards displays the first frame of your animation instantly on the screen, regardless of the actual start time of the animation, and starts the animation at a later time.

forwards

CAMediaTimingFillMode.forwards plays the animation as usual, but retains the final frame of the animation on the screen until you remove the animation:

both

CAMediaTimingFillMode.both is a combination of forwards and backwards; as you’d expect, this makes the first frame of the animation appear on the screen immediately and retains the final frame on the screen when the animation is finished:

flyRight.fillMode = .both

password.center.x -= view.bounds.width

UIView.animate(withDuration: 0.5, delay: 0.4, options: .curveEaseOut, animations: {
  self.password.center.x += self.view.bounds.width
}, completion: nil)

flyRight.beginTime = CACurrentMediaTime() + 0.4
password.layer.add(flyRight, forKey: nil)

Animations vs. real content

First, you’ll put the text fields off screen at the start of the animation. For testing purposes, add the following code to the start of viewWillAppear():

username.layer.position.x -= view.bounds.width
password.layer.position.x -= view.bounds.width

flyRight.fromValue = nil


flyRight.isRemovedOnCompletion = false

Updating the Layer Model

Once you remove a layer animation from the screen, the layer falls back to its current values for position and other properties. This means that you’ll usually need to update the properties of your layer to reflect the final values of your animation.

flyRight.isRemovedOnCompletion = false

username.layer.position.x = view.bounds.size.width / 2

password.layer.position.x = view.bounds.size.width / 2

flyRight.fromValue = nil

Best Practices

Whoa — this was a long chapter! You tried out a ton of different layer animation techniques, and that’s just the start!

Key Points

Challenges

You covered a lot of ground in this chapter; if you want to really test that you’ve retained all of the concepts covered in each section, feel free to take on the challenges below.

Challenge 1: Fade in the Clouds With Layer Animations

In this challenge, you’ll replace the UIKit cloud animations from Chapter 3, “Getting Started With View Animations” with layer animations instead.

Challenge 2: Animating Colors

In this challenge you’ll re-create the Log In button tint animation.

self.loginButton.backgroundColor = UIColor(red: 0.85, green: 0.83, blue: 0.45, alpha: 1.0)

self.loginButton.backgroundColor = UIColor(red: 0.63, green: 0.84, blue: 0.35, alpha: 1.0)

func tintBackgroundColor(layer: CALayer, toColor: UIColor)

let tintColor = UIColor(red: 0.85, green: 0.83, blue: 0.45, alpha: 1.0)

tintBackgroundColor(layer: loginButton.layer, toColor: tintColor)


completion: { _ in
  let tintColor = UIColor(red: 0.63, green: 0.84, blue: 0.35, alpha: 1.0)
  tintBackgroundColor(layer: self.loginButton.layer, toColor: tintColor)
}

Challenge 3: Animating Corner Radius

In this challenge you won’t recreate one of your existing view animations; instead, you’ll animate the layer specific property cornerRadius. Just like you did in Challenge 2 above, create the following new top-level function in ViewController.swift:

func roundCorners(layer: CALayer, toRadius: CGFloat)

roundCorners(layer: loginButton.layer, toRadius: 25.0)

roundCorners(layer: self.loginButton.layer, toRadius: 10.0)

11. Animation Keys & Delegates 9. Animating Constraints

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 Razeware LLC

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 raywenderlich.com Professional subscription.

Unlock Now

To highlight or take notes, you’ll need to own this book in a subscription or purchased by itself.

Read for Free with a Subscription

Buy this book for $59.99