How to animate the textColor property of an UILabel?
IosSwiftCore AnimationIos Problem Overview
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?
Ios Solutions
Solution 1 - Ios
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.
Solution 2 - Ios
Swift 4 solution:
UIView.transition(with: yourLabel, duration: 0.3, options: .transitionCrossDissolve, animations: {
self.yourLabel.textColor = .red
}, completion: nil)
Solution 3 - Ios
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
Solution 4 - Ios
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).
Solution 5 - Ios
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()
Solution 6 - Ios
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.
Solution 7 - Ios
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) { }];
Solution 8 - Ios
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.
Solution 9 - Ios
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)
Solution 10 - Ios
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)
}
Solution 11 - Ios
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()
}