Interactive View Animations in iOS


On the final WWDC, Apple launched a brand new API to create interactive animations in iOS 10. On this put up, I wish to present you easy methods to use this new API and construct a brand new sorts of animations, the place the person can pause and scrub the animation and work together with the animated object.

The primary class of this new API is UIViewPropertyAnimator. This class lets you animate views from begin to end as you’d normally do with the outdated UIView animation API. As well as, UIViewPropertyAnimation lets you work together with the animated object and pause and restart the animations. UIViewPropertyAnimator class adopts two protocols: UIViewAnimating and UIViewImplicitlyAnimating. These protocols add further functionalities to the principle class. Let’s begin to use the UIViewPropertyAnimator class and construct a quite simple animation.

Primary Animation

You can see the brand new UIViewPropertyAnimator class very acquainted, because it supplies a solution to construct animations utilizing closures (or blocks) in the identical method you do with the present view animation API.

Let’s launch Xcode 8 and create a brand new venture. Title it Animations. Within the ViewController.swift, let’s add a view programmatically:

In the identical viewDidLoad technique, let’s add a faucet gesture recognizer to work together later with the animation:


Now, let’s introduce the brand new UIViewPropertyAnimator class. To create an occasion of the animator, you may use one of many following 5 initializers:

The primary technique is the designated initializer of UIViewPropertyAnimator class. Then, there are three comfort initializers and a static initializer.

For the second, I’m going to make use of the designated initializer. Within the init(length:, timingParameters:) technique, the primary argument is the animation length. The second argument is an object conforming to the UITimingCurveProvider protocol. You would create your customized object. Nonetheless, UIKit supplies you with two courses: UICubicTimingParameters and UISpringTimingParameters. Each courses conform to the UITimingCurveProvider protocol.

Let’s begin with the UICubicTimingParameters. This class lets you outline the timing curve of an animation within the type a Bézier curve. You possibly can outline your personal curve or use the predefined Ease In, Ease Out, Ease InOut and Linear curves (see the UIViewAnimationCurve enumeration). I’m going to outline my animation timing curve. The management factors management the curve beginning in level (0, 0) and ending in level (1, 1). Within the subsequent determine, you’ll be able to see the 2 management factors P1 and P2. Altering their values modifies the curvature of the curve.

Cubic Timing Curve

So, right here is my animator:

Animation states

The UIViewPropertyAnimator class conforms to the UIViewAnimating protocol. This protocol supplies the states that the animator reaches throughout an animation. These states outline the animator’s conduct. The next determine reveals the animator states and the transitions from a state to a different one.

Animation States

The inactive state is the preliminary state. When the animator completes an animation, it additionally ends within the inactive state. If you name the startAnimation() or pauseAnimation() technique on the animator, the animator strikes to the lively state. In case you name stopAnimation(_:) on the animator, the animator strikes to the stopped state, when you move false because the enter argument. As a substitute, the animator strikes on to the inactive state, when you move true as argument.

Let’s create the interplay a part of our venture. First, we have to implement the faucet gesture recognizer motion:

When the controller’s view acknowledges the faucet gesture, I verify if the animator is within the working state. If the animation is working, then I cease the present animation on the present body (passing true as argument), then I add a brand new animation and begin it.

In the course of the interplay, you may additionally change the timing curve or reverse the animation utilizing the isReverted property outlined within the UIViewAnimating protocol. One other cool function is that you may pause the animation after which name the continueAnimation(withTimingParameters:durationFactor:) technique with new animation parameters.


What I actually like about this new API is the chance to pause the animation, transfer the animated view together with your fingers after which, after releasing the view, let the animation proceed.

Let’s add a brand new gesture recognizer to our venture.

The motion triggered by the gesture does all of the work.

One of these interplay mixed with customized view controller transitions makes your app actually distinctive.

Animation scrubbing

The fractionComplete property outlined within the UIViewAnimating protocol lets you set the progress of a paused animation by passing a worth between 0.0 and 1.0 to your animator. To make use of this property, it’s essential to pause the animation (the animator strikes to the lively state). The worth of this property is 0.0 at first of the animation and 1.0 on the finish of the animation.

Let’s modify the earlier instance. This time I add the pan gesture recognizer to the controller’s view (beforehand, I added to the redView):

Then, I modify the pan gesture within the following method:


On this put up, I gave you an outline of the brand new view animation API launched in iOS 10. Attempt to mix these new animations with the customized animation transitions.


Geppy Parziale (@geppyp) is cofounder of InvasiveCode. He has developed many iOS functions and taught iOS improvement to many engineers all over the world since 2008. He labored at Apple as iOS and OS X Engineer within the Core Recognition workforce. He has developed a number of iOS and OS X apps and frameworks for Apple, and lots of of his improvement tasks are top-grossing iOS apps which might be featured within the App Retailer. Geppy is an knowledgeable in laptop imaginative and prescient and machine studying.



(Visited 943 occasions, 1 visits at present)



Leave a Comment