如何为CAShapeLayer添加CAGradientLayer实现自定义形状渐变填充

核心逻辑是利用CAGradientLayer的mask属性实现异形渐变填充：用你已经写好的圆形CAShapeLayer作为渐变层的遮罩，渐变层只会显示和遮罩非透明区域重合的部分，就能得到渐变填充的圆形效果。

完整实现代码 #

// 1. 先创建圆形遮罩层（不需要直接加到view上，仅作为渐变层的遮罩使用）
let circleMaskLayer = CAShapeLayer()
let circlePath = UIBezierPath(arcCenter: center, radius: 100, startAngle: -CGFloat.pi / 2, endAngle: 2 * CGFloat.pi, clockwise: true)
circleMaskLayer.path = circlePath.cgPath
// 遮罩层仅识别alpha通道，填充色设为任意不透明颜色即可
circleMaskLayer.fillColor = UIColor.white.cgColor

// 2. 保留原有的灰色描边效果，单独创建描边层
let borderLayer = CAShapeLayer()
borderLayer.path = circlePath.cgPath
borderLayer.strokeColor = UIColor.lightGray.cgColor
borderLayer.lineWidth = 10
borderLayer.fillColor = UIColor.clear.cgColor
borderLayer.lineCap = CAShapeLayerLineCap.round
view.layer.addSublayer(borderLayer)

// 3. 生成渐变层
let gradientLayer = CAGradientLayer()
// 渐变层frame要刚好覆盖整个圆形区域，避免渐变范围错位
gradientLayer.frame = CGRect(x: center.x - 100, y: center.y - 100, width: 200, height: 200)
// 设置从上到下的垂直渐变方向
gradientLayer.startPoint = CGPoint(x: 0.5, y: 0)
gradientLayer.endPoint = CGPoint(x: 0.5, y: 1)
// 配置指定色值的渐变
gradientLayer.colors = [
    UIColor(red: 68/255, green: 68/255, blue: 68/255, alpha: 1).cgColor,
    UIColor(red: 108/255, green: 108/255, blue: 108/255, alpha: 1).cgColor
]
// 关联圆形遮罩
gradientLayer.mask = circleMaskLayer

// 4. 将渐变层添加到视图上
view.layer.addSublayer(gradientLayer)

注意事项 #

• 如果后续需要调整圆形大小，记得同步更新circleMaskLayer的path和gradientLayer的frame，避免显示错位
• 如果需要给描边也添加渐变效果，只需要额外创建一个渐变层，将描边层设为该渐变层的mask即可

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