嘿，我完全懂你现在的困扰——本来想做两条从不同起点出发、最终汇合的动画线条，结果第二条路径直接把第一条盖住了，动画同步也可能出问题对吧？咱们一步步来搞定这个事儿：

1. 先解决图层覆盖的问题 #

CAShapeLayer默认是按照你添加到父图层的顺序来显示的，后添加的图层会在上方。解决这个有两种简单方法：

• 调整图层的zPosition属性：给需要显示在上方的图层设置更高的zPosition值（默认是0），比如你想让第一条路径不被盖住，就给shapeLayer1.zPosition = 1，shapeLayer2.zPosition = 0，反之亦然。
• 调整添加图层的顺序：先添加你想在下方的图层，再添加上方的图层。比如先加shapeLayer2，再加shapeLayer1，这样shapeLayer1就会在上面。

2. 确保两条路径完全独立 #

检查你的path2是不是真的从不同起点出发：

• 确认path2的move(to:)起点和path1的起点不一样，终点是同一个CGPoint。
• 可以暂时去掉动画，直接显示两条路径，看看它们的位置是否符合预期，排除路径绘制本身的问题。

3. 保证动画完全同步 #

要让两个动画同时开始、同时结束，需要确保：

• 两个动画的duration（时长）完全相同。
• 两个动画的timingFunction（时间曲线）一致，比如都用.easeInEaseOut。
• 同时将动画添加到各自的图层上（不要有先后延迟）。

完整的代码示例 #

// 创建第一条路径和图层
let path1 = UIBezierPath()
path1.move(to: CGPoint(x: 60, y: 250)) // 第一个起点
path1.addLine(to: CGPoint(x: 200, y: 250)) // 汇合终点

let shapeLayer1 = CAShapeLayer()
shapeLayer1.path = path1.cgPath
shapeLayer1.strokeColor = UIColor.systemBlue.cgColor
shapeLayer1.fillColor = UIColor.clear.cgColor
shapeLayer1.lineWidth = 4.0
shapeLayer1.zPosition = 0 // 控制层级，0在下方，1在上方
view.layer.addSublayer(shapeLayer1)

// 创建第二条路径和图层
let path2 = UIBezierPath()
path2.move(to: CGPoint(x: 340, y: 250)) // 第二个不同的起点
path2.addLine(to: CGPoint(x: 200, y: 250)) // 同一个汇合终点

let shapeLayer2 = CAShapeLayer()
shapeLayer2.path = path2.cgPath
shapeLayer2.strokeColor = UIColor.systemRed.cgColor
shapeLayer2.fillColor = UIColor.clear.cgColor
shapeLayer2.lineWidth = 4.0
shapeLayer2.zPosition = 1 // 让这条线显示在上方
view.layer.addSublayer(shapeLayer2)

// 创建同步动画
func createPathAnimation() -> CABasicAnimation {
    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = 0
    animation.toValue = 1
    animation.duration = 2.5 // 统一时长
    animation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
    animation.fillMode = .forwards
    animation.isRemovedOnCompletion = false
    return animation
}

// 同时添加动画到两个图层
shapeLayer1.add(createPathAnimation(), forKey: "pathAnim1")
shapeLayer2.add(createPathAnimation(), forKey: "pathAnim2")

额外注意点 #

• 如果你的路径是曲线（比如addCurve(to:)），也要确保两条曲线的起点不同、终点一致。
• 如果动画还是有细微不同步，检查是否有其他代码在修改图层属性或者动画参数，确保没有额外的延迟操作。

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