我要么是愚蠢,要么误解了关键帧动画在 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)
})
})
谁能帮我理解为什么这些在执行时会有所不同?第一个似乎符合我的预期,但第二个似乎比预期更早地执行了动画。
最佳答案
您将看到默认时间曲线对关键帧动画的影响。第一个动画是 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)
我想你会同意这是看起来很糟糕的代码,但我假设这是一个智力练习:)
关于ios - 了解 animateKeyframes 相对开始时间/延迟,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47814511/