CAGradientLayer设置locations超出[0,1]时不显示且动画失效求助

问题分析 #

你当前通过将CAGradientLayer渲染为静态图片转成UIColor的方案，本质是把渐变变成了静态图案，无法跟随渐变层的动画更新状态。而且当locations超出[0,1]范围时，渐变层在Label的bounds内没有可渲染的有效颜色区域，生成的图案为空，直接导致文字不可见。

正确实现方案：使用图层遮罩（Mask） #

通过给UILabel添加CAGradientLayer作为子层，并将Label的文字层设为渐变层的遮罩，让渐变层的动画透过文字区域显示，就能实现动态渐变文字效果。

完整代码实现 #

class AnimatedGradientLabel: BaseLabel {
    private let startColor: UIColor = Color.gradientOrange
    private let endColor: UIColor = Color.gradientPink
    private let duration: CFTimeInterval = 4.0
    private let repeatCount: Float = .infinity
    var font: Font = Font.regularText

    private lazy var gradient: CAGradientLayer = {
        let gradientLayer = CAGradientLayer()
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
        // 初始化4色渐变，为无缝滚动动画做准备
        gradientLayer.colors = [
            endColor.cgColor,
            startColor.cgColor,
            endColor.cgColor,
            startColor.cgColor
        ]
        gradientLayer.locations = [-2, -1, 0, 1] as [NSNumber]
        return gradientLayer
    }()

    override var bounds: CGRect {
        didSet {
            gradient.frame = bounds
            // 将Label的文字层作为渐变层的遮罩，只显示文字区域的渐变
            gradient.mask = layer
        }
    }

    override func style() {
        super.style()
        font = Font.header
        // 隐藏默认文字颜色，让渐变层透过显示
        textColor = .clear
        // 将渐变层添加为子层
        layer.addSublayer(gradient)
    }

    func animate() {
        let anim = CABasicAnimation(keyPath: "locations")
        anim.fromValue = [-2, -1, 0, 1]
        anim.toValue = [0, 1, 2, 3]
        anim.duration = duration
        anim.repeatCount = repeatCount
        anim.fillMode = .forwards
        anim.isRemovedOnCompletion = false
        gradient.add(anim, forKey: "gradientLocationAnimation")
    }
}

关键改动说明 #

• 遮罩逻辑：设置gradient.mask = layer，让渐变层仅在Label文字的区域显示，同时将textColor设为透明，隐藏原生文字颜色
• 移除静态图案转换：删掉通过UIColor(layer: gradient)生成文字颜色的逻辑，直接用渐变层+遮罩实现动态效果
• 渐变层初始化：提前配置好动画所需的4色渐变，保证动画前后颜色衔接无缝

原方案失效核心原因 #

• UIColor(patternImage:)生成的是静态颜色，只会在初始化时渲染一次渐变层状态，后续渐变层的动画无法同步更新到图案上
• 当locations超出[0,1]时，渐变层在Label的bounds范围内没有可渲染的颜色片段，生成的图案为空，导致文字不可见

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