为CAShapeLayer描边添加垂直于描边方向的渐变色

嘿，我完全get到你的需求了——要给CAShapeLayer的描边加垂直于描边走向的渐变（比如透明→白色→透明），还要能支持描边动画，而且不能用图片凑数对吧？这确实和那种沿着路径延伸的渐变不一样，我来给你分享个纯Core Animation的实现方案，完美适配你的动画需求。

核心思路 #

我们不用直接给CAShapeLayer的strokeColor设置渐变（毕竟它只接受单一CGColor），而是用「渐变层 + 形状层蒙版」的组合：先做一个符合你要求的垂直渐变层，再用CAShapeLayer把渐变“裁剪”成描边的形状，这样既能得到垂直于描边的渐变效果，又能保留Core Animation的动画能力。

步骤1：创建基础的描边形状层 #

先定义好你的路径和描边的基础属性：

let shapeLayer = CAShapeLayer()
shapeLayer.path = yourTargetPath.cgPath // 替换成你的目标路径（直线/折线都可以）
shapeLayer.lineWidth = 20.0 // 描边宽度决定了渐变的垂直范围，按需调整
shapeLayer.strokeColor = UIColor.white.cgColor // 这里只是占位色，后面会被渐变覆盖
shapeLayer.fillColor = UIColor.clear.cgColor

步骤2：创建垂直于描边的渐变层 #

根据你要的「透明→白色→透明」效果，配置CAGradientLayer，重点是设置渐变方向为垂直于描边的方向：

let gradientLayer = CAGradientLayer()
gradientLayer.frame = shapeLayer.bounds // 渐变层要和形状层同尺寸

// 设置渐变颜色序列
gradientLayer.colors = [
    UIColor.clear.cgColor,
    UIColor.white.cgColor,
    UIColor.clear.cgColor
]
// 让白色渐变集中在中间位置
gradientLayer.locations = [0.0, 0.5, 1.0]

// 假设你的描边是水平直线，渐变方向设为垂直（从上到下）
// 如果是倾斜直线，需要计算路径的切线方向，再取垂直方向来调整startPoint/endPoint
gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 0.5, y: 1.0)

步骤3：用形状层作为渐变层的蒙版 #

把CAShapeLayer设为渐变层的蒙版，这样渐变就只会显示在描边的区域里：

gradientLayer.mask = shapeLayer

步骤4：添加描边动画 #

现在你可以给shapeLayer添加任何常规的描边动画了，蒙版会跟着形状层的变化同步更新，渐变效果也会完美适配：

// 示例：描边绘制动画（从无到有）
let strokeAnimation = CABasicAnimation(keyPath: "strokeEnd")
strokeAnimation.fromValue = 0.0
strokeAnimation.toValue = 1.0
strokeAnimation.duration = 2.0
shapeLayer.add(strokeAnimation, forKey: "strokeDrawAnimation")

// 如果是路径切换动画，直接更新shapeLayer.path即可，渐变会自动适配新路径的垂直方向
// 记得同步调整gradientLayer的startPoint/endPoint来匹配新路径的垂直方向哦

关键注意点 #

• 如果你的路径是动态切换的（比如从一条直线变到另一条倾斜线），需要重新计算路径的切线方向，再调整渐变层的startPoint和endPoint，保证渐变始终垂直于当前描边。
• 渐变层的frame要和形状层保持一致，不然蒙版显示会出现偏移或截断问题。
• 这个方案完全基于Core Animation实现，不需要任何图片素材，性能拉满，适配各种动画场景。

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