Interactive Animations

Check out this article for more details: http://www.objc.io/issue-12/interactive-animations.html

Transcript

1. Interactive Animations CocoaHeads Hamburg @floriankugler
2. What's this all about?
3. 2007 7 Years ago
4. The magic of the original iphone
5. Scrolling
6. direct manipulation
7. natural behavior
8. cancellable at any time
9. 2014 7 years later
10. let's take a look...
11. fire and forget
12. Why is this hard?
13. Problems » Model and presentation layer out of sync » Especially: Driving animations directly
14. Position
15. Position Velocity
16. Position
17. What do we do about it?
18. Requirements » Recognise user interaction at any time » Sync up presentation and model layer » Control animations indirectly
19. Solutions » UIKit Dynamics » Drive your own animations » Facebook POP
20. Do it yourself!
21. The ingredients » CADisplayLink » A little bit of physics » ... that's it!
22. 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 ... }
23. Physics
29. 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... }
30. Now what?
31. #1 Make animations first class citizens
32. #2 Drive animations indirectly
33. #3 Make them cancellable at any time
34. #3 Claim the animation high ground
35. Thanks! » http://www.objc.io/issue-12 » @floriankugler Made with Deckset