How to change CALayer color during animation?

Question

I want the layer to start with green, then slowly to yellow, orange, and finally red. How to do it?

CAShapeLayer *layer = [CAShapeLayer layer]; [layer setStrokeColor:[UIColor greenColor].CGColor]; [layer setLineWidth:5.0f]; [layer setFillColor:[UIColor clearColor].CGColor]; UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:button.bounds cornerRadius:10.0f]; layer.path = path.CGPath; CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; animation.fromValue = [NSNumber numberWithFloat:0.0f]; animation.toValue = [NSNumber numberWithFloat:1.0f]; animation.duration = 4.0f; [layer addAnimation:animation forKey:@"myStroke"]; [button.layer addSublayer:layer]; 

Answer 1

I just wrote this code for you. I used CAKeyframeAnimation both because it allows multiple toValues , and because it allows more control over the animation.

 //Set up layer and add it to view CALayer *layer = [CALayer layer]; layer.frame = self.view.bounds; [self.view.layer addSublayer:layer]; //Create animation CAKeyframeAnimation *colorsAnimation = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"]; colorsAnimation.values = [NSArray arrayWithObjects: (id)[UIColor greenColor].CGColor, (id)[UIColor yellowColor].CGColor, (id)[UIColor orangeColor].CGColor, (id)[UIColor redColor].CGColor, nil]; colorsAnimation.keyTimes = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.25], [NSNumber numberWithFloat:0.5], [NSNumber numberWithFloat:0.75],[NSNumber numberWithFloat:1.0], nil]; colorsAnimation.calculationMode = kCAAnimationPaced; colorsAnimation.removedOnCompletion = NO; colorsAnimation.fillMode = kCAFillModeForwards; colorsAnimation.duration = 3.0f; //Add animation [layer addAnimation:colorsAnimation forKey:nil]; 

Answer 2

Using CAKeyframeAnimation is ok, but sometimes you need something simpler. Here's how to do it using CABasicAnimation and 3 lines of code.

 CABasicAnimation *colorAnimation = [CABasicAnimation animationWithKeyPath:@"backgroundColor"]; colorAnimation.toValue = (id)[UIColor redColor].CGColor; [layer addAnimation:colorAnimation forKey:nil];