ANIMATING CUSTOM LAYER PROPERTIES How hard could it be? 

The Dream 

The Dream 

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 

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]; } 

!@#$ 

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; } 

Sweet 

Sweet Tap ... 

Sweet Tap ... Tap 

Sweet Tap ... Tap Tap 

Sweet Tap ... Tap Tap Tap 

Sweet Tap ... Tap Tap Tap Tap Tap Tap Tap Tap Tap Tap Tap Tap Dang it! 

CALayers Hate to Draw 

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

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]; } 

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? 

@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. 

We’re good now, right? 

We’re good now, right? 

Cross-fade?!?! 

THE MEAT Actions 

Magic • Ever wonder how those implicit layer animations work? 

Magic • Ever wonder how those implicit layer animations work? • Start a transaction 

Magic • Ever wonder how those implicit layer animations work? • Start a transaction • Assign something (setValue:forKey:) 

Magic • Ever wonder how those implicit layer animations work? • Start a transaction • Assign something (setValue:forKey:) • Look for automagical actions! 

Magic • Ever wonder how those implicit layer animations work? • Start a transaction • Assign something (setValue:forKey:) • Look for automagical actions! • Commit transaction 

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... 

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]; } 

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? 

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

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

The Hall of (Almost) Mirrors 

The Hall of (Almost) Mirrors • Presentation layer copies are created with initWithLayer: 

The Hall of (Almost) Mirrors • Presentation layer copies are created with initWithLayer: • You need to copy any non-@dynamic data here 

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. 

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

Bringing It All Together • setNeedsDisplay: • needsDisplayForKey: • @dynamic properties • actionForKey: 

No content

Living the dream 

QUESTIONS? 

New Dream (That Was Quick) 

New Dream (That Was Quick) • CA can animate lots of stuff, including CGColor 

New Dream (That Was Quick) • CA can animate lots of stuff, including CGColor • But not UIColor :( 

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 

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. 

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 

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; } ... } 

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? 

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]; }); } 

No content

Q&A 

robnapier.net