iOS Animation Tutorial: Getting Started

Animation is a critical part of your iOS user interfaces, giving apps the ability to draw user attention to particular areas. Using the right animation will not only improve user experience, but can also add a ton of fun and polish to your app. In a world where apps are fighting for users, using the right animations help make your app stand out from others.

In this tutorial, you’ll learn how to use UIView animation to do the following:

• Set the stage for a cool animation.
• Create move and fade animations.
• Adjust the animation easing.
• Reverse and repeat animations.

There’s a fair bit of material to get through, but it will be a lot of fun. Are you up for the challenge?

Getting Started

Use the Download Materials button at the top or bottom of this tutorial to download the starter project.

Build and run your project in Xcode. You’ll see the login screen of a fictional airline app:

Open the Main storyboard and check out the existing scene. It shows a login form with a title, two text fields and a big friendly button at the bottom. There’s also a nice background picture and four clouds.

The clouds are connected to outlet variables in the code, named cloud1 through cloud4. There are also outlets for constraints that you’ll use to animate everything.

Now, open ViewController.swift and have a look inside. At the top of the file, you’ll see all the connected outlets and class variables. Further down, there’s a method call in viewDidLoad() which initializes some of the UI.

Enough with the introductions, you’re ready to try out some code!

On Your Mark, Get Set…

Your first task is to animate the form elements onto the screen when the user opens the app. Right now, the form is visible when the app starts. You need to move it off of the screen just before your view controller appears.

In viewWillAppear(_:), replace // TODO 1 with the following:

    
headerLabelCenterConstraint.constant -= view.bounds.width
usernameTextFieldCenterConstraint.constant -= view.bounds.width
passwordTextFieldCenterConstraint.constant -= view.bounds.width

This changes the constants of the center constraints to place each of the form elements outside the visible bounds of the screen, like so:

Since the code above executes before the view controller appears, those text fields will look like they were never there in the first place.

Build and run your project to make sure your fields truly appear offscreen, as you planned:

Perfect! Now, you’ll animate those form elements back to their original locations via a spritely animation.

Go, Animation!

Replace // TODO 2 at the end of viewDidAppear(_:) with the following code:

headerLabelCenterConstraint.constant = 0
// TODO 3    

UIView.animate(withDuration: 0.5) { [weak self] in
  self?.view.layoutIfNeeded()
}

To animate the title into view, you call the UIView class method, animate(withDuration:animations:). The animation starts immediately and animates over half a second. You set the duration via the first method parameter in the code.

Instead of animating the label by directly changing its position, you’ll update it in two steps: First, you change the constant for its center constraint to be outside of the animation block. Next, you call layoutIfNeeded() on your controller’s view within the animation block.

By calling this method, you force the view to update its layout immediately. The Auto Layout engine then updates the position of your views as needed for them to comply with your constraint changes.

Build and run your project. You should see the title slide neatly into place, like so:

That sets the stage for you to animate the rest of the form elements into your view.

Since animate(withDuration:animations:) is a class method, you aren’t limited to animating just one specific view; you can animate as many views as you want.

Replace // TODO 3 with the following line:

usernameTextFieldCenterConstraint.constant = 0

Again, you’re just setting the center constraint constant back to zero so the text field animates in and gets centered from left to right.

Build and run your project again, and watch as the username field slides into place:

Seeing both views animate together is cool, but you probably noticed that something’s off. Animating the two views over the same distance and with the same duration looks a bit stiff. Only kill-bots move with such absolute synchronization!

Wouldn’t it be cool if each of the elements moved independently of the others, possibly with a little bit of delay between the animations?

One After Another

First, remove the line you just added that animates the username text field:

usernameTextFieldCenterConstraint.constant = 0

Then add the following code to the bottom of viewDidAppear(_:):

usernameTextFieldCenterConstraint.constant = 0
    
UIView.animate(withDuration: 0.5,
               delay: 0.3,
               options: [],
               animations: { [weak self] in
                self?.view.layoutIfNeeded()
  }, completion: nil)

This class method looks familiar, but it has a few more parameters that let you customize your animation:

• withDuration: Sets the duration of the animation.
• delay: Contains the number of seconds UIKit will wait before it starts the animation.
• options: Lets you customize several aspects about your animation. You’ll learn more about this parameter later on. For now, you’ll pass an empty array, [], to indicate “no special options.”
• animations: The closure expression to apply your animations.
• completion: A code closure that executes when the animation completes. This parameter comes in handy when you want to perform some final cleanup tasks or to chain animations one after the other.

In the code you added above, you set delay to 0.3 to make the username animation start just a hair later than the title animation.

Build and run your project. How does the combined animation look now?

That looks much better. Now, all you need to do is animate in the password field.

Add the following code to the bottom of viewDidAppear(_:):

passwordTextFieldCenterConstraint.constant = 0
    
UIView.animate(withDuration: 0.5,
               delay: 0.4,
               options: [],
               animations: { [weak self] in
                self?.view.layoutIfNeeded()
  }, completion: nil)

Here, you’ve mimicked the animation of the username field, but with a slightly longer delay.

Build and run your project again to see the complete animation sequence:

That’s all you need to do to animate views across the screen with a UIKit animation!

But you’re just getting started. You’ll learn more awesome animation techniques in the remainder of this tutorial!