How do you explicitly animate a CALayer's backgroundColor?

Question

I'm trying to construct a CABasicAnimation to animate the backgroundColor property of a Core Animation CALayer, but I can't figure out how to properly wrap a CGColorRef value to pass to the animation. For example:

CGColorSpaceRef rgbColorspace = CGColorSpaceCreateDeviceRGB();
CGFloat values[4] = {1.0, 0.0, 0.0, 1.0}; 
CGColorRef red = CGColorCreate(rgbColorspace, values); 
CGColorSpaceRelease(rgbColorspace);

CABasicAnimation *selectionAnimation = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
[selectionAnimation setDuration:0.5f];
[selectionAnimation setToValue:[NSValue valueWithPointer:red]];
[layer addAnimation:selectionAnimation forKey:@"selectionAnimation"];

seems to do nothing to the backgroundColor property, I assume because handing it off as a pointer wrapped in an NSValue is not the way to pass it along.

backgroundColor is an animatable property of CALayer, so my question is: how do you set the From or To values for this particular property (preferably in a Mac / iPhone platform-independent way)?

Answer 1

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.

Answer 2

I was struggling with this problem until I experimentally found the roadblock. Setting the backgroundColor property of the layer, either directly or via the animation, will have no effect if you change the background color from the default (of unspecified) in Interface Builder, in the context of course of an item (such as UILabel) that's been placed in IB. So leave the background color unspecified and the above should work.

Answer 3

While the above code works, there is still a problem. If you use any color other than a "full rail" color, the system will animate to black. For example, say you only want to go to half red.

    CABasicAnimation *ba = nil;

    ba = [CABasicAnimation animationWithKeyPath: kBackgroundColor];

    self.paleRedColor = [UIColor colorWithRed: 127/255 green: 0 blue: 0 alpha: 1.0f];
    ba.toValue = (id) paleRedColor.CGColor;

    ba.repeatCount  = 1;
    ba.autoreverses = YES;
    ba.duration = kDuration*2;

    [self.view.layer addAnimation: ba forKey: @"flashColor"];

The above code animates to black instead of pale red. If you change the code to animate transparency with a gold background,

Does anyone have thoughts on how to change this code?

Andrew