iOS Animations by Tutorials

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.

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.

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!

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.

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.

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:

• 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.

• 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.

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! :]

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!

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!

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! :]