Slide 1

Slide 1 text

An Introduction to UIKit Dynamics Simon Whitaker [email protected]

Slide 2

Slide 2 text

What is UIKit Dynamics? • Added in iOS 7 • Adds a physics engine to UIKit

Slide 3

Slide 3 text

A physics engine? In UIKit?

Slide 4

Slide 4 text

“The UI helps users understand and interact with the content, but never competes with it.” iOS Human Interface Guidelines: Designing for iOS 7

Slide 5

Slide 5 text

“Visual layers and realistic motion impart vitality and heighten users’ delight and understanding.” iOS Human Interface Guidelines: Designing for iOS 7

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

How it works • UIDynamicItem • UIDynamicBehavior • UIDynamicAnimator

Slide 8

Slide 8 text

UIDynamicItem • Just a protocol • UIView implements it • Defines three animatable properties: • bounds • center • transform

Slide 9

Slide 9 text

UIDynamicAnimator • Responsible for applying behaviours to items • Defines a reference view • Manages animations • Pauses when animations end

Slide 10

Slide 10 text

UIDynamicAnimator *animator = [[UIDynamicAnimator alloc] initWithReferenceView:self.view];

Slide 11

Slide 11 text

UIDynamicBehavior • Models a real-world physical behaviour • UIKit provides a number of built-in behaviours • You can create your own

Slide 12

Slide 12 text

Built-in behaviours • UIAttachmentBehavior • UICollisionBehavior • UIGravityBehavior • UIPushBehavior • UISnapBehavior

Slide 13

Slide 13 text

UIGravityBehavior • Models gravity • Add to an item and it falls downwards • You can optionally configure magnitude and angle

Slide 14

Slide 14 text

UIGravityBehavior *behavior = [[UIGravityBehavior alloc] initWithItems:@[aView]]]; [animator addBehavior:behavior];

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Units • Earth gravity: 9.8 m/s² • UIKit gravity: 1000 pt/s² • Adjust with magnitude property

Slide 17

Slide 17 text

UICollisionBehavior • Allows you to specify the way dynamic items react to the things around them • Collide with other dynamic items and/or boundaries

Slide 18

Slide 18 text

UICollisionBehavior *behavior = [[UICollisionBehavior alloc] initWithItems:@[view1]]]; behavior.translatesReferenceBoundsIntoBoundary = YES; [animator addBehavior:behavior];

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

More on setting boundaries • translatesReferenceBoundsIntoBoundary • setTranslatesReferenceBoundsIntoBoundaryWithInsets: • addBoundaryWithIdentifier:forPath:

Slide 21

Slide 21 text

UICollisionBehavior *behavior = [[UICollisionBehavior alloc] initWithItems:@[view1, view2]]]; behavior.translatesReferenceBoundsIntoBoundary = YES; [animator addBehavior:behavior];

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Setting collision mode • collisionMode property • UICollisionModeItems • UICollisionModeBoundaries • UICollisionModeEverything

Slide 24

Slide 24 text

UIPushBehavior • Allows you to model a force • Can be instantaneous or continuous

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

UIPushBehavior *behavior = [[UIPushBehavior alloc] initWithItems:@[view1, view2] mode:UIPushBehaviorModeInstantaneous]]; behavior.magnitude = 1.0; behavior.angle = 0; // to the right [animator addBehavior:behavior];

Slide 28

Slide 28 text

0.0 π M_PI π/2 M_PI_2 3π/2 M_PI_2 * 3

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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 :)

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

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…?

Slide 35

Slide 35 text

UIDynamicItemBehavior • Just another UIDynamicBehavior • Use to fine-tune your UIDynamicItems • density • elasticity • friction • etc…

Slide 36

Slide 36 text

Next steps • UICollectionViewLayoutAttributes • Custom dynamic behaviours

Slide 37

Slide 37 text

Gotchas

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Thank you! github.com/simonwhitaker/Angry-UIKit @s1mn [email protected]