This document introduces UIKit Dynamics, which allows developers to add realistic physics-based animations and interactions to iOS apps. It discusses the key classes involved, including UIDynamicAnimator to link to the physics engine, UIDynamicBehavior to define interactions between items, and UIDynamicItem for the items affected. Specific behaviors like gravity, collision, push, snap and attachment are demonstrated and explained through code examples. The goal is to use real-world physics concepts to make apps feel more natural.

1. Making Your Apps
Dynamic
An Introduction to UIKit Dynamics
Andria Jensen
Founder, Logical Zen
@andriajensen
andria@logicalzen.com
Demo Project: bit.ly/360-dynamics

2. What does it mean?
• Realistic effects and animations
• Using real-world ideas and behaviors to make
your app feel more natural
• Powered by a 2D physics engine

3. The Basics
• UIDynamicAnimator
• UIDynamicBehavior
• UIDynamicItem

4. UIDynamicAnimator
• The link between you and the physics engine
• You must create and retain an animator for use
• Reference view to house the animations
self.animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];

5. UIDynamicBehavior
• Definition of how items interact
• An animator may have any number of behaviors
• Gravity, Collision, Push, Attachment, Snap
• …. or anything
gravityBehavior = [[UIGravityBehavior alloc] initWithItems:@[view]];

6. UIDynamicItem
• The item that you’d like to use dynamic
behavior(s)
• Anything adopting the UIDynamicItem protocol
• UIView and UICollectionViewLayoutAttributes

7. UIDynamicAnimator
UIDynamicItem
(UIView)
UIDynamicBehavior
(Gravity)
UIDynamicBehavior
(Collision)
UIDynamicItem
(UIView)
UIDynamicItem
(UIView)
UIDynamicItem
(UIView)

8. UISnapBehavior
• Snaps a view to a specified point
• Can adjust damping value (0 to 1, 0.5 is default)
• Adding the behavior triggers a single snap action
snapBehavior = [[UISnapBehavior alloc] initWithItem:self.dynamicView
snapToPoint:point];
!
snapBehavior.damping = 0.5;
[self.animator addBehavior:snapBehavior];

9. DEMO

10. UIGravityBehavior
• Standard UIKit gravity: 1 = 1000 points/second
2
• gravityDirection: default is 0,1 for a standard downward force
• (angle & magnitude) OR gravityDirection
• Only one allowed per animator
gravityBehavior = [[UIGravityBehavior alloc] initWithItems:@[view]];
gravityBehavior.gravityDirection = CGVectorMake(0.0, 1.0);
[self.animator addBehavior:gravityBehavior];

11. UIPushBehavior
• A continuous or instantaneous force
• Similar to the gravity behavior, but takes view size into account
• Adjust (angle & magnitude) OR pushDirection
• UIKit Newton measurement
1N = Force to move a 100x100 view at 100 pixels/second2
• Use the active property to turn a push behavior on/off

12. UIPushBehavior
pushBehavior = [[UIPushBehavior alloc] initWithItems:@[view]
mode:UIPushBehaviorModeContinuous];
pushBehavior.pushDirection = CGVectorMake(0.5, 0.5);
pushBehavior.active = NO;
!
[self.animator addBehavior:pushBehavior];
!

13. DEMO

14. UIAttachmentBehavior
• Anchors an item to a given point, or another item
• Can adjust length, frequency, & damping
• Think of attachments like springs between items
• Default attachment point is item’s center
• Use with gestures to make moving views around easy

15. UIAttachmentBehavior
attachment = [[UIAttachmentBehavior alloc] initWithItem:self.blueView
attachedToItem:self.orangeView];
!
attachment.length = 100.0;
attachment.frequency = 0.1;
attachment.damping = 0.2;
!
[self.animator addBehavior:attachment];

16. UIAttachmentBehavior
- (IBAction) handlePanGesture:(UIPanGestureRecognizer *)gesture {
CGPoint touchPoint = [gesture locationInView:self.view];
UIView* draggedView = gesture.view;
if (gesture.state == UIGestureRecognizerStateBegan) {
// pan started, create an attachment starting at the initial touch point
self.panAttachment = [[UIAttachmentBehavior alloc] initWithItem:draggedView
attachedToAnchor:touchPoint];
[self.animator addBehavior:self.panAttachment];
}
else if (gesture.state == UIGestureRecognizerStateChanged) {
// update the anchor point as the pan is moving around
self.panAttachment.anchorPoint = touchPoint;
}
else if (gesture.state == UIGestureRecognizerStateEnded) {
// remove the attachment behavior as soon as the pan ends
[self.animator removeBehavior:self.panAttachment];
}
}

17. DEMO

18. UICollisionBehavior
• Collisions between boundaries or items
• Use translatesReferenceBoundsIntoBoundary to make your
reference view’s frame the boundary
• Use collisionMode to specify whether items collide with
boundaries, other items, or both
• Multiple collision behaviors can be added to an animator
• Use UICollisionDelegate to know when collisions occur

19. UICollisionBehavior
collisionBehavior = [[UICollisionBehavior alloc] initWithItems:collisionViews];
collisionBehavior.translatesReferenceBoundsIntoBoundary = YES;
[collisionBehavior addBoundaryWithIdentifier:identifier
fromPoint:origin
toPoint:topRightPoint];
!
[self.animator addBehavior:collisionBehavior];

20. UIDynamicItemBehavior
velocity
friction
elasticity
resistance
density
allowsRotation

21. DEMO

22. Composite Behaviors
• A combination of several behaviors
• Use a UIDynamicBehavior subclass to easily re-
use composite behaviors
• [self addChildBehavior:collisionBehavior]

23. Questions?
Andria Jensen
Founder, Logical Zen
!
@andriajensen
andria@logicalzen.com
Demo Project: bit.ly/360-dynamics