iOS Animation Tutorial: Introduction to Easy Animation

While I worked on creating the iOS Animations by Tutorials video series and the three editions of the iOS Animations by Tutorials book I got a lot of ideas how the existing animation APIs can be improved – I felt they could be a bit more flexible and not as verbose.

That’s why after iOS Animations by Tutorials was released I started working and soon after released a lightweight animation library called Easy Animation.

This tutorial shows you how to use Easy Animation to build powerful view and layer animations quickly and easily. Easy Animation builds upon the solid foundation of Core Animation and gives you more mileage from the same APIs you’ve been always using.

Let’s get started! :]

What is Easy Animation?

Easy Animation extends the existing animateWithDuration(_:animations:) APIs and introduces a couple of new ones that follow the same naming pattern. And since Easy Animation is an open source library written in Swift, you can always peek inside and see how it works.

Just to give you a taste what Easy Animation is all about here’s an example: if you want to round the corners of a layer called myLayer in the span of 1.0 second with 0.5 seconds delay and ease the beginning of the animation you need all these lines of code:

let round = CABasicAnimation(keyPath: "cornerRadius")
round.fromValue = 0.0
round.toValue = 50.0
round.duration = 1.0
round.beginTime = CACurrentMediaTime() + 0.5
round.fillMode = kCAFillModeBackwards
round.timingFunction = CAMediaTimingFunction(name: 
  kCAMediaTimingFunctionEaseIn)
myLayer.addAnimation(round, key: nil)
myLayer.cornerRadius = 50.0

More to write means more possibility to introduce a bug and less time to experiment and polish. What Easy Animation allows you to do is to animate layers by using the standard UIKit animation methods.

To create precisely the same animation from the example above with Easy Animation, you only need to write this:

UIView.animateWithDuration(1.0, delay: 0.5, options: .CurveEaseIn, animations: {
  myLayer.cornerRadius = 50.0
}, completion: nil)

You can freely mix and match view and layer animations in the same animations block, use the completion blocks, create joint view-layer spring animations, and much more.

Without further ado let me show you few animation tricks you can do too with Easy Animation on your side.

Getting Started

For this tutorial, you’re going to make a little app called Random Pack List.

Download the RandomPackList Starter project, unzip it and open in Xcode. Select Main.storyboard and have a look inside.

The storyboard features a table view in the lower half of the initial view controller and a big + button in the upper half. The table view is already wired to the ViewController class so you can run up the project immediately check out what the app looks like:

This packing app is more fun than other similar apps: when the app’s finished, the big plus button on top will add a random item to the packing list no matter what the user actually wants in their luggage! :]

Installation

First and foremost, you need a copy of Easy Animation. Open the GitHub page for version 1.0:
https://github.com/icanzilb/EasyAnimation/releases/tag/1.0.0 and click the Source code (zip) button on the right to download the library source code.

Note: If you are familiar with CocoaPods you can get Easy Animation by adding pod ‘EasyAnimation’, ‘1.0.0’ to your Podfile. If you don’t know what CocoaPods is, the next chapter covers this in more detail.

Unzip the downloaded archive file and drag the sub-folder called EasyAnimation onto Xcode’s project navigator. In the dialog that pops up, check the Copy Items if Needed checkbox:

Verify that you see the EasyAnimation folder and the files in your project like so:

As soon as you’ve imported the files, you can start creating Easy Animation powered animations.

Note: If you use CocoaPods with frameworks enabled, don’t forget to import the framework by adding import EasyAnimation to the top of your source files.

Easy Layer Animations

First, you’ll add a playful rotation animation to the plus button. Open ViewController.swift and add the following to actionAddItem():

UIView.animateWithDuration(1.0, delay: 0.0, usingSpringWithDamping: 0.33, initialSpringVelocity: 0.0, options: [], animations: {
  self.plusButton.transform = CGAffineTransformRotate(
    self.plusButton.transform, CGFloat(-M_PI_2))
}, completion: nil)

You’ve probably created animations just like this one before, so you probably aren’t terribly impressed. Nevertheless, run the project and make sure the button rotates playfully when you tap it:

Next, you’ll animate the corner radius of the button’s layer. To liven up the animation, you’ll combine the rotation and the corner radius animations in a group so it looks like the button transforms into a circle as it rotates.

The usual approach for a combo animation like this would be to create a CAAnimationGroup and two separate CABasicAnimation instances: one to animate the layer’s transform property and the other its corner radius.

However, you have Easy Animation on your side. Simply add a second code of line in the animations closure to adjust the cornerRadius property from within the animations closure, just as you would for any view property:

UIView.animateWithDuration(1.0, delay: 0.0, usingSpringWithDamping: 0.33, initialSpringVelocity: 0.0, options: [], animations: {
  self.plusButton.transform = CGAffineTransformRotate(
    self.plusButton.transform, CGFloat(-M_PI_2))
    self.plusButton.layer.cornerRadius = 62.5
}, completion: nil)

You’ve appended a single line, which simply sets the button’s corner radius to half the length of its side. This ought to round its corners to the point where the square becomes a circle.

Run the project again and check the resulting animation:

The square smoothly animates into a circle, and not only that — it does so with a spring animation. The corners jiggle around a bit and then come to rest.

But… how? So far you’ve only used using CABasicAnimation and CASpringAnimation for layer animations. How can a view animation include a change to a layer property?

Easy Animation extends the existing UIKit animation APIs just a little and picks up any changes to animatable layer properties. It creates the respective animations automatically for you.

Even more – Easy Animation groups the view and layer animations together in a group so you don’t need to create a group yourself.

Add two more lines to the animations closure:

self.plusButton.layer.borderWidth = 2.0
self.plusButton.layer.borderColor = UIColor.grayColor().CGColor

These two lines animate the button border width and color respectively, just as you would for your view animations: