Master UIView Animation

Making things look nice in Swift’s UIKit

Image for post
Image for post
Photo by Tamara Bellis on Unsplash

Animation is one of those potential blind spots for iOS developers, and is one I’ve touched on before. However, there is plenty of fun to have here, so get started with this article!

Difficulty: Beginner | Easy | Normal | Challenging

Prerequisites:

Terminology

UIView: An object that manages the content for a rectangular area on the screen

The Demo

I’ve used Playgrounds with the UI to create a UIViewController that will hold my animations. What will they look like? Here is the finished product (shudder).

Image for post
Image for post

Where should animations take place? The most canonical, sensible answer is within your viewDidAppear(_:) since the frames of the subview are set, and you don’t want your nice animation to take place where and when the user can’t see it (do you?)

This gives us the following shell App

Image for post
Image for post
Click for Gist

Remembering that the animation will be placed within the UIView.

I wanted to create a subview that scrolls upwards in a nice animation before the rest of the App starts. The result looks something like the following:

Image for post
Image for post

This involves setting up the following within the view controllers viewDidAppear(_:) function

Image for post
Image for post
Click for Gist

This is fully explained in my previous article — the difference here is that we are also animating the alpha to make the view appear to disappear. animateWithDuration:animations:completion: is used to animate the change in alpha, the change in constraint and then force the view to update immediately (coverView is a subview so will be updated when view is updated),

The view would still be there, but not be visible. This means that it would be a good idea for us to remove the view from the screen. Luckily by definition animateWithDuration:animations:completion: has a completion handler; what a great place to get rid of that pesky view!

Image for post
Image for post
Click for Gist

The underscored variable is a boolean representing a Bool if the animation is complete — in this case I’m going to remove the view from the superview whether or not the animation is truly finished when the closure is called.

Moving objects with animations is going to use the same animateWithDuration:animations:completion: method as shown above.

With the center property of a UIView

Moving objects with the center property is a relatively easy one.

Image for post
Image for post

With the following code:

Image for post
Image for post

Where moveCenter is a UIView that has been added to the superview. I’ve called this after the previous animations, see the Playground at the bottom of this article for more information.

With constraints

This is similar to the curtains example above, but can be used with any object at all. So let us move a simple UIView box doing the same thing!

Image for post
Image for post

This is performed with the following code:

Image for post
Image for post
Click for Gist

Objects can be transformed and animated, and even multiple animations can be combined together!

Image for post
Image for post

Let us try this for a nice little UIView, powered by the following code:

Image for post
Image for post
Click for Gist
Image for post
Image for post

There are a few parameters we can use with an animation through UIView.animate using:

delay: The time before an animation starts
usingSpringWithDamping:
The higher the value, the more springing is damped
initialSpringVelocity:
The initial velocity

The code? Oh yes:

Image for post
Image for post
Click for Gist

Those who have skipped ahead to the full code at the end of this article will already know: There is a problem here.

Chaining animations with completion handlers is…

With completion handlers

…Ok for a couple of animations

Image for post
Image for post
Click for Gist

But what if we went ahead and had some animations within animations?

Image for post
Image for post
Click for Gist

This is…well. Not great.

With Keyframes

I have made a full guide on Keyframes, so to cut this story a little shorter I’ll place a little solution for this The functions are not used in some cases as they call UIView.animate.

Image for post
Image for post
Click for Gist

The full code

This solution uses UIView.animate but feel free to use the Gist and copy-paste the keyframes solution from above.

Image for post
Image for post
Click for Gist

Conclusion:

Making your Apps better by using little flourishes give your customer a delightful experience. Animation can do just that, and although it make take a little effort to implement. If you want to get in touch, hit me up on Twitter.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store