如何动画 UILabel 的 textColor 属性?

由于某种原因,当我尝试动画 textColor,它不会工作。textColor突然从 A 变成了 B 有没有可能把它变成动画,比如说,红色变成黑色?

33617 次浏览

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.

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).

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

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.

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.

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) { }];

Swift 4 solution:

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

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)

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()

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)
}

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()
}