Animating Custom Layer Properties by Rob Napier

Slides from Rob Napier's (@cocoaphony) talk on Animating Custom Layer Properties with Core Animation at CocoaHeads June 2012 in Raleigh, NC

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:
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]; }); }
52. Q&A
53. robnapier.net