During the last month, I learned about the awesome UIKit Dynamic animations framework. It’s a physics-based animation and it’s really fun when you use it wisely in your applications. You can add different physics-based behaviors like collisions, bouncing, gravity .. and a lot more behaviors and settings. Today I’ll take you in a quick tour on how to use the framework, and then, we’ll build together a fun demo app that demonstrates the effect of combining different behaviors, also the effect of changing magnitudes and settings of the different behavior.
So, enough talking let’s get our hands dirty!
UIKit Dynamics is a full real-world physics engine integrated into UIKit. It allows you to create interfaces that feel real by adding behaviors such as gravity, attachments, collision and forces. You define the physical traits that you would like your interface elements to adopt, and the dynamics engine takes care of the rest.
Add UIDynamicItem(s) to the animator to be animated, usually UIViews.
Let’s start with a simple example, the first step from the above end result animation is to only draw a square and use the UIKit Dynamics to make it fall due to gravity pointing downward.
First, let’s draw our first static square at the middle of our view.
From the documentation, “a dynamic animator provides physics-related capabilities and animations for its dynamic items, and provides the context for those animations. It does this by intermediating between the underlying iOS physics engine and dynamic items, via behavior objects you add to the animator”.
That’s the class that actually drives everything.
When creating it, you have to specify the top level view of the view hierarchy where you want to animate your views (i.e. any view that this animator will act on, must be subview to this root view).
You specify dynamic behaviors using any of the iOS primitive dynamic behavior classes: UIAttachmentBehavior, UICollisionBehavior, UIDynamicItemBehavior, UIGravityBehavior, UIPushBehavior, and UISnapBehavior. Each of these provides configuration options and lets you associate one or more dynamic items to the behavior. To activate a behavior, add it to an animator.
To use dynamics, configure one or more dynamic behaviors—including providing each with a set of dynamic items—and then add those behaviors to a dynamic animator.
UIDyanamicItem is just a protocol, which UIView implements.
We can make our square more elastic, by creating/configuring UIDynamicItemBehavior.
A dynamic item behavior represents a base dynamic animation configuration for one or more dynamic items.
Elasticity: The amount of elasticity applied to collisions for the behavior’s dynamic items.
Friction: The linear resistance for the behavior’s dynamic items when two slide against each other.
Density: The relative mass density of the behavior’s dynamic items.
Resistance: The linear resistance for the behavior’s dynamic items, which reduces their linear velocity over time.
Don’t confuse UIDynamicItemBehavior with UIDynamicBehavior, which is the parent class of all behaviors.
In the below demo application, I only used the above steps, with some extra minor additions to help us feel the effect of changing the multiple configurations.
Configuration screen added, it really makes things more fun, you gotta play with it a little.
In order to make things neat, I grouped all the square behaviors in one UIDynamicBehavior subclass (SquareBehavior).
I made use from the UIPushBehavior.
I made use from the UISnapBehavior.
Made things more fun by throwing colorful squares from 2 canons ;] placed on the sides of the screen.
The demo app is available on Github, feel free clone, try & customize it.
Detecting collisions between objects and boundaries.
Illustrating what’s meant by “stasis”, and how to detect it.
Note on how to avoid memory cycles.
I’ll be happy answering your questions or inquiries, just write a comment below.
@a_abdurrahman @NatashaTheRobot never played with UIKitDynamics before the post was a good read & I liked the iterative approach, nice work!
← try, try! & try? what’s the difference, and when to use each?
Very nice tutorial! Two minor issues that I ran into is that I need to connect the IBOutlet to the View, otherwise it would crash on launch. Also, had to call animateSquare() in viewDidLoad() to get it to do it’s thing.