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

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 2

Swift

1. ( important ) Set the UILabel's background color to clear (either in IB or in code). For example:

    override func viewDidLoad() { super.viewDidLoad() myLabel.backgroundColor = UIColor.clear } 

2. Animate the layer background color.

    @IBAction func animateButtonTapped(sender: UIButton) { UIView.animate(withDuration: 1.0, animations: { self.myLabel.layer.backgroundColor = UIColor.red.cgColor }) } 

Note that CGColor is added after the UIColor .

Result

Answer 3

You CAN animate it, but I had to first set it (programmatically) to clearColor for some reason. Without that, the animation either didn't work or wasn't visible.

I am animating the background color of a UILabel in a custom table cell. Here is the code in the willDisplayCell method. I wouldn't try to set the animation in cellForRow, since a lot of the layout gets tinkered with by the table.

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
        ((RouteListCell *)cell).name.backgroundColor = [UIColor clearColor];
        [((RouteListCell *)cell).name backgroundGlowAnimationFromColor:[UIColor whiteColor] toColor:[UIColor redColor] clearAnimationsFirst:YES];
}

Here's my animation routine:

-(void) backgroundGlowAnimationFromColor:(UIColor *)startColor toColor:(UIColor *)destColor clearAnimationsFirst:(BOOL)reset;
{
    if (reset)
    {
        [self.layer removeAllAnimations];
    }

    CABasicAnimation *anAnimation = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
    anAnimation.duration = 1.00;
    anAnimation.repeatCount = HUGE_VAL;
    anAnimation.autoreverses = YES;
    anAnimation.fromValue = (id) startColor.CGColor; // [NSNumber numberWithFloat:1.0];
    anAnimation.toValue = (id) destColor.CGColor; //[NSNumber numberWithFloat:0.10];
    [self.layer addAnimation:anAnimation forKey:@"backgroundColor"];
}

Answer 4

Swift 3

To animate your label background color from white to green, set up your label like this:

self.labelCorrection.backgroundColor = UIColor.clear
self.labelCorrection.layer.backgroundColor = UIColor.white.cgColor

Animate like this:

UIView.animate(withDuration: 2.0) { 
    self.labelCorrection.layer.backgroundColor = UIColor.green.cgColor
}

To go back to the original state, so you can animate again, make sure you remove animations:

self.labelCorrection.layer.backgroundColor = UIColor.white.cgColor
self.labelCorrection.layer.removeAllAnimations()

Answer 5

Please try this,

[UIView transitionWithView:yourView duration:0.2 options:UIViewAnimationOptionTransitionNone animations:^{

[yourView setBackgroundColor:[UIColor colorWithRed:0.8588 green:0.8588 blue:0.8588 alpha:1]];
    }completion:^(BOOL finished) {

 }];

It works for me.

Answer 6

I recently came across this problem once again and after some research I figured that basically nothing changed (and probably won't in foreseeable future), so I ended up using Facebook POP framework (not only) for that.

You can easily do animations of basic properties on both view and layer, but in addition, it provides smooth transition between colors (and basically whatever you want, even your custom types, with some additional coding). So for background color, you would do something like this:

   // Create spring animation (there are more types, if you want)
   let animation = POPSpringAnimation(propertyNamed: kPOPViewBackgroundColor)

   // Configure it properly
   animation.autoreverses = false
   animation.removedOnCompletion = true
   animation.fromValue = UIColor.yourBeginningColor()
   animation.toValue = UIColor.yourFinalColor()

   // Add new animation to your view - animation key can be whatever you like, serves as reference
   label.pop_addAnimation(animation, forKey: "YourAnimationKey")

Viola, now you can animate background colors on everything that has that property!

Answer 7

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.

Answer 8

Swift 4.1 UILabel Extension:

Add this extension to your code:

extension UILabel {

    /** Animates the background color of a UILabel to a new color. */
    func animateBackgroundColor(to color : UIColor?, withDuration : TimeInterval, completion : ((Bool) -> Void)? = nil) {
        guard let newColor = color else { return }
        self.backgroundColor = .clear
        UIView.animate(withDuration: withDuration, animations: {
            self.layer.backgroundColor = newColor.cgColor
        }, completion: completion)
    }

}

You should use it like this:

myUILabel.animateBackgroundColor(to: .red, withDuration: 0.5)

Now, if you want to restore the original color, use it like this:

// Storing the orignal color:
let originalColor = myUILabel.backgroundColor

// Changing the background color:
myUILabel.animateBackgroundColor(to: .red, withDuration: 0.5)

// ... Later:

// Restoring the original color:
myUILabel.animateBackgroundColor(to: originalColor, withDuration: 0.5, completion: {
    (value: Bool) in
    myUILabel.backgroundColor = originalColor
})

Answer 9

it says in the docs that backgroundColor is animatable

http://developer.apple.com/library/ios/#documentation/uikit/reference/UIView_Class/UIView/UIView.html#//apple_ref/doc/uid/TP40006816-CH3-SW131

Don't really know since when.

Answer 10

如果你不想深入到Quartz，每回答一个前面的答案，创建一个与UILabel大小相同的空UIView，并将它放在与UILabel相同的位置（并按Z顺序，在它下面），你可以动画UIView的背景颜色（我试过这个，它对我有用）。

Answer 11

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