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秒动画的全部动画。默认的easy-in-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)

我认为你会同意的是看起来很糟糕的代码，但我认为这是一项智力练习：）

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

1 个答案: