Making Your Apps Dynamic

An Introduction to UIKit Dynamics

Andria Jensen Founder, Logical Zen

@andriajensen andria@logicalzen.com

Demo Project: bit.ly/360-dynamics

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

The Basics• UIDynamicAnimator

• UIDynamicBehavior

• UIDynamicItem

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];

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]];

UIDynamicItem • The item that you’d like to use dynamic

behavior(s)

• Anything adopting the UIDynamicItem protocol

• UIView and UICollectionViewLayoutAttributes

UIDynamicAnimator

UIDynamicItem (UIView)

UIDynamicBehavior (Gravity)

UIDynamicBehavior (Collision)

UIDynamicItem (UIView)

UIDynamicItem (UIView)

UIDynamicItem (UIView)

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];

DEMO

UIGravityBehavior• Standard UIKit gravity: 1 = 1000 points/second2

• 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];

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

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

DEMO

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

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

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]; } }

DEMO

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

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

UIDynamicItemBehaviorvelocity

friction

elasticity

resistance

density

allowsRotation

DEMO

Composite Behaviors• A combination of several behaviors

• Use a UIDynamicBehavior subclass to easily re-use composite behaviors

• [self addChildBehavior:collisionBehavior]

Questions?

Andria Jensen Founder, Logical Zen

!@andriajensen

andria@logicalzen.com

Demo Project: bit.ly/360-dynamics