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

Question

我要么很愚蠢，要么误解了关键帧动画在iOS上的工作方式（或两者兼而有之！）。下面的两个动画块产生不同的结果，但我希望它们是相同的：

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秒动画的整体。默认的缓入缓出意味着第一个动画将完全在曲线的缓入部分中完成。

要在两个动画上施加线性曲线，可以将它们包裹在另一个动画中并设置几个选项：

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)

我认为您会同意的代码看起来很糟，但是我认为这是一种明智的做法：)