iOS 9 Learning Series: UIKit Dynamics

UIKit Dynamics was first introduced in iOS 7, allowing developers to add interactive animations to their app interfaces that simulate the physical world in an easy way. iOS 9 has added some big improvements, and we’ll look at some of them in this article.

Non-Rectangular Collision Bounds

Before iOS 9, UIKitDynamics' collision bounds could only be rectangles. This made some collision effects that were not perfect rectangles look a little weird. iOS 9 supports three types of collision bounds: Rectangle, Ellipse, and Path. Path can be any path as long as it is counterclockwise and does not cross each other. One caveat is that the path must be convex and cannot be concave.

To provide a custom collision bounds, you can define a subclass of UIView.

If you have a custom view with a custom bounds, you can do the same.

UIFieldBehavior

Before iOS 9, there was only one type of behavior: gravity behavior. Developers could not extend or customize other types.

UIKit Dynamics now includes more behaviors.

Linear Gravity

Radial Gravity

Noise

Custom

These behaviors all have properties that can be used to set different effects, and can be easily added and used.

Building a UIFieldBehavior & Non-Rectangular Collision Bounds Example

Let's create an example that combines both features. It has a couple of views (an ellipse and a square) with some collision logic and a UIFieldBehavior that adds some noise.

To use UIKit Dynamics, first create a UIDynamicAnimator. In the viewDidLoad method, create a reference to your variable.

Now you need to add some views that will animate them.

These are the two basic behaviors we add to the view.

As a first behavior, we added a gravity sensing model.

Next we added a UIFieldBehavior. We initialized it using the noiseFieldWithSmoothness method. We added the square and ellipse to the behavior and then added the field behavior to the animator.

We then created a UICollisionBehavior. This prevents the two elements from overlapping when they collide, and adds an animation effect to the physical model. We used setTranslatesReferenceBoundsIntoBoundaryWithInsets to add an edge setting to the view. If this box is not set, the gravity-sensing animation just now will cause the square and ellipse views to fall below the screen and not come back. (We will not see the collision)

When it comes to gravity sensing, we need to make sure that its direction is always downward, which is the direction in the actual physical world. To do this, we need to use the CoreMotion framework. Create a CMMotionManager variable.

We set a variable as a class property because we always need it. Otherwise, CMMotionManager will be released and cannot be updated. When we find that the direction of the device has changed, we set the gravityDirection property of the gravity sensing model to make the direction of gravity always downward.

Note that our example only supports portrait mode. If you want to support all directions, you can add some calculation code yourself.

When you open the app, you will see a screen similar to the following.

The square view moves around the ellipse, but you can't see what's going on. WWDC session 229 introduces a method that allows you to visualize the effect of the animation. You need to add a bridging header (if the project is written in Swift) and add the following code.

This will expose some private APIs that will allow UIDynamicAnimator to turn on debug mode. This will allow you to observe the space distortion. In the ViewController class, set the animator's debugEnable property to true.

#p#

Now when you open the app, you will be able to see the space distortion provided by UIFieldBehavior.

You can also see the outlines around the square and circle when the views collide. You can also add some other properties that are not annotated in the API, but are available in lldb. For example, debugInterval and debugAnimationSpeed, which are very helpful when you need to debug your animations.

We can see that the field works and we can clearly see the collision effect. If we want to tweak more properties, we can set specific values ​​for the object. Then restart the app to see the changes. We add three UISlider control components to the page. They control force, smoothness and speed respectively. The force component value range is 0-25, and the other two are 0-1.

Once you have created it in Interface Builder, drag the three action events into the ViewController class, then update their properties as shown below.

Now, run the app and you can use the control bar to set the specific values ​​of the properties to observe the actual effect of the animation.

Hopefully, this will allow you to quickly understand how UIFieldBehavior and non-rectangular collision bounds APIs in UIKit Dynamics work and debug. I recommend that you view the effects on a real device (not a simulator), otherwise you won’t be able to see the effects of motion changes.

Further reading

To learn more about the new features of UIKit Dynamics, please visit session 229 What's New in UIKit Dynamics and Visual Effects from WWDC 2015. Also, don't forget that our demo project files can be found on Github.