ios - 了解 animateKeyframes 相对开始时间/延迟

Question

我要么是愚蠢，要么误解了关键帧动画在 iOS 上的工作方式(或两者!)。下面的两个动画 block 产生不同的结果，但我希望它们是相同的:

let duration: TimeInterval = 2

UIView.animateKeyframes(withDuration: duration, delay: 0, animations: {
    UIView.addKeyframe(withRelativeStartTime: 0.9, relativeDuration: 0.1, animations: {
        self.someView.transform = CGAffineTransform(translationX: 0, y: 150)
    })
})

UIView.animateKeyframes(withDuration: duration * 0.1, delay: duration * 0.9, animations: {
    UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1, animations: {
        self.someView.transform = CGAffineTransform(translationX: 0, y: 150)
    })
})

谁能帮我理解为什么这些在执行时会有所不同？第一个似乎符合我的预期，但第二个似乎比预期更早地执行了动画。

Answer 1

您将看到默认时间曲线对关键帧动画的影响。第一个动画是 2 秒动画的最后 0.2 秒，第二个动画是 0.2 秒动画的全部。默认的 ease-in-ease-out 意味着第一个动画将完全在曲线的 ease-out 部分完成。

要在两个动画上强制使用线性曲线，您可以将它们包裹在另一个动画中并设置几个选项:

UIView.animate(withDuration: duration, delay: 0, options: [.curveLinear], animations: {
    UIView.animateKeyframes(withDuration: duration, delay: 0, options: [.overrideInheritedDuration, .calculationModeLinear], animations: {
        UIView.addKeyframe(withRelativeStartTime: 0.9, relativeDuration: 0.1, animations: {
            view1.transform = CGAffineTransform(translationX: 0, y: 150)
        })
    })

    UIView.animateKeyframes(withDuration: duration * 0.1, delay: duration * 0.9, options: [.overrideInheritedDuration, .calculationModeLinear], animations: {
        UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1, animations: {
            view2.transform = CGAffineTransform(translationX: 0, y: 150)
        })
    })
}, completion: nil)

我想你会同意这是看起来很糟糕的代码，但我假设这是一个智力练习:)