Swift中如何实现CAShapeLayer的Path与strokeEnd新旧值动画过渡？

作为Core Animation新手，你当前的代码只处理了strokeEnd动画的部分逻辑，还缺少路径更新的关键步骤，以及动画配置的一些细节。我来帮你梳理完整且正确的实现方案：

核心思路 #

要实现同时更新UIBezierPath和strokeEnd的平滑过渡，需要遵循两个关键原则：

1. 先更新图层的实际属性（路径、最终strokeEnd值），保证动画结束后图层状态正确；
2. 动画要基于当前的图层状态（旧的strokeEnd值、旧路径）来设置fromValue，避免跳变。

完整实现代码 #

// 1. 准备你的新数据：新路径和目标strokeEnd值
let newBezierPath = UIBezierPath(ovalIn: CGRect(x: 20, y: 20, width: 200, height: 200)) // 示例新路径，替换成你的实际路径
let targetStrokeEnd: CGFloat = 1.0 // 你的新strokeEnd目标值

// 2. 先更新shapeLayer的路径（必须在动画前完成，确保动画基于新路径计算）
shapeLayer.path = newBezierPath.cgPath

// 3. 配置strokeEnd的过渡动画
let strokeEndAnim = CABasicAnimation(keyPath: "strokeEnd")
// 从当前图层的strokeEnd旧值开始动画，而不是默认的0
strokeEndAnim.fromValue = shapeLayer.strokeEnd
// 动画的目标值
strokeEndAnim.toValue = targetStrokeEnd
// 动画时长
strokeEndAnim.duration = 0.4
// 可选：设置动画结束后保持最终状态（如果没直接设置图层strokeEnd的话需要，不过我们已经设置了，这里加了更稳妥）
strokeEndAnim.fillMode = .forwards
strokeEndAnim.isRemovedOnCompletion = false

// 4. 关键：直接更新图层的strokeEnd为目标值（动画只是视觉过渡，图层实际属性要同步更新）
shapeLayer.strokeEnd = targetStrokeEnd

// 5. 将动画添加到图层，用唯一的key标识方便后续管理
shapeLayer.add(strokeEndAnim, forKey: "strokeEndTransitionAnimation")

进阶：如果需要同时过渡路径 #

如果你的新旧路径差异较大，想要让路径也平滑过渡，可以给path属性也添加动画，和strokeEnd动画同步进行：

// 先保存旧路径
let oldPath = shapeLayer.path

// 更新为新路径
shapeLayer.path = newBezierPath.cgPath

// 配置路径过渡动画
let pathAnim = CABasicAnimation(keyPath: "path")
pathAnim.fromValue = oldPath
pathAnim.toValue = newBezierPath.cgPath
pathAnim.duration = 0.4 // 和strokeEnd动画时长保持一致

// 配置strokeEnd动画（和之前一致）
let strokeEndAnim = CABasicAnimation(keyPath: "strokeEnd")
strokeEndAnim.fromValue = shapeLayer.strokeEnd
strokeEndAnim.toValue = targetStrokeEnd
strokeEndAnim.duration = 0.4

// 同时添加两个动画
shapeLayer.add(pathAnim, forKey: "pathTransitionAnimation")
shapeLayer.add(strokeEndAnim, forKey: "strokeEndTransitionAnimation")

注意事项 #

• 永远不要只依赖动画来改变图层状态：动画只是临时的视觉效果，图层的实际属性（path、strokeEnd）必须手动设置为最终值，否则动画结束后会跳回旧状态。
• 动画的key建议设置唯一值，方便后续通过removeAnimation(forKey:)移除特定动画。
• 如果路径和strokeEnd的过渡需要更复杂的时序，可以用CAAnimationGroup把多个动画组合起来，统一控制时长和时序。

内容的提问来源于stack exchange，提问作者T. Hyldgaard