iOS Animation Tutorial: Getting Started

Animatable Properties

Now that you’ve seen how easy animations can be, you probably want to learn how else you can animate your views.

This section gives you an overview of the animatable properties of a UIView, then guides you through exploring these animations in your project.

You can’t animate all view properties, but you can build all view animations, from the simplest to the most complex, by animating the subset of view properties that can animate. You’ll see how in the next section.

Position and Size

You can animate a view’s position and frame in order to make it grow, shrink or move around, as you did in the previous section. Here are the properties you can use to modify a view’s position and size:

• bounds: Reposition the view’s content within the view’s frame.
• frame: Move and/or scale the view.
• center: Move the view to a new location onscreen.

Don’t forget that in Swift, several UIKit properties, such as size and center, are mutable. This means you can move a view vertically by changing center.y or you can shrink a view by decreasing frame.size.width.

Another thing worth mentioning is that, in the code you’ve used in this tutorial, you animate the position by modifying the constraints of your elements as opposed to the center property. However, either way works.

When using Auto Layout, you may find using constraints to animate the position is less confusing. This is especially true when you’re debugging animation issues when there’s a constraint in place in addition to a modified frame.

Now that you’ve animated the position of your UI elements, it’s time to create some size animations for the clouds. Add the following code just before setUpUI():

private func animateClouds() {
    let options: UIView.AnimationOptions = [.curveEaseInOut,
                                            .repeat,
                                            .autoreverse]
    
    UIView.animate(withDuration: 2.9,
                   delay: 0,
                   options: options,
                   animations: { [weak self] in
                    self?.cloud1ImageView.frame.size.height *= 1.18
                    self?.cloud1ImageView.frame.size.width *= 1.18
    }, completion: nil)
    
    UIView.animate(withDuration: 3.0,
                   delay: 0.2,
                   options: options,
                   animations: { [weak self] in
                    self?.cloud2ImageView.frame.size.height *= 1.28
                    self?.cloud2ImageView.frame.size.width *= 1.28
    }, completion: nil)
    
    UIView.animate(withDuration: 2.4,
                   delay: 0.1,
                   options: options,
                   animations: { [weak self] in
                    self?.cloud3ImageView.frame.size.height *= 1.15
                    self?.cloud3ImageView.frame.size.width *= 1.15
    }, completion: nil)
    
    UIView.animate(withDuration: 3.2,
                   delay: 0.5,
                   options: options,
                   animations: { [weak self] in
                    self?.cloud4ImageView.frame.size.height *= 1.23
                    self?.cloud4ImageView.frame.size.width *= 1.23
    }, completion: nil)
  }

While the method may look a bit large, it’s pretty simple. First, it creates a constant set of animation options to use for your four cloud image views, then it adds one animation block per cloud.

You set different delays and durations for each cloud, and you modify the width and height of each cloud’s image view within the animation block.

Since these properties are animatable, and since you’re using the .repeat and .autoreverse animation options, your clouds now have some very nice effects: changing size and acting all puffy.

But you won’t see those effects quite yet. To get the clouds to animate, simply add the following line at the end of viewDidAppear(_:):

animateClouds()

So far, you’ve made your login form and your clouds look pretty good. But how about changing up the appearance of the login button?

Appearance

You can change the appearance of the view’s content by either tinting its background or making the view fully- or semi-transparent.

• backgroundColor: Change this view property to have UIKit gradually change the background color over time.
• alpha: Change this property to create fade-in and fade-out effects.

How about adding some color animations? Your next step is to animate the background color of the login button. To do so, add the following code at the end of viewDidAppear(_:):

UIView.animate(withDuration: 1,
                   delay: 1.2,
                   options: .curveEaseInOut,
                   animations: { [weak self] in
                    self?.loginButton.backgroundColor = .systemYellow
      }, completion: nil)

Build and run. After your label and text fields animate in, the login button’s background changes to a cool, tropical-looking yellow.

Transformation

Transforms modify views in much the same way as above, since they also adjust the views’ size and position.

• transform: Modify this property within an animation block to animate the rotation, scale and/or position of a view.

These are affine transformations under the hood, which are much more powerful and allow you to describe the scale factor or rotation angle rather than providing a specific value for bounds or center point.

These look like pretty basic building blocks, but you’ll be surprised at the complex animation effects you can make with them!

Animation Options

Looking at your animation code, you’ve always passed [] to the options parameter (except for your clouds). options lets you customize how UIKit creates your animation. So far, you’ve only adjusted the duration and delay of your animations, but you can use options for more control over your animation parameters.

Below is a list of options declared in UIViewAnimationOptions. You can combine these options in different ways to create cool animations.

You’ll first take a look at the following two animation options:

• .repeat: Include this option to make your animation loop forever.
• .autoreverse: Include this option only in conjunction with .repeat. It repeatedly plays your animation forward, then in reverse.

Modify the code that animates the password field viewDidAppear(_:) to use the .repeat option as follows:

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

Build and run to see the effect of your change:

The form title and username field fly in and settle down in the center of the screen, but the password field keeps animating forever from its position offscreen.

Modify the same code you changed above to use both .repeat and .autoreverse in the options parameter as follows:

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

Note that if you want to enable more than one option, you need to use the set syntax, listing each option separated by a comma, then enclose the list in square brackets.

Build and run again. This time, the password field just can’t make up its mind about staying on the screen!