iOS & Swift

iOS Animations by Tutorials

A book on creating delightful iOS animations in Swift! From beginning to advanced topics like layer animations, view controller transitions, and more. By Marin Todorov.

Read for Free with the Personal Plan* * Includes this and all other books in our online library See all benefits
Buy Individually $59.99* *Includes access to all of our online reading features.
Leave a rating/review
Download materials
Buy paperback—Amazon Comments
Save for later
Share

Who is this for?

This book is for intermediate to advanced developers, who already know the basics of iOS and Swift development and want to dive deep into animations.

Covered concepts

  • SwiftUI
  • View Animations
  • Springs
  • Transitions
  • Keyframe Animations
  • Animation and Auto Layout
  • Layer Animations
  • Shapes and Masks
  • Gradient Animations
  • Stroke and Path Animations
  • 3D Animations
Make Delightful Animations with Swift!

This book is for iOS developers who already know the basics of iOS and Swift, and want to dive deep into animations.

Start with basic view animations and move all the way to layer animations, animating constraints, view controller transitions, and more!

more

Before You Begin

This section tells you a few things you need to know before you get started, such as what you’ll need for hardware and software, where to find the project files for this book, and more.

Section I: Animations with SwiftUI

SwiftUI is a modern, cross-platform, declarative UI framework from Apple introduced in 2019 in iOS13. SwiftUI supports all Apple platforms, so as a cool bonus anything you learn in this section can be applied verbatim for any of your tvOS, macOS, iPadOS, and watchOS apps!

Focusing on the iOS support of SwiftUI, it’s important to mention that this framework is iOS13+ only. That means that any apps using SwiftUI cannot be run on earlier versions of iOS.

If you choose to support only iOS13 or newer - you’re in luck. You can use this amazing new way to create your layout and animations.

In case you need to support versions older than iOS13 - working through this section is still going to be tons of fun. Additionally, building up some experience with SwiftUI will be a great way to get yourself ready for when the framework is more widely adopted.

In this section’s chapters you will work through several different animations including some beautiful thumbnail zoom transitions:

And a modern looking SwiftUI spinner:

Before getting started please note that to work through this section you will need at least Xcode11 and macOS Catalina or later.

In this chapter you will learn about the very basics of SwiftUI animations and then quickly move onto to more complex and visually interesting animations in a real life project.
Toggle description
You will continue to learn more about various view properties you can easily animate with SwiftUI. Additionally you will learn about view transitions and gesture driven interactive animations.

Section II: View Animations

These five chapters will introduce you to the animation API of UIKit. This API is specifically designed to help you animate your views with ease while avoiding the complexity of Core Animation, which runs the animations under the hood.

Though simple to use, the UIKit animation API provides you with lots of flexibility and power to handle most, if not all, of your animation requirements.

Animations are visible, onscreen effects that apply to all of the views, or visible objects, in your user interface:

You can animate any object on screen that ultimately inherits from UIView; this includes UILabel, UIImageView, UIButton, and any custom classes you might have created yourself.

In the five chapters of this section on view animations, you’ll learn how to use animation to improve a fictional airline app, Bahama Air, by adding various animations to its UI elements.

First, you’ll add animations to the login screen:

Once you’ve completed your work on the login screen, you’ll move on to the Bahama Air flight status screen. You’ll work with the existing screen and make it more exciting by adding animations that follow on from the theme of the login screen.

You’ll start with a visually static version of the screen and add a number of compelling, advanced animations to improve the user experience.

Once you’ve worked through all chapters in this section you’ll have some in-depth experience on animation that you can carry forward to the rest of this book.

This section shows you how easy it is to add animations to your views — read on to Section 3 to get started!

You’ll learn how to move, scale and fade views. You’ll create a number of different animations to get comfortable with Swift and the basic UIKit APIs.
4
Toggle description
You’ll build on the concepts of linear animation and create more eye-catching effects using spring-driven animations. Boiiing!
5
Toggle description
You’ll learn about several class methods in UIKit that help you animate views in or out of the screen. These one-line API calls make transition effects easy to achieve.
6
Toggle description
This chapter teaches you how to combine techniques you’ve already learned in creative ways to build up even cooler animations.
7
Toggle description
You’ll use keyframe animations to unlock the ultimate achievement of an impressive UI: creating elaborate animation sequences built from a number of distinct stages.

Section III: Auto Layout

Auto Layout has been around for a while now – it was first introduced in iOS 6 and has gone through a series of successful iterations with each release of iOS and Xcode.

The core idea behind Auto Layout is incredibly simple: it lets you define the layout of the UI elements of your app based on relationships you create between each of the elements in the layout.

Although you may have used Auto Layout for static layouts, you’ll go beyond that in this section and work with constraints in code to animate them!

You’ll need a slightly better understanding of the Auto Layout paradigm than the average iOS developer in order to make your animations play nicely with Auto Layout.

Fortunately, you’ll find working with Auto Layout constraints in code isn’t as hard as it sounds at first, and it’s a fairly straightforward process once you work through a few examples.

In this section of the book you are going to work on a little project named Packing List.

In this section you will be guided through creating animations that co-exist with Auto Layout.

By the end of this section, you’ll have tamed Auto Layout and will know how to bend it to your will to create some really amazing animations.

Toggle description
This is a crash course on Auto Layout in case you’re not familiar with it already; you’ll need this for the next chapter.
Toggle description
Once you’ve worked through the project in Chapter 8, you’ll add a number of animations to it and put your newfound knowledge to good use.

Section IV: Layer Animations

Now that you are proficient in creating view animations, it’s time to dig a bit more deeply and look into the Core Animation APIs on a lower, more powerful level.

In this section of the book, you’ll learn about animating layers instead of views and how to make use of special layers.

Views vs. layers

A layer is a simple model class that exposes a number of properties to represents some image-based content. Every UIView is backed by a layer, so you can think of layers as the lower-level behind the scenes class behind your content.

  • A layer is different from a view (with respect to animations) for the following reasons:

  • A layer is a model object – it exposes data properties and implements no logic. It has no complex Auto Layout dependencies nor does it handle user interactions.

  • It has pre-defined visible traits – these traits are a number of data properties that affect how the contents is rendered on screen, such as border line, border color, position and shadow.

  • Finally, Core Animation optimizes the caching of layer contents and fast drawing directly on the GPU.

To compare views and layers side by side:

Views
  • Complex view hierarchy layouts, Auto Layout, etc.
  • User interactions.
  • Often have custom logic or custom drawing code that executes on the main thread on the CPU.
  • Very flexible, powerful, lots of classes to subclass.
Layers
  • Simpler hierarchy, faster to resolve layout, faster to draw.
  • No responder chain overhead.
  • No custom logic by default. and drawn directly on the GPU.
  • Not as flexible, fewer classes to subclass.

If you need to choose between views and layers here is my tip: choose view animations any time you can to do the job; you will know when you need more performance or flexibility and have to switch to layer animations instead.

Don’t stress yourself about it though, because you can mix and match view and layer animations freely.

By the end of this section, you will know how – and when! – to animate your views, and when it’s appropriate to use layers.

Section overview

In the first four chapters, you’ll re-create and improve upon some of the view animations you played with earlier in this book in your Bahama Air projects:

Next, you’ll move on to playing with specialized layers:

You’re in for an amazing ride – buckle up! :]

You’ll start with the simplest layer animations, but also learn about debugging animations gone wrong.
Toggle description
Here you gain more control over the currently running animations and use delegate methods to react to animation events.
Toggle description
In this chapter you combine a number of simple animations and run them together as a group.
Toggle description
In this chapter you learn how to use `CASpringAnimation` to create powerful and flexible spring layer animations.
Here you’ll learn about layer keyframe animations, which are powerful and slightly different than view keyframe animations. There’s some special handling around animating struct properties, which you’ll also learn about.
Toggle description
Draw shapes on the screen via CAShapeLayer and animate its special path property.
Toggle description
Learn how to use CAGradientLayer to help you draw and animate gradients.
Toggle description
Here you will draw shapes interactively and work with some powerful features of keyframe animations.
Toggle description
Learn about the little known but powerful CAReplicatorLayer class.

Section V: View Controller Transition Animations

By now you know how to create a wide range of beautiful animations for your apps. You’ve experimented with moving, scaling and fading views, animating different types of layers – and a whole lot more.

It’s time to learn how to use these animation techniques in the broader context of app navigation and layout. You’ve animated multiple views and layers already, but now take a bigger-picture perspective and think about animating entire view controllers!

One of the most recognizable animations of iOS is a new view controller being pushed onto the navigation stack, as shown below:

With iOS 7, Apple added a bit of flair to that animation by adding a bit of lag before the old navigation controller starts moving away under the new one. It’s a great effect – but when you’re trying to build your own brand image, custom transition animations can be a big help.

In this section, you’ll learn how to use animations to create your own custom view controller transitions. You’ll work on two projects in this section. In Chapter 19, you’ll add transition animations to the Beginner Cook app:

The project used in Chapters 20 and 21 – Logo Reveal – will help you learn how to create custom navigation controller transitions, including a cool effect where it appears that a logo grows to reveal the content of the next screen, like so:

Implementing custom view controller transitions takes some coding, but the results are lots of fun to look at and use. Also in the section of the book you’ll have a deep dive into view animators, which provide a somewhat easier and streamlined way to build custom transitions. No matter which API you use custom transitions are an important animation technique that really makes an app stand out!

Learn how to present view controllers via custom animated transitions.
You’ll build upon your skills with presenting view controllers and develop a really neat reveal transition for a navigation controller app.
Learn how to make the reveal transition interactive: the user will be able to scrub back and forth through the animated transition!

Section VI: Animations with UIViewPropertyAnimator

UIViewPropertyAnimator is a class introduced in iOS10, which helps developers create interactive, interruptible view animations.

Since you made it this far through the book (huge congrats btw), you already know how to make use of most that Core Animation has to offer. And since all APIs in UIKit just wrap that lower level functionality, there will not be many surprises for you when looking at UIViewPropertyAnimator.

This class, however, does make some certain types of view animations a little easier to create so it is definitely worth looking into.

Most notably when you run animations via an animator you have the possibility to adjust those animations on the fly - you can pause, stop, reverse, and alter the speed of animations that are already running.

As said, you could do everything mentioned above by using a combination of layer and view animations but UIViewPropertyAnimator wraps a number of APIs together conveniently in the same class, which is a bit easier to use.

Further, this new class completely replaces neither the UIView.animate(withDuration...) set of APIs nor the animations you create with using CAAnimation so chances are you will still need to often use those in conjunction with UIViewPropertyAnimator animations.

In this section of the book you are going to work on a project featuring plenty of different view animations, which you are going to implement by using UIViewPropertyAnimator.

After working through this section you will definitely be at home with using UIViewPropertyAnimator for all kind of animations in your apps!

Learn how to create basic view animations and keyframe animations. You’ll look into using custom timing that goes beyond the built-in easing curves.
In this chapter you are going to learn about using animators with Auto Layout. Further, you will learn how to reverse animations or make additive animations for smoother changes along the way.
Learn how to drive your animations interactively based on the user’s input. For extra fun you’ll look into both basic and keyframe animations interactivity.
Create custom View Controller transitions using a UIViewPropertyAnimator to drive the transition animations. You will create both static and interactive transitions.

Section VII: 3D Animations

Up to this point in the book you’ve only worked with animations in two dimensions, and for good reason – this is the most natural way to animate elements on a flat device screen. After all, buttons, text fields, switches, and images in the flat post-iOS 7 world don’t have a third dimension; these elements exist in a plane defined by X and Y axes:

Core Animation helps you float free from this two dimensional world; although it isn’t a true 3D framework, Core Animation has a lot of smarts to help you position two-dimensional objects in 3D space.

In other words, your layers and animations still take place in two dimensions, but you can rotate and position each element’s 2D plane in a 3D space like so:

Shown above are two 2D images that are rotated in 3D space. The perspective distortion gives you an idea of how they are positioned from the renderer’s point of view.

This section of the book will show you how to position and rotate layers in 3D space. You’ll work with a special property of CATransform3D: namely, the transformation class applied to layers. CATransform3D is similar to CGAffineTransform, but in addition to letting you scale, skew and translate in the x and y directions, it also brings in the third dimension: z. The z-axis runs straight out of the device screen towards your eyes.

CATransform3D lets you determine where the rendering camera is located respective to the device’s screen; this affects the amount of perspective distortion Core Animation applies to your views.

Consider the following few examples to better understand how perspective works. If you stand very, very close to an object, such as right in front of a skyscraper, the object will take up most of your view and you’ll see a lot of perspective as the lines of the skyscraper recede into the distance.

In a similar way, setting the camera very close to the screen distorts your layer’s perspective accordingly:

If you move the camera back from the object, there is less perspective distortion applied, just as you don’t see as much perspective distortion when you view a skyscraper from a few blocks away.

Finally, if you set a great distance between the camera and the screen there won’t be any noticeable perspective – just as you won’t notice any perspective distortion on a skyscraper you view from across the city:

The image is still distorted, but notice how the top and bottom lines of the image frame are almost parallel. You’re still looking at it at an angle, but the perspective distortion is very minor.

In the next two chapters you’ll learn how to set up your layers in 3D space, how to choose the distance from the camera to your layer, and how to create animations in your 3D scene. With a bit of knowledge about perspective under your belt, the rest of this chapter should be a walk in a three-dimensional park! :]

Toggle description
Learn how to set up your layers in 3D space, how to choose the distance from the camera to your layer, and how to create animations in your 3D scene.
Toggle description
Go further into 3D space and learn about some of the more advanced ways to create 3D Animations.