Building Better iOS App Animations

In this tutorial, we will be building an interactive popup animation in Swift with UIViewPropertyAnimator.

UIViewPropertyAnimator was added to UIKit in iOS 10, and improved slightly in iOS 11. It provides a UIView-level object-oriented API to create animations.

Using traditional UIView animations, you might write something like this:

UIView.animate(withDuration: 1, delay: 0, options: [.curveEaseOut], animations: { 
    self.myView.transform = CGAffineTransform(translationX: 50, y: 0) 
    self.myView.alpha = 0.5 
}, completion: nil)

Using the new UIViewPropertyAnimator, you can write this instead:

let animator = UIViewPropertyAnimator(duration: 1, curve: .easeOut, animations: { 
    self.myView.transform = CGAffineTransform(translationX: 50, y: 0) 
    self.myView.alpha = 0.5 
}) 
animator.startAnimations()

The code is very similar. With UIViewPropertyAnimator, you first create an animator object and then call startAnimation() instead of calling a static method on the UIView class.

Before looking at the code, it’s important to understand the state machine backing UIViewPropertyAnimator.

Let’s see how to use a UIPanGestureRecognizer alongside a UIViewPropertyAnimator to create the animation above.

var animator = UIViewPropertyAnimator()

private func handlePan(recognizer: UIPanGestureRecognizer) {
    switch recognizer.state {
    case .began:
            animator = UIViewPropertyAnimator(duration: 3, curve: .easeOut, animations: {
            myView.transform = CGAffineTransform(translationX: 275, y: 0)
            myView.alpha = 0
        })
        animator.startAnimation()
        animator.pauseAnimation()
    case .changed:
        animator.fractionComplete = recognizer.translation(in: myView).x / 275
    case .ended:
        animator.continueAnimation(withTimingParameters: nil, durationFactor: 0)
    default:
        ()
    }
}

Note that pauseAnimation() is called immediately after startAnimation(). Because our animation begins on a pan gesture, the user is most likely to scrub the animation first before releasing their tap. When the animation is paused, set the fractionComplete property to move the view along with the user’s touch.

If we tried to do this with standard UIView animations, we would need a lot more logic than what is listed in the example above. UIView animations don’t provide an easy way to directly control the completion percentage of the animation, or allow us to easily pause and continue the animation to completion.

For simplicity, all views will be created and modified in code (not in storyboard, although this code would work just as well with views created in the storyboard). Also, all code will be placed in the ViewController.swift file.

First, let’s make our popup view animate between its open and closed state. No fancy tricks here, just the basics of UIViewPropertyAnimator we learned previously.

private enum State {
    case closed
    case open
}

extension State {
    var opposite: State {
        switch self {
        case .open: return .closed
        case .closed: return .open
        }
    }
}

class ViewController: UIViewController {

    private lazy var popupView: UIView = {
        let view = UIView()
        view.backgroundColor = .gray
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        layout()
        popupView.addGestureRecognizer(tapRecognizer)
    }

    private var bottomConstraint = NSLayoutConstraint()

    private func layout() {
        popupView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(popupView)
        popupView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
        popupView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        bottomConstraint = popupView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 440)
        bottomConstraint.isActive = true
        popupView.heightAnchor.constraint(equalToConstant: 500).isActive = true
    }

    private var currentState: State = .closed

    private lazy var tapRecognizer: UITapGestureRecognizer = {
        let recognizer = UITapGestureRecognizer()
        recognizer.addTarget(self, action: #selector(popupViewTapped(recognizer:)))
        return recognizer
    }()

    @objc private func popupViewTapped(recognizer: UITapGestureRecognizer) {
        let state = currentState.opposite
        let transitionAnimator = UIViewPropertyAnimator(duration: 1, dampingRatio: 1, animations: {
            switch state {
            case .open:
                self.bottomConstraint.constant = 0
            case .closed:
                self.bottomConstraint.constant = 440
            }
            self.view.layoutIfNeeded()
        })
        transitionAnimator.addCompletion { position in
            switch position {
            case .start:
                self.currentState = state.opposite
            case .end:
                self.currentState = state
            case .current:
                ()
            }
            switch self.currentState {
            case .open:
                self.bottomConstraint.constant = 0
            case .closed:
                self.bottomConstraint.constant = 440
            }
        }
        transitionAnimator.startAnimation()
    }

}

The relevant animation code is in the popupViewTapped function, which is called when the view is tapped. We simply create an animator, set its animations to modify the value of a constraint, and start the animator.

We introduce a State enum to indicate whether the popup is open or closed. It also has a computed opposite property, which returns the opposite of the current state. We could have implemented this with a boolean flag instead, but this is easier to reason about, especially once our animation code gets more complex.

This code is very similar to the previous example, except that the animation can be interrupted. We have refactored our animation code into a function named animateTransitionIfNeeded, which runs all of the code that was previously inside our popupViewTapped function.

One problem: when the animation is interrupted, it is offset from the user’s touch. This is due to the pan handler not considering the current progress of the animation. To fix this, we need to record the fractionComplete of the animator, and use this as our baseline when calculating a pan offset.

When the pan gesture is in its began state, we record the current progress of the animation:

animationProgress = transitionAnimator.fractionComplete 

In the pan gesture’s changed state, we add the animation progress to the calculated fraction:

transitionAnimator.fractionComplete = fraction + animationProgress 

Note: In order to subclass a UIGestureRecognizer, you’ll need to include this import at the top of the file:

The ended case of the pan gesture handler now looks like this:

In the changed case of the pan gesture handler, we need to respect the isReversed property of the animator:

let translation = recognizer.translation(in: popupView)
var fraction = -translation.y / popupOffset
if currentState == .open { fraction *= -1 }
if transitionAnimator.isReversed { fraction *= -1 }
transitionAnimator.fractionComplete = fraction + animationProgress

In iOS 11, a CALayer‘s corner radius is animatable without the need for a CABasicAnimation. This means we can update a view’s corner radius in an animation block, and it will just work!

self.popupView.layer.cornerRadius = 20

Inside of our animation block, we modify the label’s alpha and transform:

switch state {
case .open:
    // other animations here ...
    self.closedTitleLabel.transform = CGAffineTransform(scaleX: 1.6, y: 1.6).concatenating(CGAffineTransform(translationX: 0, y: 15))
    self.openTitleLabel.transform = .identity
    self.openTitleLabel.alpha = 1
    self.closedTitleLabel.alpha = 0
case .closed:
    // other animations here ...
    self.closedTitleLabel.transform = .identity
    self.openTitleLabel.transform = CGAffineTransform(scaleX: 0.65, y: 0.65).concatenating(CGAffineTransform(translationX: 0, y: -15))
    self.openTitleLabel.alpha = 0
    self.closedTitleLabel.alpha = 1
}

The label animation works well, but the timing could be improved to smooth the transition further. In order to modify the timing curve of the label animations, we need additional animators. A UIViewPropertyAnimator can only have one timing curve, so in order to use multiple timing curves, we need to coordinate multiple animators.

Whenever an animation finishes, we will remove it from the array. To make the rest of the code work with multiple animators, anything applied to the transitionAnimator is applied to the entire array.

We set the animator’s scrubsLinearly property to false so that the fractionComplete of the animation gets mapped to the ease-in timing curve, instead of a linear timing curve. Generally animations that follow the user’s finger should follow a linear timing curve, which is why this property is true by default.

(Note: scrubsLinearly is only available on iOS 11+)

With so many animation API’s available in iOS, when is it best to use UIViewPropertyAnimator?

The differentiator is interruptibility. If you want to “catch” a view mid-flight, scrub it, and continue or reverse the animation, UIViewPropertyAnimator is the best option. Some other animation tactics are interruptible, such as animating views alongside a scroll view’s contentOffset property, but these animations are restricted to the timing curve of the scroll view.

SwiftKick Mobile is a mobile application design and development agency in Austin, TX. Need help with your next app? Reach out to hello@swiftkickmobile.com