Introduction to UIKit Dynamics (iOSCon 2014)

My talk on UIKit Dynamics given at iOSCon 2014 in London

1. An Introduction to UIKit Dynamics Simon Whitaker simon@blackpixel.com
2. What is UIKit Dynamics? • Added in iOS 7 • Adds a physics engine to UIKit
3. A physics engine? In UIKit?
4. “The UI helps users understand and interact with the content, but never competes with it.” iOS Human Interface Guidelines: Designing for iOS 7
5. “Visual layers and realistic motion impart vitality and heighten users’ delight and understanding.” iOS Human Interface Guidelines: Designing for iOS 7
7. UIDynamicAnimator How it works UIDynamicItem (e.g. a view) UIDynamicBehavior (e.g. gravity)
8. UIDynamicItem • Just a protocol • UIView implements it • Defines three animatable properties: • bounds • center • transform
9. UIDynamicAnimator • Responsible for applying behaviours to items • Defines a reference view, whose coordinate system is used for animations • Manages animations • Pauses when animations end
10. UIDynamicAnimator *animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];
11. UIDynamicBehavior • Models a real-world physical behaviour • UIKit provides a number of concrete subclasses • You can create your own
12. Built-in behaviours • UIAttachmentBehavior • UICollisionBehavior • UIGravityBehavior • UIPushBehavior • UISnapBehavior • UIDynamicItemBehavior
13. UIGravityBehavior • Models gravity • Add to an item and it falls downwards • You can optionally configure magnitude and angle
14. UIGravityBehavior *gravity = [[UIGravityBehavior alloc] initWithItems:@[aView]]]; [animator addBehavior:gravity];
15. Units • Earth gravity: 9.8 m/s² • UIKit gravity: 1000 pt/s² • Adjust with magnitude property
16. Stopping the animation • UIGravityBehavior will continue to animate endlessly, sending your view further and further down • Use the gravity behaviour’s action block • Called once every animation cycle
17. __weak __typeof(self) wSelf = self; self.gravity.action = ^{ if (!CGRectIntersectsRect(aView.frame, wSelf.view.bounds)){ [wSelf.gravity removeItem:aView]; } };
18. UICollisionBehavior • Allows you to specify the way dynamic items react to the things around them • Collide with other dynamic items and/or boundaries
19. UICollisionBehavior *collision = [[UICollisionBehavior alloc] initWithItems:@[view1, view2]]]; collision.translatesReferenceBoundsIntoBoundary = YES; [animator addBehavior:collision];
20. UIAttachmentBehavior • Connects one view to another view • Move one view and the other one moves too, as though attached by an invisible piece of string • Can use an anchor point (CGPoint) instead of second view • Can attach to a specific point within a view
22. UIAttachmentBehavior *attachment = [[UIAttachmentBehavior alloc] initWithItem:view1 attachedToItem:view2]]; [animator addBehavior:attachment];
25. UIOffset offset = UIOffsetMake(40, 40); UIAttachmentBehavior *attachment = [[UIAttachmentBehavior alloc] initWithItem:view1 offsetFromCenter:offset attachedToItem:view2 offsetFromCenter:UIOffsetZero]]; [animator addBehavior:attachment];
26. UISnapBehavior • Snaps a view to a given point with a springy animation • Imagine the view is held in its final position by four springs • Set damping to control how bouncy it is
27. CGPoint endPoint = CGPointMake(120, 130); UISnapBehavior *snap = [[UISnapBehavior alloc] initWithItem:view1 snapToPoint:endPoint]]; [animator addBehavior:snap];
28. UIDynamicItemBehavior • Just another UIDynamicBehavior • Use to tell the animator about the state of dynamic items • density • elasticity • addLinearVelocity:forItem: • etc…
29. Let’s build Tweetbot!
30. Tweetbot’s banner
31. UIGravityBehavior
32. UICollisionBehavior
33. UICollisionBehavior *collision = [[UICollisionBehavior alloc] initWithItems:@[self.bannerView]]; CGFloat boundaryY = self.bannerView.bounds.size.height; [collision addBoundaryWithIdentifier:@"floor" fromPoint:CGPointMake(0, boundaryY) toPoint:CGPointMake(self.view.bounds.size.width, boundaryY) ]; [self.animator addBehavior:collision];
34. UICollisionBehavior *collision = [[UICollisionBehavior alloc] initWithItems:@[self.bannerView]]; CGFloat boundaryY = self.bannerView.bounds.size.height; [collision addBoundaryWithIdentifier:@"floor" fromPoint:CGPointMake(0, boundaryY) toPoint:CGPointMake(self.view.bounds.size.width, boundaryY) ]; [self.animator addBehavior:collision];
35. UICollisionBehavior *collision = [[UICollisionBehavior alloc] initWithItems:@[self.bannerView]]; CGFloat boundaryY = self.bannerView.bounds.size.height; [collision addBoundaryWithIdentifier:@"floor" fromPoint:CGPointMake(0, boundaryY) toPoint:CGPointMake(self.view.bounds.size.width, boundaryY) ]; [self.animator addBehavior:collision];
36. UIGravityBehavior *gravity = [[UIGravityBehavior alloc] initWithItems:@[self.bannerView]]; [self.animator addBehavior:gravity]; ! UIDynamicItemBehavior *itemBehavior = [[UIDynamicItemBehavior alloc] initWithItems:@[self.bannerView]]; itemBehavior.elasticity = 0.4; [self.animator addBehavior:itemBehavior];
37. UIGravityBehavior *gravity = [[UIGravityBehavior alloc] initWithItems:@[self.bannerView]]; [self.animator addBehavior:gravity]; ! UIDynamicItemBehavior *itemBehavior = [[UIDynamicItemBehavior alloc] initWithItems:@[self.bannerView]]; itemBehavior.elasticity = 0.4; [self.animator addBehavior:itemBehavior];
38. My banner
39. Tweetbot’s image preview
40. Highlights UIAttachmentBehavior • Use -initWithItem:offsetFromCenter:attachedToAnchor: • Update anchorPoint when gesture changes
41. Highlights UISnapBehavior
42. Highlights UIDynamicItemBehavior • Get the velocity from the pan gesture recognizer using 
 -velocityInView: • Set the same velocity on the dynamic item behavior using 
 -addLinearVelocity:forItem:
43. My image preview
44. Next steps • UICollectionViewLayoutAttributes • Custom dynamic behaviours
45. Gotchas
47. UIKit Dynamics Summary • New in iOS 7 • Give UIViews real-world physical behaviours with very little code: • Create animator, associate with a reference view • Create behaviours, associate with dynamic items • Add the behaviours to the animator
48. UIKit Dynamics Summary • DO: delight and inform users of your UI • DON’T: try to use with Auto Layout • DON’T: rewrite Flappy Birds in UIKit
49. Thank you! github.com/simonwhitaker/ioscon-2014-demo @s1mn simon@blackpixel.com