How to animate the textColor property of an UILabel?

Question

For some reason, when I try to animate textColor, it won't work. The textColor just suddenly changes from A to B. Is it possible to animate it, for example, red to black?

Answer 1

Instead, have you tried using a crossfade transition on the object itself like this, it'll give you a nice fade-in fade-out effect from one color to another:

Objective C

[UIView transitionWithView:myLabel duration:0.25 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
    myLabel.textColor = NEW_COLOR;
} completion:^(BOOL finished) {
}];

Swift 5

UIView.transition(with: creditsLabel, duration: 0.25, options: .transitionCrossDissolve) {
    self.creditsLabel.textColor = .red
}

This is better than using NSTimers, CATextLayers and so on so forth for various reasons. CATextLayer does not have proper support for text kerning or NSAttributedText, and NSTimers are laggy (plus there's too much code). The transition animation above does the trick, and also can be used in a chain animation. I had the same issue and have already tried the solutions above but this simple code works wonders instead.

Answer 2

Swift 4 solution:

UIView.transition(with: yourLabel, duration: 0.3, options: .transitionCrossDissolve, animations: {
  self.yourLabel.textColor = .red
}, completion: nil)

Answer 3

The reason that textColor is not animatable is that UILabel uses a regular CALayer instead of a CATextLayer.

To make textColor animatable (as well as text, font, etc.) we can subclass UILabel to make it use a CATextLayer.

This is quite a lot of work, but luckily I already did it :-)

You can find a complete explanation + a drop-in open source replacement for UILabel in this article

Answer 4

You could try creating another instance of the UILabel or whatever it is that has the textColor, and then apply the animation between those two instances (the with the old textColor and the one with the new textColor).

Answer 5

This was the ONLY thing that worked for me :

let changeColor = CATransition()
changeColor.duration = 1

CATransaction.begin()

CATransaction.setCompletionBlock {
    selected.label.layer.add(changeColor, forKey: nil)
    selected.label.textColor = .black
}

selected.nameLabel.textColor = .red

CATransaction.commit()

Answer 6

Here's my code to animate label text color. The important part is to set textColor to clearColor before animation

label.textColor = [UIColor clearColor];
[UIView transitionWithView:label duration:duration/4 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
    label.textColor = self.highlightedCellPrimaryTextColor;
} completion:^(BOOL finished) { }];

Answer 7

This answer is obsolete, and is not a good solution for the original question. @strange 's answer below is much better and should be used instead of this answer: https://stackoverflow.com/a/20892927/76559

//Old answer below

The textColor property is not specified as being animatable in the docs, so I don't think you can do it with a simple UIView animations block...

This could probably be done pretty crudely with an NSTimer firing every couple of milliseconds, each time setting the colour gradually from one to the other.

I say this is crude because it would require an array or some other container of preset colour values going from the start colour to the finish colour, and I'm sure there's a way you could do this using core animation or something, I just don't know what it is.

Answer 8

I found it pretty easy placing an UIView below the label and animating its opacity. The label has to be added to that view. Maybe not a good solution from the resources consumption point of view, but pretty straightforward.

Answer 9

updated swift 3.0

I just changed from @budidino comments

UIView.transition(with: my.label, duration: 0.3, options: .transitionCrossDissolve, animations: { my.label.textColor = .black }, completion: nil)

Answer 10

Thanks for @Strange's answer, working perfectly in Swift 5, Xcode 11 with a bit syntax change. I was animating text color for multiple UILabels, if this is also your case, try this

for label in [label1, label2, ...] as [UILabel] { // loop through a @IBOutlet UILabel array
        UIView.transition(with: label, duration: 0.3, options: .transitionCrossDissolve, animations: {
            label.textColor = .label
        }, completion: nil)
}

Answer 11

Try using core animation

   func textColorBlinking(){
        let changeColor = CATransition()
        changeColor.duration = 1
        changeColor.type = .fade
        changeColor.repeatCount = Float.infinity
        CATransaction.begin()
        CATransaction.setCompletionBlock {
            self.lblHome.layer.add(changeColor, forKey: nil)
            self.lblHome.textColor = .white
        }
        self.lblHome.textColor = .red
        CATransaction.commit()
   }