How to animate the background color of a UILabel?

Question

This looks like it should work, but doesn't. The color turns green at once.

    self.labelCorrection.backgroundColor = [UIColor whiteColor];
    [UIView animateWithDuration:2.0 animations:^{
        self.labelCorrection.backgroundColor = [UIColor greenColor];
    }];

Answer 1

Here is the reference:

animations A block object containing the changes to commit to the views. This is where you programmatically change any animatable properties of the views in your view hierarchy. This block takes no parameters and has no return value. This parameter must not be NULL

What I understand about this is when your view call the animation block, then your view label background color is commited to be green since that time. Then, if you don't change the label background color to something else, then it will always be green. This is what I guess

Answer 2

First of all, I have not tried this out my self, but I've given it some thought in the last weeks. I guess, that the color-property of your view cannot be animated, like i.e. "hidden", changes will appear at once. A possible solution would be, to overlay two labels the upper one with your old color, the one below with the new one. Then you could simply fade the upper one out. I'm not sure though, if the blending will look nicely.

Answer 3

I can't find it documented anywhere, but it appears the backgroundColor property of UILabel is not animatable, as your code works fine with a vanilla UIView. This hack appears to work, however, as long as you don't set the background color of the label view itself:

#import <QuartzCore/QuartzCore.h>

...

theLabel.layer.backgroundColor = [UIColor whiteColor].CGColor;

[UIView animateWithDuration:2.0 animations:^{
    theLabel.layer.backgroundColor = [UIColor greenColor].CGColor;
} completion:NULL];

Answer 4

Do the color animation manually, based off of an NSTimer or CADisplayLink callback at some reasonable frame rate (say 20 fps). You will have to calculate your own color change curve in RGB or HSV based on the fractional elapsed time over the full animation time (2.0 seconds in your example), or use an array of 40 intermediate colors.