How do you explicitly animate a CALayer’s backgroundColor?

You don’t need to wrap CGColorRefs when setting the toValue or fromValue properties of a CABasicAnimation. Simply use the CGColorRef. To avoid the compiler warning, you can cast the CGColorRef to an id.

In my sample app, the following code animated the background to red.

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

However, when the animation is over, the background returns to the original color. This is because the CABasicAnimation only effects the presentation layer of the target layer while the animation is running. After the animation finishes, the value set in the model layer returns. So you are going to have to set the layers backgroundColor property to red as well. Perhaps turn off the implicit animations using a CATransaction.

You could save yourself this trouble by using an implicit animation in the first place.

Leave a Comment