Animating Custom Layer Properties by Rob Napier

Transcript

1. ANIMATING CUSTOM LAYER PROPERTIES How hard could it be?

2. The Dream

3. The Dream

4. Layer @interface CircleLayer : CALayer @property CGFloat radius; @end @implementation

   CircleLayer - (void)drawInContext:(CGContextRef)ctx { CGContextSetFillColorWithColor(ctx, [[UIColor redColor] CGColor]); CGFloat radius = self.radius; CGRect rect; rect.size = CGSizeMake(radius, radius); rect.origin.x = (self.bounds.size.width - radius) / 2; rect.origin.y = (self.bounds.size.height - radius) / 2; CGContextAddEllipseInRect(ctx, rect); CGContextFillPath(ctx); } @end

5. ViewController - (void)viewDidLoad { CircleLayer *circleLayer = [CircleLayer new]; circleLayer.radius

   = 50; circleLayer.frame = self.view.bounds; [self.view.layer addSublayer:circleLayer]; UIGestureRecognizer *g = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tap:)]; [self.view addGestureRecognizer:g]; } - (void)tap:(UIGestureRecognizer *)recognizer { [CATransaction setAnimationDuration:2]; CircleLayer *circleLayer = (CircleLayer*)[self.view.layer.sublayers objectAtIndex:0]; [circleLayer setRadius:100.0]; }

6. !@#$

7. CALayers Hate to Draw • Layers don’t display just because

   they need to • Not even the first time • Not even when you change stuff... normally. - (CircleLayer *)init { self = [super init]; if (self) { [self setNeedsDisplay]; } return self; }

8. Sweet

9. Sweet Tap ...

10. Sweet Tap ... Tap

11. Sweet Tap ... Tap Tap

12. Sweet Tap ... Tap Tap Tap

13. Sweet Tap ... Tap Tap Tap Tap Tap Tap Tap

    Tap Tap Tap Tap Tap Dang it!

14. CALayers Hate to Draw

15. CALayers Hate to Draw • Actually, it just doesn’t know

    it needs to

16. CALayers Hate to Draw • Actually, it just doesn’t know

    it needs to @implementation CircleLayer @dynamic radius; + (BOOL)needsDisplayForKey:key:(NSString *)key { if ([key isEqualToString:@"radius"]) { return YES; } return [super needsDisplayForKey:key]; }

17. CALayers Hate to Draw • Actually, it just doesn’t know

    it needs to @implementation CircleLayer @dynamic radius; + (BOOL)needsDisplayForKey:key:(NSString *)key { if ([key isEqualToString:@"radius"]) { return YES; } return [super needsDisplayForKey:key]; } Hey, what’s that?

18. @dynamic? • CALayer auto-generates its own accessors • It does

    not play well with ivars (like from @synthesize) • You will forget. It will drive you crazy. Try to remember.

19. We’re good now, right?

20. We’re good now, right?

21. Cross-fade?!?!

22. THE MEAT Actions

23. Magic • Ever wonder how those implicit layer animations work?

24. Magic • Ever wonder how those implicit layer animations work?

    • Start a transaction

25. Magic • Ever wonder how those implicit layer animations work?

    • Start a transaction • Assign something (setValue:forKey:)

26. Magic • Ever wonder how those implicit layer animations work?

    • Start a transaction • Assign something (setValue:forKey:) • Look for automagical actions!

27. Magic • Ever wonder how those implicit layer animations work?

    • Start a transaction • Assign something (setValue:forKey:) • Look for automagical actions! • Commit transaction

28. Magic • Ever wonder how those implicit layer animations work?

    • Start a transaction • Assign something (setValue:forKey:) • Look for automagical actions! • Commit transaction • Apply all those automagical actions...

29. Actions - (id < CAAction >)actionForKey:(NSString *)key { if ([self

    presentationLayer] != nil) { if ([key isEqualToString:@"radius"]) { CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"radius"]; anim.fromValue = [[self presentationLayer] valueForKey:@"radius"]; return anim; } } return [super actionForKey:key]; }

30. Actions - (id < CAAction >)actionForKey:(NSString *)key { if ([self

    presentationLayer] != nil) { if ([key isEqualToString:@"radius"]) { CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"radius"]; anim.fromValue = [[self presentationLayer] valueForKey:@"radius"]; return anim; } } return [super actionForKey:key]; } Hey, what’s that?

31. Copy (initWithLayer:) Copy (initWithLayer:) Presentation Model Render

32. Copy (initWithLayer:) Copy (initWithLayer:) Presentation Model Render

33. The Hall of (Almost) Mirrors

34. The Hall of (Almost) Mirrors • Presentation layer copies are

    created with initWithLayer:

35. The Hall of (Almost) Mirrors • Presentation layer copies are

    created with initWithLayer: • You need to copy any non-@dynamic data here

36. The Hall of (Almost) Mirrors • Presentation layer copies are

    created with initWithLayer: • You need to copy any non-@dynamic data here • Who needs non-@dynamic data in a CALayer? Beats me.

37. The Hall of (Almost) Mirrors • Presentation layer copies are

    created with initWithLayer: • You need to copy any non-@dynamic data here • Who needs non-@dynamic data in a CALayer? Beats me. • Just use @dynamic. Fewer bugs. (Subject to change.)

38. Bringing It All Together • setNeedsDisplay: • needsDisplayForKey: • @dynamic

    properties • actionForKey:
39. None

40. Living the dream

41. QUESTIONS?

42. New Dream (That Was Quick)

43. New Dream (That Was Quick) • CA can animate lots

    of stuff, including CGColor

44. New Dream (That Was Quick) • CA can animate lots

    of stuff, including CGColor • But not UIColor :(

45. New Dream (That Was Quick) • CA can animate lots

    of stuff, including CGColor • But not UIColor :( • I’m so lazy.... I want it to animate UIColor for me

46. New Dream (That Was Quick) • CA can animate lots

    of stuff, including CGColor • But not UIColor :( • I’m so lazy.... I want it to animate UIColor for me • Yeah, pretty lazy.... but a good example.

47. The Boring Parts @interface CircleLayer : CALayer @property CGFloat radius;

    @property UIColor *color; @end @dynamic color; - (void)setColorRef:(CGColorRef)colorRef { self.color = [UIColor colorWithCGColor:colorRef]; } - (CGColorRef)colorRef { return self.color.CGColor; } ...Update needsDisplayForKey, init, drawInContext:... @interface CircleLayer () @property CGColorRef colorRef; @end

48. The Redirecting Action - (id < CAAction >)actionForKey:(NSString *)key {

    ... if ([key isEqualToString:@"color"]) { CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"colorRef"]; anim.fromValue = [[self presentationLayer] valueForKey:@"colorRef"]; return anim; } ... }

49. The Redirecting Action - (id < CAAction >)actionForKey:(NSString *)key {

    ... if ([key isEqualToString:@"color"]) { CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"colorRef"]; anim.fromValue = [[self presentationLayer] valueForKey:@"colorRef"]; return anim; } ... } Who said we have to animate ourselves?

50. Let’s Do This - (void)tap:(UIGestureRecognizer *)recognizer { [CATransaction setAnimationDuration:2]; CircleLayer

    *circleLayer = (CircleLayer*)[self.view.layer.sublayers objectAtIndex:0]; [circleLayer setRadius:100.0]; [circleLayer setColor:[UIColor greenColor]]; // Change in flight! double delayInSeconds = 1.0; dispatch_time_t popTime = dispatch_time(DISPATCH_TIME_NOW, delayInSeconds * NSEC_PER_SEC); dispatch_after(popTime, dispatch_get_main_queue(), ^(void){ [CATransaction setAnimationDuration:1]; [circleLayer setPosition:CGPointZero]; [circleLayer setRadius:25.0]; }); }
51. None

52. Q&A

53. robnapier.net