CAShapeLayer基于Mask的填充动画异常问题咨询

听起来你是想实现红色图层逐步填充绿色图层的动画效果，但目前用蒙版后出现了红色圆形+白色背景的意外情况，这大概率是蒙版的使用方式或者图层层级设置错了。我来帮你梳理下正确的实现思路和修复方案：

问题根源分析 #

你提到的白色背景，通常是因为这几个常见错误：

• 错误地给蒙版图层设置了白色的backgroundColor（蒙版本身不需要背景色，它的作用是通过自身的alpha通道控制上层图层的显示区域）
• 图层层级搞反了：应该是红色填充图层放在绿色目标图层之上，然后给红色图层加蒙版；而不是反过来给绿色图层加蒙版
• 蒙版的fillColor没设为白色（蒙版的白色区域会显示上层图层内容，黑色/透明区域会隐藏）

正确的实现步骤与代码示例 #

下面是一个标准的“红色填充绿色圆形”的动画实现，你可以参考调整你的代码：

1. 创建基础图层（绿色目标图层） #

// 绿色圆形图层
let greenLayer = CAShapeLayer()
greenLayer.path = UIBezierPath(ovalIn: CGRect(x: 50, y: 50, width: 200, height: 200)).cgPath
greenLayer.fillColor = UIColor.green.cgColor
view.layer.addSublayer(greenLayer)

2. 创建填充图层（红色图层） #

这个图层是我们要显示填充效果的图层，需要放在绿色图层之上：

let redFillLayer = CAShapeLayer()
redFillLayer.path = greenLayer.path // 和绿色图层路径完全一致
redFillLayer.fillColor = UIColor.red.cgColor
view.layer.addSublayer(redFillLayer)

3. 创建动态蒙版实现填充动画 #

关键来了：我们需要一个蒙版图层，通过动画蒙版的路径来逐步显示红色图层，从而实现填充效果：

// 创建蒙版图层，初始路径为仅显示圆形的一部分（这里设为宽度0，完全隐藏红色图层）
let maskLayer = CAShapeLayer()
maskLayer.path = UIBezierPath(ovalIn: CGRect(x: 50, y: 50, width: 0, height: 200)).cgPath
maskLayer.fillColor = UIColor.white.cgColor // 必须是白色，白色区域才会显示上层的红色
redFillLayer.mask = maskLayer // 给红色图层加蒙版，而不是绿色图层！

4. 添加填充动画 #

这里用CABasicAnimation来动画蒙版的路径，从无到有覆盖整个圆形：

let fillAnimation = CABasicAnimation(keyPath: "path")
fillAnimation.fromValue = maskLayer.path // 初始路径
fillAnimation.toValue = greenLayer.path // 目标路径（和绿色图层一致）
fillAnimation.duration = 2.0
fillAnimation.fillMode = .forwards
fillAnimation.isRemovedOnCompletion = false
maskLayer.add(fillAnimation, forKey: "fillAnimation")

额外注意事项 #

• 绝对不要给蒙版图层设置backgroundColor，蒙版只需要path和fillColor（白色）就够了
• 如果想用描边方式模拟填充动画（比如让圆形的描边从0到1绕一圈），要确保蒙版图层的lineWidth等于圆形的直径，strokeStart设为0，动画strokeEnd从0到1即可
• 检查图层的masksToBounds属性，不需要开启的话保持默认false即可

这样调整后，你应该就能看到红色逐步填充绿色圆形的效果，不会再出现突兀的白色背景了。

内容的提问来源于stack exchange，提问作者O.Daniel