ios - 使用 CASpringAnimation 动画化 CAShapeLayer 路径

Question

我有一个自定义的 UIView，我在其中添加了一个 CAShapeLayer 作为 View 层的直接子层:

private let arcShapeLayer = CAShapeLayer()

CAShapeLayer 在 awakeFromNib 中声明了以下属性(边框是为了使动画更容易可视化):

arcShapeLayer.lineWidth = 2.0
arcShapeLayer.strokeColor = UIColor.black.cgColor
arcShapeLayer.fillColor = UIColor.lightGray.cgColor
arcShapeLayer.masksToBounds = false
layer.masksToBounds = false
layer.addSublayer(arcShapeLayer)

我在 layoutSubviews 中声明了 arcShapeLayer 的框架:

arcShapeLayer.frame = layer.bounds

然后我有以下函数，我传递一定百分比(来自 ViewController)，以便在一些拖动后实现弧形效果。简单地说，我在层的底部添加了一个 quadCurve:

func configureArcPath(curvePercentage: CGFloat) -> CGPath {

    let path = UIBezierPath()
    path.move(to: CGPoint.zero)
    path.addLine(to:
        CGPoint(
            x: arcShapeLayer.bounds.minX,
            y: arcShapeLayer.bounds.maxY
        )
    )

    path.addQuadCurve(
        to:
        CGPoint(
            x: arcShapeLayer.bounds.maxX,
            y: arcShapeLayer.bounds.maxY
        ),
        controlPoint:
        CGPoint(
            x: arcShapeLayer.bounds.midX,
            y: arcShapeLayer.bounds.maxY + arcShapeLayer.bounds.maxY * (curvePercentage * 0.4)
        )
    )

    path.addLine(to:
        CGPoint(
            x: arcShapeLayer.bounds.maxX,
            y: arcShapeLayer.bounds.minY
        )
    )
    path.close()

    return path.cgPath

}

然后我尝试使用以下代码为圆弧制作 Spring 效果动画:

func animateArcPath() {

    let springAnimation = CASpringAnimation(keyPath: "path")
    springAnimation.initialVelocity = 10
    springAnimation.mass = 10
    springAnimation.duration = springAnimation.settlingDuration
    springAnimation.fromValue = arcShapeLayer.path
    springAnimation.toValue = configureArcPath(curvePercentage: 0.0)
    springAnimation.fillMode = .both
    arcShapeLayer.add(springAnimation, forKey: nil)

    arcShapeLayer.path = configureArcPath(curvePercentage: 0.0)

}

正如您在视频中看到的那样，问题在于电弧永远不会过冲。虽然它在其原始位置和静止位置之间摆动，但从未达到 Spring 效果。

我在这里错过了什么？

Answer 1

我试过这个，我可以报告说你是绝对正确的。它与零位钳位无关。可见动画夹在两个极端。

假设您提供了一个很大的质量值，以便超调量应该超过凸弓的初始位置在其返回旅程中回到起点。然后我们看到的是动画将 两者 固定在原始位置 和 您尝试设置动画的最小值。当 Spring 在它们之间摆动时，我们看到动画在一个极端和另一个极端之间发生，但当它达到最大值或最小值时，它只是夹在那里，直到它有时间摆动到最大程度并返回。

我不得不得出结论，CAShapeLayer path 不喜欢弹跳动画。同样的观点在 CAShapeLayer path spring animation not 'overshooting' 提出。

我能够通过链接正常的基本动画来模拟您可能想要的那种外观:

这是我使用的代码(基于您自己的代码):

@IBAction func animateArcPath() {
    self.animate(to:-1, in:0.5, from:arcShapeLayer.path!)
}
func animate(to arc:CGFloat, in time:Double, from current:CGPath) {
    let goal = configureArcPath(curvePercentage: arc)
    let anim = CABasicAnimation(keyPath: "path")
    anim.duration = time
    anim.fromValue = current
    anim.toValue = goal
    anim.delegate = self
    anim.setValue(arc, forKey: "arc")
    anim.setValue(time, forKey: "time")
    anim.setValue(goal, forKey: "pathh")
    arcShapeLayer.add(anim, forKey: nil)
}
func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
    if let arc = anim.value(forKey:"arc") as? CGFloat,
        let time = anim.value(forKey:"time") as? Double,
        let p = anim.value(forKey:"pathh") {
        if time < 0.05 {
            return
        }
        self.animate(to:arc*(-0.5), in:time*0.5, from:p as! CGPath)
    }
}