ios - 如何动态地将动画添加到队列

Question

我有以下情况:我有一个圆形 uiview 对象，例如，我每 1 秒获得一个新点。我对从 uiview 当前位置到新点的移动进行动画处理，动画持续时间取决于距离，因此动画持续时间可能为 500 毫秒或超过 3 秒。所以请考虑以下手绘(通过 ipad 抱歉)图表:

在“A”的情况下，如果我有相同方向的点，我的动画顺序没有问题。

但如果是“B”，那是我的问题；如果我将圆圈从点 3 动画化到点 4，它需要 5 秒，1 秒后我收到点 5，一个新的动画从点 4 到点 5，结果动画将类似于红线.

我需要一种方法来添加像队列这样的动画，并且搜索了很多没有结果。

我目前的做法类似于以下内容:

var animationPoints = [CGPoint]()
var isAnimating = false

func animate(nextPoint) {

    animationPoints.append(nextPoint)

    if !isAnimating {
        isAnimating = true

        let p = animationPoints.first
        animationPoints.removeFirst

        UIView.animate ({ completed in

            isAnimating = false

            if animationPoints.count > 0 {
                animate(animationPoints.first)
            }
        })

    }
}

但是它不能正常工作，它会跳过几个点，并且减慢动画速度

Answer 1

我能够通过使用 UIViewPropertyAnimator 对象队列来实现您的要求，每个对象都通过前一个的完成处理程序链接到前一个，就像您的伪代码中建议的那样。我这样做的原因是可以随时向 UIViewPropertyAnimator 对象添加完成处理程序，包括在动画师开始制作动画之后。

为了测试，我人为地安排了一系列点实时到达的时间间隔:

var points = [
    CGPoint(x: 60, y: 50),
    CGPoint(x: 100, y: 50),
    CGPoint(x: 150, y: 50),
    CGPoint(x: 150, y: 100),
    CGPoint(x: 250, y: 100)
]
@IBAction func doButton(_ sender: Any) {
    func nextPoint() {
        self.animateToPoint(points.removeFirst())
        if !points.isEmpty {
            delay(0.25) {
                nextPoint()
            }
        }
    }
    nextPoint()
}

每次到达一个点时(即每次调用 self.animateToPoint 时)，我都会创建一个新的 UIViewPropertyAnimator 并设置 previous UIViewPropertyAnimator 的 completionHandler 在新的上调用 startAnimating()。因此，链条在动画进行时实时延伸。

根据您的要求，每个动画的duration 是根据我们到下一个点必须行进的距离来计算的，因此速率是恒定的。我特意选择了一个缓慢的恒定速率来使行为清晰。

结果是，即使在除第一个点之外的所有点都到达时动画已经在进行，我们仍以恒定速率通过所有点。为了弄清楚发生了什么，我让每个完成处理程序也使 View 闪烁红色，这样您就知道下一个动画何时开始。因此，我们清楚地看到每个动画都在前一个动画的目标点到达时开始——我认为这就是你所说的你想要做的。