UI Animations With Swift

And how to prototype them in a Playground

Xiomara Figueroa
Feb 18, 2017 · 4 min read

I’ve been interviewing for iOS roles lately. In most cases, I’ve been asked to work on a small iOS app that I have to return in a week so they can review it and hopefully give me feedback. I like this process because you can really show off your skill set, and they can get a true understanding of your coding style and problem-solving abilities (depending on what they ask you to build).

The last one I worked on was for an application that has developed a solid and heavily animated UI. Because of that, one of the requirements in the iOS take-home was to include animations. This was a good opportunity for me to dig more into animations, and I spent some time playing around in our Playground.

Playgrounds are really cool! It’s a coding environment that allows a user to interact with Swift code, without requiring the user to create a project. That makes it a truly powerful tool to learn swift and to test some code or prototyping views.


Making Your Views Visible in Playgrounds

To make your views visible in Playgrounds, you need to import the module PlaygroundSupport.

import UIKit
import PlaygroundSupport

Then, let’s make your Assistant Editor visible. You can select the Assistant editor in the Xcode view modes in the top-right corner of your window. Or, press CMD + ALT + Return. After that, make sure your Assistant Editor is showing the Timeline instead of some other file.


Basic Animations

Let’s start with a basic method in UIView, called animate:

UIView.animate(withDuration: 0.5, animations: {
// Do animation
})

By calling this method, you can move things and change colors and sizes.

Here, we’re moving an image from the top to the center of the screen. We’re also changing the circle’s background color from blue to white.

In code, that would be something like the following:

Super straightforward! Of course, we need to create all the views with their properties properly set first. For instance, we need a container view. Keep in mind that we’re in a Playground so we’re not really doing AutoLayout or taking screen sizes into consideration. Any estimated width and height would work.

Container View:

Apple Image:

Circle:

Animation:

What this is doing is basically moving appleImage from its current position to the center of its container view. It’s also changing the circle’s current background color from blue to white in a span of two seconds.


Transform Animations

Transforms are some of the most commonly used methods for creating animations. With transforms, you can scale, rotate, or move objects and views.

We can call these transformations inside the animate method and get some cool animations.

1. rotate, 2. scale, 3. rotate + scale

Spring Animations

For all the value changes and transforms, you can apply a spring behavior by just adding a few properties.

delay: How long it’ll wait before the animation starts.

usingSpringWithDamping: The springiness of the bouncing animation. The higher the value, the less it’ll spring back. 0 will look like a ball, and 1 will be smooth and linear.

initialSpringVelocity: How strong it’ll start. The higher the value, the more push it’ll have at the beginning of the animation.

options: Additional settings like the curve or allowing interactions during the animation. You can delete this to make the code shorter.


Gestures and UIKit Dynamics

Gestures are powerful when they’re added on top of existing interactions. For example, we can have a UITapGestureRecognizer that responds to all touch events. So when the user clicks on the circle, we perform some other animations. You can create a class to reference from the gesture’s target so you can test it on the Playground. I’d be something like this:

And so, in action you can add more animations like I did. Or, you can perform any other action, like presenting another view or controller.

Here’s the Playground I used, with all the examples: https://github.com/Xiomara7/animations


And this is how the iOS take-home turned out. It takes the top 20 apps on the App Store and displays them in a collection view.

Disclaimer: the animations presented here were mainly used for illustrative purposes. You might need to read more about when and where is appropriate to animate, before getting too excited. Here’s a place to start:

Better Programming

Advice for programmers.

Xiomara Figueroa

Written by

CTO & Software Engineer @BookSloth • I enjoy reading 📚: tech/startups, personal growth, sci-fi, dystopian & memoirs.

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade