如何实现UILabel文字颜色从左到右的进度条式动画

嘿，我懂你想实现UILabel文字从左到右逐步变色的需求～之前用UIView的过渡动画只能做整体淡入淡出，用NSTimer逐个改字符颜色不仅麻烦，动画还可能不够流畅。这里给你两个更靠谱的方案：

方案一：用渐变层（CAGradientLayer）配合Mask实现丝滑过渡 #

这个方法的核心思路是给UILabel套一个渐变层，把label的文本层作为渐变层的遮罩，再通过动画移动渐变的位置，让颜色从左到右逐步覆盖文字，性能和流畅度都拉满。

• 第一步：给UILabel添加渐变层

// 创建渐变层
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = _label.bounds;
// 设置渐变颜色：左边是文字原本的颜色，右边是你想要的目标颜色（比如红色）
gradientLayer.colors = @[(id)[_label.textColor CGColor], (id)[UIColor redColor].CGColor];
// 设置渐变方向为从左到右
gradientLayer.startPoint = CGPointMake(0, 0.5);
gradientLayer.endPoint = CGPointMake(1, 0.5);
// 关键操作：把label的layer作为遮罩，这样只有文字区域会显示渐变效果
gradientLayer.mask = _label.layer;
// 将渐变层添加到label的父视图层上
[_label.superview.layer addSublayer:gradientLayer];

• 第二步：给渐变层添加动画，实现颜色从左到右覆盖

// 创建位置动画
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"locations"];
// 初始状态：渐变只停在最左侧，文字完全是原本的颜色
animation.fromValue = @[@0.0, @0.0];
// 结束状态：渐变覆盖整个文字区域，所有文字都变成目标颜色
animation.toValue = @[@1.0, @1.0];
animation.duration = 1.0; // 动画时长，可按需调整
animation.fillMode = kCAFillModeForwards;
animation.removedOnCompletion = NO;
// 将动画添加到渐变层
[gradientLayer addAnimation:animation forKey:@"gradientColorChange"];

这个方案的优势是动画流畅、代码简洁，不需要逐个字符处理，适合大多数场景。

方案二：改进版逐字符变色（用CADisplayLink替代NSTimer） #

如果你就是想要逐字变色的效果，用CADisplayLink比NSTimer更靠谱——它和屏幕刷新率同步，动画不会卡顿。

• 第一步：添加必要的属性

// 在你的类声明中添加这几个属性
@property (nonatomic, assign) NSInteger currentIndex;
@property (nonatomic, strong) CADisplayLink *displayLink;
@property (nonatomic, strong) NSString *originalText;

• 第二步：实现动画启动和刷新方法

// 启动动画的方法
- (void)startTextColorTransition {
    self.originalText = _label.text;
    self.currentIndex = 0;
    // 创建CADisplayLink，绑定刷新方法
    self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateTextColor)];
    [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
}

// 每帧刷新时更新文字颜色
- (void)updateTextColor {
    if (self.currentIndex >= self.originalText.length) {
        // 动画结束，停止刷新
        [self.displayLink invalidate];
        self.displayLink = nil;
        return;
    }
    // 用富文本设置前currentIndex+1个字符为目标颜色，其余保持原颜色
    NSMutableAttributedString *attributedText = [[NSMutableAttributedString alloc] initWithString:self.originalText];
    [attributedText addAttribute:NSForegroundColorAttributeName 
                           value:[UIColor redColor] 
                           range:NSMakeRange(0, self.currentIndex + 1)];
    [attributedText addAttribute:NSForegroundColorAttributeName 
                           value:_label.textColor 
                           range:NSMakeRange(self.currentIndex + 1, self.originalText.length - self.currentIndex - 1)];
    _label.attributedText = attributedText;
    // 控制变色速度，比如每3帧前进一个字符，可按需调整
    static NSInteger frameCount = 0;
    frameCount++;
    if (frameCount % 3 == 0) {
        self.currentIndex++;
        frameCount = 0;
    }
}

这个方法可以精确控制每个字符的变色时机，适合需要逐字动画的特定场景。

总体来说，方案一更推荐，无论是流畅度还是代码维护性都更好～

内容的提问来源于stack exchange，提问作者mlin956