iOS 7: UIKit Dynamics

Written by: on September 18, 2013

Possibly the coolest new feature in iOS 7, UIKit Dynamics gives you the tools you need to easily add life to your UI, from springy tableviews cells to gravity based interactions.

Apple describes UIKit Dynamics as “A composable, reusable, declarative, real-world inspired animation, and interaction system

In other words, we now have a way of building up complex actions from a set of pre-defined behaviors that can combine user touches with a built-in physics engine, to create UI components that are not only responsive, but provide a simulated representation of real-world dynamics. This can include bouncing off boundaries, spring-like connections and simulated gravity.

To get a feel for what we can accomplish with UIKit Dynamics we need only look at how Apple has made use of it on the device. Dragging up on the camera icon on the device lock screen reveals the camera app, but if we swipe down with some speed, the lock screen appears to hit the boundary at the lower edge of the device and bounces back up, as if the edge was made of rubber. This mixes the interactive element, the velocity of movement provided by the user, with the Gravity simulation, a defined boundary and a bounce item property.

A different effect is used in the Messages App, where fast scrolling on the message list shows that the messages are now separated by springs, allowing them to spread out in a way that reflects the “apparent” momentum of the scrollview. This uses the attachment behavior and an option to interact directly with the cells of a Collection view to give an almost whimsical feel to the movements of the messages.

One common factor in these two examples is subtlety. Indeed, many users may not be consciously aware of either of these implementations, and that is quite by design. Apples’ intention is to provide a subtle dynamic feel to the UI components without taking away the focus on the content. This is something we should keep in mind as there is always the risk of overdoing the active elements of a UI and ultimately distracting, rather than guiding, the user.

Digging Deeper

So how is this implemented?

There are two main elements: Dynamic Animators and Dynamic Behaviors.

UIDynamicAnimator

The UIDynamicAnimator class keeps track of the assigned behaviors and provides the engine that controls the composition cycle of the views. It applies each of the behaviors in turn, to each of the attached views, until the composition is complete and ready to render. The animator only has one reference view which must be the parent view for any of the sub-views attached to it’s behaviors. So it’s reasonable to have a single animator for a full screen view and then add or remove behaviors to any of it’s sub-views as needed.

UIDynamicBehavior

The UIDynamicBehavior class describes the kind of influence it will have on a view, or views, and they can be added and removed from the animator at any time. Multiple behaviors can be added for a single view and, in fact, this is often desirable to create compound effects.

The predefined behaviors provide a great deal of flexibility, especially when combined to create compound effects, such as Gravity + Collision.

  • Gravity
  • Collision
  • Attachments
  • Snap
  • Forces
  • Item properties

Gravity is defined in terms of UIKit Gravity (1000 p/s^2) but it’s enough to know that it provides a close approximation to the real thing and that we can tune the value to modify the behavior for any view.

Collisions can occurs between a view and a boundary, or between 2 views associated with the same behavior. But we need to be cautious of having two many colliding views as there is a CPU cost that can rise quickly.

Attachments can be between a view and an anchor point, or again, between two views, and can be static or set to act like a spring by specifying a frequency and a damping factor. The attachments are invisible though, so if we want to show a connection we will need to add a specific view for that ourselves.

Snap effectively creates a set of springs and anchor points offset from each corner of the view, and with minimal damping, so that setting a new point will result in twisting and wobbling as it transitions to it’s new location.

Forces involve pushes of either a continuous type or a single “shove” using a “vector” defined via an angle and a magnitude.

Item Properties expose a set of additional elements that can be used to effect the outcome of behaviors. For example, adding a friction property will degrade the momentum of an object after it is pushed, and increasing the density will increase the effect of gravity on the view.

  • friction
  • resistance
  • angularResistance
  • elasticity
  • density
  • allowsRotation

One last cool feature of the behaviors is that they can be subclassed, exposing properties to allow us to create really interesting combinations of effects, where the dynamics engine can be used to drive actions beyond positioning and rotation.

If you’d like to know more, check out the UIKitDynamics Catalog samples code on the Apple WWDC website, as well as the WWDC Videos.

This is the ninth part in an 11-part Developer’s Guide to iOS 7. You can find the full guide here. For more information on how Double Encore can help you prepare your company for the changes in iOS 7, please email us.

Paul Warren

Paul Warren

Paul Warren is a Senior iOS developer at Double Encore. He is also the coauthor of iOS Recipes published by PragProg.com
Article


Add your voice to the discussion: