Interactive View Animations in iOS

At the last WWDC, Apple introduced a new API to create interactive animations in iOS 10. In this post, I want to show you how to use this new API and build a new kinds of animations, where the user can pause and scrub the animation and interact with the animated object.

The main class of this new API is UIViewPropertyAnimator. This class allows you to animate views from start to finish as you would usually do with the old UIView animation API. In addition, UIViewPropertyAnimation allows you to interact with the animated object and pause and restart the animations. UIViewPropertyAnimator class adopts two protocols: UIViewAnimating and UIViewImplicitlyAnimating. These protocols add additional functionalities to the main class. Let's start to use the UIViewPropertyAnimator class and build a very simple animation.

Basic Animation

You will find the new UIViewPropertyAnimator class very familiar, since it provides a way to build animations using closures (or blocks) in the same way you do with the current view animation API.

Let's launch Xcode 8 and create a new project. Name it Animations. In the ViewController.swift, let's add a view programmatically:

In the same viewDidLoad method, let's add a tap gesture recognizer to interact later with the animation:


Now, let's introduce the new UIViewPropertyAnimator class. To create an instance of the animator, you could use one of the following five initializers:

The first method is the designated initializer of UIViewPropertyAnimator class. Then, there are three convenience initializers and a static initializer.

For the moment, I am going to use the designated initializer. In the init(duration:, timingParameters:) method, the first argument is the animation duration. The second argument is an object conforming to the UITimingCurveProvider protocol. You could create your custom object. However, UIKit provides you with two classes: UICubicTimingParameters and UISpringTimingParameters. Both classes conform to the UITimingCurveProvider protocol.

Let's start with the UICubicTimingParameters. This class allows you to define the timing curve of an animation in the form a B├ęzier curve. You can define your own curve or use the predefined Ease In, Ease Out, Ease InOut and Linear curves (see the UIViewAnimationCurve enumeration). I am going to define my animation timing curve. The control points control the curve starting in point (0, 0) and ending in point (1, 1). In the next figure, you can see the two control points P1 and P2. Changing their values modifies the curvature of the curve.

Cubic Timing Curve

So, here is my animator:

Animation states

The UIViewPropertyAnimator class conforms to the UIViewAnimating protocol. This protocol provides the states that the animator reaches during an animation. These states define the animator's behavior. The following figure shows the animator states and the transitions from a state to another one.

Animation States

The inactive state is the initial state. When the animator completes an animation, it also ends in the inactive state. When you call the startAnimation() or pauseAnimation() method on the animator, the animator moves to the active state. If you call stopAnimation(_:) on the animator, the animator moves to the stopped state, if you pass false as the input argument. Instead, the animator moves directly to the inactive state, if you pass true as argument.

Let's create the interaction part of our project. First, we need to implement the tap gesture recognizer action:

When the controller's view recognizes the tap gesture, I check if the animator is in the running state. If the animation is running, then I stop the current animation at the current frame (passing true as argument), then I add a new animation and start it.

During the interaction, you could also change the timing curve or reverse the animation using the isReverted property defined in the UIViewAnimating protocol. Another cool feature is that you could pause the animation and then call the continueAnimation(withTimingParameters:durationFactor:) method with new animation parameters.


What I really like about this new API is the possibility to pause the animation, move the animated view with your fingers and then, after releasing the view, let the animation continue.

Let's add a new gesture recognizer to our project.

The action triggered by the gesture does all the work.

This type of interaction combined with custom view controller transitions makes your app really unique.

Animation scrubbing

The fractionComplete property defined in the UIViewAnimating protocol allows you to set the progress of a paused animation by passing a value between 0.0 and 1.0 to your animator. To use this property, you need to pause the animation (the animator moves to the active state). The value of this property is 0.0 at the beginning of the animation and 1.0 at the end of the animation.

Let's modify the previous example. This time I add the pan gesture recognizer to the controller's view (previously, I added to the redView):

Then, I modify the pan gesture in the following way:


In this post, I gave you an overview of the new view animation API introduced in iOS 10. Try to combine these new animations with the custom animation transitions.


Geppy Parziale (@geppyp) is cofounder of InvasiveCode. He has developed many iOS applications and taught iOS development to many engineers around the world since 2008. He worked at Apple as iOS and OS X Engineer in the Core Recognition team. He has developed several iOS and OS X apps and frameworks for Apple, and many of his development projects are top-grossing iOS apps that are featured in the App Store. Geppy is an expert in computer vision and machine learning.



(Visited 889 times, 1 visits today)