Slide 1

Slide 1 text

Interactive Animations CocoaHeads Hamburg @floriankugler

Slide 2

Slide 2 text

What's this all about?

Slide 3

Slide 3 text

2007 7 Years ago

Slide 4

Slide 4 text

The magic of the original iphone

Slide 5

Slide 5 text

Scrolling

Slide 6

Slide 6 text

direct manipulation

Slide 7

Slide 7 text

natural behavior

Slide 8

Slide 8 text

cancellable at any time

Slide 9

Slide 9 text

2014 7 years later

Slide 10

Slide 10 text

let's take a look...

Slide 11

Slide 11 text

fire and forget

Slide 12

Slide 12 text

Why is this hard?

Slide 13

Slide 13 text

Problems » Model and presentation layer out of sync » Especially: Driving animations directly

Slide 14

Slide 14 text

Position

Slide 15

Slide 15 text

Position Velocity

Slide 16

Slide 16 text

Position

Slide 17

Slide 17 text

What do we do about it?

Slide 18

Slide 18 text

Requirements » Recognise user interaction at any time » Sync up presentation and model layer » Control animations indirectly

Slide 19

Slide 19 text

Solutions » UIKit Dynamics » Drive your own animations » Facebook POP

Slide 20

Slide 20 text

Do it yourself!

Slide 21

Slide 21 text

The ingredients » CADisplayLink » A little bit of physics » ... that's it!

Slide 22

Slide 22 text

CADisplayLink - (void)setupDisplayLink { self.displayLink = [screen displayLinkWithTarget:self selector:@selector(animationTick:)]; self.displayLink.paused = YES; [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes]; } - (void)animationTick:(CADisplayLink *)displayLink { CFTimeInterval dt = displayLink.duration; // drive your animation ... }

Slide 23

Slide 23 text

Physics

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Physics in Code - (void)animationTick:(CFTimeInterval)dt finished:(BOOL *)finished { static const float frictionConstant = 20; static const float springConstant = 300; CGFloat time = (CGFloat) dt; // friction force = velocity * friction constant CGPoint frictionForce = CGPointMultiply(self.velocity, frictionConstant); // spring force = (target point - current position) * spring constant CGPoint springVector = CGPointSubtract(self.targetPoint, self.view.center); CGPoint springForce = CGPointMultiply(springVector, springConstant); // force = spring force - friction force CGPoint force = CGPointSubtract(springForce, frictionForce); // velocity = current velocity + force * time / mass self.velocity = CGPointAdd(self.velocity, CGPointMultiply(force, time)); // position = current position + velocity * time self.view.center = CGPointAdd(self.view.center, CGPointMultiply(self.velocity, time)); // stop the animation when it's done... }

Slide 30

Slide 30 text

Now what?

Slide 31

Slide 31 text

#1 Make animations first class citizens

Slide 32

Slide 32 text

#2 Drive animations indirectly

Slide 33

Slide 33 text

#3 Make them cancellable at any time

Slide 34

Slide 34 text

#3 Claim the animation high ground

Slide 35

Slide 35 text

Thanks! » http://www.objc.io/issue-12 » @floriankugler Made with Deckset