Getting Your App Ready For iOS 7′s New Dynamic Interactions

April 07, 2014

There’s no need to bust out a physics textbook to make your iOS 7 app’s views animate like real-world objects. With iOS 7’s new Dynamics API, views can be influenced by gravity, attached to each other with springs, and bounced up against boundaries and each other.

Physics engines are no stranger to game designers. Whether it’s the perfect gravity-induced parabolas of Angry Birds or the swinging candy in Cut the Rope, we’re used to objects in games feeling real. To get this effect, game designers don’t write code to set the position of each object manually. Instead, they use a physics engine that treats the elements as bodies in a simulation and that uses Newton’s laws of motion to calculate how they move over time.

In using the engine, designers specify an object’s bounciness, its density, the level of gravity, and how things are attached to each other. In iOS 7, Apple made that technology available to UIKit-based apps as well. With these new UIKit features, we can integrate dynamic behavior without having to learn how to program a game engine. If you use them carefully, your UX will be more immersive and intuitive because users will interact with it as they would with objects in the real world.

Where Would You Use This?

If you are looking for places in your app to upgrade to feel more iOS 7-native, any animation is a candidate. You can see it all over the built-in apps, which will give you some ideas. I’d look anywhere that you’re already using several parallel animations with overlapping timelines and timed triggers to start other ones. Are you trying to do something that the Dynamics system would do for you automatically?

Another great candidate is anywhere you are using pan gestures to manipulate views, particularly with screen transitions. Play around with the camera icon on your phone’s lock screen to see an example. Tapping it will create an impulse force from the bottom, which gravity eventually overcomes. Dragging it up and dropping it shows how the view has an elastic bottom that bounces against the phone’s edge. You can even give the view an initial velocity by slamming it down.

Read more

No comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>