iOS Animation Tutorial: Getting Started

Animation Easing

In real life, things don’t just suddenly start or stop moving. Physical objects like cars or trains slowly accelerate until they reach their target speed and, unless they hit a brick wall, they gradually slow down again until they come to a complete stop at their final destination.

The image below illustrates this concept:

To make your animations look more realistic, you can apply the same effect of building momentum at the beginning and slowing down before the end. These are generally known as ease-in and ease-out.

You can choose from four different easing options:

• .curveLinear: This option applies no acceleration or deceleration to the animation.
• .curveEaseIn: Applies acceleration to the start of your animation.
• .curveEaseOut: This option applies deceleration to the end of your animation.
• .curveEaseInOut: Applies acceleration to the start of your animation and deceleration to the end of your animation.

To better understand how these options add visual impact to your animation, try a few of the options in your project.

Ease Out

Modify the animation code for your password field once again with a new option:

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

Build and run. Notice how smoothly the field decelerates until it reaches its rightmost position, before it returns to the left side of the screen:

This looks much more natural since that’s how things move in the real world.

Ease In

Now, try the opposite. Ease-in the animation when the field is still outside of the screen by modifying the same code as above to change the .curveEaseOut option to .curveEaseIn:

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

Build and run. Observe how the field jumps back from its rightmost position with robotic vigor. This looks unnatural and isn’t as visually pleasing as the previous animation.

Finally, give .curveEaseInOut a try. It combines the two options you’ve already used into one natural-looking easing. .curveEaseInOut is the default easing function UIKit applies to your animations.

You’ve seen how the various animation options affect your project and how to make movements look smooth and natural.

Before you move on, change the options on the piece of code you’ve been playing with:

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

When there are no options for your animation, you can simply omit that parameter instead of passing an empty array.

Where to Go From Here?

Download the final project by using the Download Materials button at the top or bottom of this tutorial.

Now that you know how basic animations work, you’re ready to tackle some more dazzling animation techniques.

Animating views from point A to point B? Pshaw — that’s so easy!

If you enjoyed what you learned in this tutorial, why not check out the complete iOS Animations by Tutorials book, available in our store?

Here’s a taste of what’s in the book:

View Animations: View animations can easily animate almost any view element and change its size, position and color.

Auto Layout: Get a crash course in Auto Layout and the animation techniques that play nicely with Auto Layout.

Layer Animations: Views on iOS are backed by layers, which offer a lower-level interface for the visual content of your apps. You’ll learn how to gain more flexibility using layers and the Core Animation API.

View Controller Transitions: Animating views and layers is impressive, but you can dial it up to 11 and animate entire view controllers! You’ll learn techniques for transitioning between view controllers and changes in device orientations, all in the same view controller.

Animations with UIViewPropertyAnimator: Learn how to create interactive, interruptible view animations. When you run animations via an animator, you can pause, stop, reverse and alter the speed of animations that are already running.

3D Animations: In this section, you’ll move beyond two dimensions and learn about 3D animations and effects with CATransform3D. Although Core Animation isn’t a true 3D framework, it lets you position things in 3D-space and set perspective – which leads to some very slick and impressive effects!

Further Types of Animations: Two more animation techniques are part of Core Animation and UIKit, but don’t fit into Sections I and III. In this section, you’ll get an impressive snowy effect working with particle emitters, and then learn about Flipbook-style frame animation with UIImageView.

I hope you enjoyed reading this tutorial. If you have any questions or comments, please join the discussion below! :]