ios - UIBezierPath 动画的奇怪问题

Question

我想绘制月亮，然后为月亮的阴影设置动画。但启动此代码后，我可以在动画线上看到一些故障:

GIF:

为什么会发生这种情况？

Playground 代码 here

更新1:此函数创建的两条路径具有不同的角度(0 和 π/2*0.6):

func calculateMoonPath(for angle: CGFloat) -> UIBezierPath {
    let center = CGPoint(x: view.bounds.midX, y: view.bounds.midY)
    let radius = view.bounds.height/2
    
    let path = UIBezierPath(arcCenter: center,
                            radius: radius,
                            startAngle: -.pi/2,
                            endAngle: .pi/2,
                            clockwise: true)
    path.addArc(withCenter: .init(x: center.x - radius * tan(angle), y: center.y),
                radius: radius / CGFloat(cosf(Float(angle))),
                startAngle: .pi/2 - angle,
                endAngle: angle - .pi/2,
                clockwise: false
    )
    path.close()
    return path
}

Answer 1

根据我的经验，生成弧线的代码会随着弧角的变化而在幕后创建不同数量的三次贝塞尔曲线。

这会改变两条曲线中控制点的数量，并使动画变得困惑。 (正如 David Rönnqvist 所说，如果起始路径和结束路径具有不同数量的控制点，则动画是未定义的。)

据我所知，一个完整的圆需要 4 条三次贝塞尔曲线才能完成。

创建 addArc 方法的变体并不难，该方法始终使用 4 条三次贝塞尔曲线构建圆弧，而不管圆弧角度如何。这就是我的建议。

您可能可以将弧分成 4 部分(使用 4 次连续调用 addArc(withCenter:...) 并具有不同的起始和结束角度，以便它们组合起来形成您想要的完整弧。每条曲线的弧长都应该足够短，以形成一条贝塞尔曲线，因此您应该为开始和结束组合曲线获得相同数量的控制点。

如果你像这样重写你的calculateMoonPath函数:

func calculateMoonPath(for angle: CGFloat) -> UIBezierPath {
    let center = CGPoint(x: view.bounds.midX, y: view.bounds.midY)
    let radius = view.bounds.height/2

    let path = UIBezierPath(arcCenter: center,
                            radius: radius,
                            startAngle: -.pi/2,
                            endAngle: .pi/2,
                            clockwise: true)
    let startAngle = .pi/2 - angle
    let endAngle = angle - .pi/2
    let delta = (endAngle - startAngle) / 4
    for index in 0...3 {
        let thisStart = startAngle + delta * CGFloat(index)
        let thisEnd = startAngle + delta * CGFloat(index + 1)
        path.addArc(withCenter: .init(x: center.x - radius * tan(angle), y: center.y),
                    radius: radius / CGFloat(cosf(Float(angle))),
                    startAngle: thisStart,
                    endAngle: thisEnd,
                    clockwise: false
        )
    }
    path.close()
    return path
}

这会产生以下结果: