Introduction to UIKit Dynamics

First given at Alt Tech Talks London 2013

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. How it works • UIDynamicItem • UIDynamicBehavior • UIDynamicAnimator
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 • 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 built-in behaviours • You can create your own
12. Built-in behaviours • UIAttachmentBehavior • UICollisionBehavior • UIGravityBehavior • UIPushBehavior • UISnapBehavior
13. UIGravityBehavior • Models gravity • Add to an item and it falls downwards • You can optionally configure magnitude and angle
14. UIGravityBehavior *behavior = [[UIGravityBehavior alloc] initWithItems:@[aView]]]; [animator addBehavior:behavior];
16. Units • Earth gravity: 9.8 m/s² • UIKit gravity: 1000 pt/s² • Adjust with magnitude property
17. UICollisionBehavior • Allows you to specify the way dynamic items react to the things around them • Collide with other dynamic items and/or boundaries
18. UICollisionBehavior *behavior = [[UICollisionBehavior alloc] initWithItems:@[view1]]]; behavior.translatesReferenceBoundsIntoBoundary = YES; [animator addBehavior:behavior];
20. More on setting boundaries • translatesReferenceBoundsIntoBoundary • setTranslatesReferenceBoundsIntoBoundaryWithInsets: • addBoundaryWithIdentifier:forPath:
21. UICollisionBehavior *behavior = [[UICollisionBehavior alloc] initWithItems:@[view1, view2]]]; behavior.translatesReferenceBoundsIntoBoundary = YES; [animator addBehavior:behavior];
23. Setting collision mode • collisionMode property • UICollisionModeItems • UICollisionModeBoundaries • UICollisionModeEverything
24. UIPushBehavior • Allows you to model a force • Can be instantaneous or continuous
27. UIPushBehavior *behavior = [[UIPushBehavior alloc] initWithItems:@[view1, view2] mode:UIPushBehaviorModeInstantaneous]]; behavior.magnitude = 1.0; behavior.angle = 0; // to the right [animator addBehavior:behavior];
28. 0.0 π M_PI π/2 M_PI_2 3π/2 M_PI_2 * 3
29. Units • 1 Newton: force required to give a 1kg mass an acceleration of 1 m/s² • 1 UIKit Newton: force required to give a 100 x 100 pt dynamic item with a density of 1.0 an acceleration of 100 pt/s² • magnitude property is measured in UIKit Newtons
30. Getting the right magnitude • Calculate mass of view based on size and density, use calculus to determine force needed for net overall movement • Or: fiddle with magnitude until it looks right :)
34. Wait, you said density? • “1 UIKit Newton: force required to give a 100 x 100 pt dynamic item with a density of 1.0 an acceleration of 100 pt/s²” • But UIDynamicItem only defines bounds, center, transform • So…?
35. UIDynamicItemBehavior • Just another UIDynamicBehavior • Use to fine-tune your UIDynamicItems • density • elasticity • friction • etc…
36. Next steps • UICollectionViewLayoutAttributes • Custom dynamic behaviours
37. Gotchas
39. UI Kit 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
40. Thank you! github.com/simonwhitaker/Angry-UIKit @s1mn simon@blackpixel.com