UI Dynamics in iOS

iOS 7 is Gold Master. It introduces a lot of new features and frameworks. One of them is UIKit Dynamics that allows you to add real-world inspired interactions to your UI. You can add to your views behaviors as gravity, forces, elasticity and you can also combine them to create your own behaviors. This type of behaviors is usually used in gaming to provide a better UI interaction. UIKit Dynamics are designed for UI instead. If you want to build video games, please, refer to the SpriteKit framework that includes the same type of interactions. UIKit Dynamics do not replace Core Animation, UIView animations or motion effects.

UIKit Dynamics are part of the UIKit framework. The behaviors are simulated inside a context, defined by a UIDynamicAnimator object that uses a view (the Reference View) as the container of the views you are interacting with. The dynamic animator is the context in which you define one or more UIDynamicBehavior objects that must be added to a dynamic item (an object conform to the UIDynamicItem protocol). The Reference View defines the global coordinate system, in which you will run the interactions defined by the UIDynamicBehavior objects. A UIView and a UICollectionViewCell are also a dynamic items.

The UIDynamicAnimator controls the physics engine and keeps track of each behavior. You create a UIDynamicAnimator object in this way:

Again, the referenceView is the view that will contain the animations. For example, the above referenceView could be the main view of a view controller.

Once you created a dynamic animator, you can create a set of behaviors (UIDynamicBehavior objects) and add them to the animator. Behaviors are composable and subclassable. You add views (items) to each behavior and then add the behavior to the dynamic animator using the addBehavior: method. You can also remove the behavior, using removeBehavior:.

The UIDynamicAnimatorDelegate protocol allows to notify the animator delegate when the animation is paused (dynamicAnimatorDidPause:) or resumed (dynamicAnimatorWillResume:).

Primitive behaviors

UIKit offers a set of predefined behaviors you can use to create your behaviors. Each predefined behavior has a particular set of configurations. Gravity (UIGravityBehavior), collisions (UICollisionBehavior), attachment (UIAttachmentBehavior), snap (UISnapBehavior), forces (UIPushBehavior), item properties (UIDynamicItemBehavior) are the pre-defined behaviors. They are subclasses of theUIDynamicBehavior` class. Let’s give a look at each of them.

Gravity behavior

The UIGravityBehavior simulates the gravity force. It is controlled by a CGGravity vector with the dx and dy components (in the UIKit coordinate system). The default values are dx = 0.0 and dy = 1.0. That means when you apply this behavior to a dynamic item, it will move to the bottom edge of the device screen, simulating a view falling down.

Changing the CGGravity vector, you change of course the gravity direction. The gravity acceleration is defined as 1000 points/s^2.

Let’s try this. Launch Xcode 5 and create a new SingleView Application project. Name it FallingDown. In the Main.Storyboard, add a small 100 x 100 pixel view to the view of the view controller. Change the background of this view to red. Create an IBOutlet for this view in the view controller and name it redView.

Remember to connect the outlet to the view. Add also this property:

In the ViewController.m, add a viewDidAppear: method as follows:

Line 1 creates a dynamic animator using the main view of the my view controller as a reference view. This is the view that will contain the animation rendered by the dynamic animator. Line 2 creates the gravity behavior using the redView as a dynamic item. In general, you can creates a behavior using the initWithItems: method. Additionally, you can also create a behavior and then add an item later:

Both ways are correct. The addItem: method allows you to add dynamic items to the behavior. You can also remove items, using the removeItem: Finally, Line 3 adds the behavior to the dynamic animator. This triggers the animation.

Ok, you are ready. You can now run it. Really simple, right? Let’s change the gravity components. Add the following before Line 3:

Now, you will see the redView moving up.

Collision behavior

UICollisionBehavior simulates a collision between views and/or boundaries. Depending on the UICollisionMode (UICollisionBehaviorItems, UICollisionBehaviorBoundaries, UICollisionBehaviorEverything) you can define if a dynamic item can collide only with views, only with boundaries or both of them. As for the gravity behavior, you can add items to and remove from a collision behavior at any time.

Boundaries can be created in different ways. The easiest way is to use the boundaries of the reference view and set translateReferenceBoundsIntoBoundary to YES.

The collision behavior has also a UICollisionBehaviorDelegate protocol to notify the beginning and the end of a contact between views or boundaries.

Let’s try this dynamic behavior. The problem of the previous example is that the redView moves out of the screen. What I want to do is to create a boundary so that the redView remains always inside the reference view. Add these lines after Line 3 of the previous example.

Now, the animator will treat the reference view as boundaries and the redView will collide when it reaches it. Just for fun, change also the gravity components in this way:

Your viewDidAppear: should look like this:

You can try now to add a second view. Create a gravity behavior for it. Then, create a collision behavior for the redView and this new view. Finally, add this behavior to the dynamic animator.

Attachment behavior

UIAttachmentBehavior describes the behavior of a dynamic item connected to an anchor point or to another dynamic item. The attachment behavior types are: UIAttachmentBehaviorTypeAnchor and UIAttachmentBehaviorTypeItems. The type of behavior depends on the initializer used when you create an object of type UIAttachmentBehavior. You can use either initWithItem:attachedToAnchor: or initWithItem:offsetFromCenter:attachedToAnchor: to create an attachment of type UIAttachmentBehaviorTypeAnchor. Instead, you can use either initWithItem:attachedToItem: or initWithItem:offsetFromCenter:attachedToItem:offsetFromCenter: to create an attachment behavior of type UIAttachmentBehaviorTypeItems. Once created, you can configure the attachment behavior object changing its length, damping, and frequency properties.

Add the following piece of code after Line 4

Snap behavior

UISnapBehavior describes the behavior of a view snapped in a specific point. The movement proceeds with a spring-like effect, ending with an oscillation whose amount you can set. To create a snap behavior you use the initWithItem:snapToPoint:. After that, you can also change a damping value (default = 0.5). The damping property represents the amount of oscillation of a dynamic item during the conclusion of a snap.

Let’s add this behavior to our animator:

Push behavior

UIPushBehavior is a way to apply forces to a dynamic item. You define this behavior using 2 different modes: UIPushBehaviorModeContinuos and UIPushBehaviorModeInstantaneous. You can express a push behavior’s force vector in terms of magnitude and angle (in radians). Instead of using radian angle, you can equivalently express direction using x and y components with the pushDirection property. Whichever approach you use, the alternate, equivalent values update automatically.

When you add the push behavior to the animator, you enable it. After enabling it, you can activate it and deactivate it using the active property.

Let’s create a push behavior:

Then, let’s define the push direction:

and finally, let’s add this behavior to the animator:

The force is measured in UIKit Newton (1N is the force to move a 100x100 view with an acceleration of 100 pixels/s^2). The difference between the gravity and the push behavior resides in the view density. The gravity is not dependent on the view size, while the push depends on the size.

Dynamic Item Behavior

UIDynamicItemBehavior allows to change item-level properties: friction, elasticity, resistance, density, angularResistance, allowsRotation. For example, you can disable rotation for a dynamic item behavior’s items by returning NO from the allowsRotation property. To configure interaction among the behavior’s items, use the elasticity and friction properties.

You can also add a linear velocity and an angular velocity to an item using addLinearVelocity:forItem: and addAngularVelocity:forItem:.

Dynamic Items

Until now we used a UIView object as a dynamic item. In general, a dynamic item is an object conform to the UIDynamicItem protocol. UIView and UICollectionViewLayoutAttributes implement this protocol by default. Obviously, you can add this protocol to other objects.

For this protocol, all animated items must implement a center, a bounds and a transform property. Note that only 2D-rotation transforms are supported. These properties are read only once by UIKit when you add the item to the animator the first time. Then, center and transform are set on every animation tick.

Combining behaviors

The predefined behaviors are subclasses of UIDynamicBehavior. You can create your behavior defining your UIDynamicBehavior subclass and defining the initWithItems: initializer. In this initializer you add the behaviors you want as children of your class. For example,

To use your own behavior, you simply initialize it with the previous initWithItems: method.

Conclusions

UIKit Dynamics introduce a novel human-interface interaction mechanism. The new user interface design combined with UIKit dynamics pushes iOS 7 ahead with respect to other mobile operative systems. This gives iOS developers the ability to develop more intuitive and vital apps. Developers seeking to seamlessly integrate dynamics in their applications should contact iNVASIVECODE and arrange specialized iOS consulting or attend an intensive iOS training class.

Keep coding,

Geppy

iOS Consulting | INVASIVECODE

iOS Training | INVASIVECODE

(Visited 37 times, 1 visits today)