WWDC 2016 Spotlight: iOS 10 Animations

Incorporating animations into apps makes for an immersive experience and helps alert the user when there’s something they should pay attention to. In previous versions of iOS, UIKit view animations were fire-and-forget. You would specify a duration, some options and a few animations, and iOS would take care of running the animations for you. There was no way to change these animations or their timing, query their progress or pause them. You fired the animation and forgot about it.

At WWDC this year, we were excited to learn that these limitations would fall away with iOS 10 and a new API to manage animations will be available. Using the UIPropertyViewAnimator class, we will be able to have complete control over animations in UIKit. This update will allow us to:

• Control timing, switching seamlessly between interactive and automatic transitions.
• Control animations by adding or removing them on the fly as animations are ongoing.
• Stop, pause, or resume an existing animation block.

Some Examples

Spinning Ball

I’ve often wanted the ability to animate the rotation of a view a certain number of times before stopping. Using the view’s transform property for this is not straightforward: The transform interprets all angles as belonging to [0, 2π], so spinning a view for more than a complete rotation requires decomposing the rotation in π increments and chaining those animations together to produce the desired spinning. With UIPropertyViewAnimator this becomes a lot easier. Here is a sample of how this could be done:

The very interesting part here is the use of additive animations, which allows us to simply add the half-rotation several times to the animator to achieve the total spin.

More examples can be found in this playground.

Interactive Changes

We have setup a simple Xcode project to outline some other aspects of the UIPropertyViewAnimator. When you compile and run the Xcode project you will see a small ball and the following interactions are possible:

• Tap with one finger to move the ball to the tap location.
• Tap another time during the animation to spin the ball three times.
• Double tap to pause the animation.
• Tap with one finger to resume a paused animation with a new target.
• Tap with two fingers to reverse the current animation.

New Era of Animations

This is fantastic news for iOS developers going forward and will no doubt usher in a new era of animations in all iOS and tvOS applications. To learn more about animating views, check out Advances in UIKit Animations and Transitions.

For more insights on design and development, subscribe to BPXL Craft and follow Black Pixel on Twitter.