在ios中使用关键帧动画时如何设置动画曲线？

Question

使用UIView的关键帧动画时如何设置动画曲线:

animateKeyframesWithDuration:delay:options:animations:completion:

无论我在动画块中做什么似乎是线性的(除非我使用该UIViewKeyframeAnimationOptionCalculationModeCubic选项,但这不是我想要的).

我想在动画中UIViewAnimationOptionCurveEaseOut使用缓动曲线,就像使用常规动画时的选项一样:

animateWithDuration:delay:options:animations:completion:

Answer 1

Swift 2.0不允许使用UIViewAnimationOptionsas作为UIViewKeyframeAnimationOptions.它也不允许|它们在一起.

但是,有一个初始化UIViewKeyframeAnimationOptions程序需要一个rawValue.所以,下面的代码工作投入UIViewAnimationOptions到UIViewKeyframeAnimationOptions:

let animationOptions: UIViewAnimationOptions = .CurveEaseOut
let keyframeAnimationOptions: UIViewKeyframeAnimationOptions = UIViewKeyframeAnimationOptions(rawValue: animationOptions.rawValue)

然后我可以keyframeAnimationOptions转到animateKeyframesWithDuration,一切都很好.

Answer 2

实际上,您可以使用与animateWithDuration相同的曲线标志:delay:options:animations:completion:.只需"二进制"或"与animateKeyframesWithDuration调用中的其他选项":delay:options:animations:completion:

文档令人困惑,但确实有效.

您可以使用的曲线值是:

UIViewAnimationOptionCurveEaseInOut = 0 << 16,
UIViewAnimationOptionCurveEaseIn    = 1 << 16,
UIViewAnimationOptionCurveEaseOut   = 2 << 16,
UIViewAnimationOptionCurveLinear    = 3 << 16,

您获得的默认动画曲线是0或缓入,缓出.

Answer 3

这是我想出的一个漂亮而干净的Swift解决方案:

extension UIViewKeyframeAnimationOptions {

    init(animationOptions: UIViewAnimationOptions) {
        rawValue = animationOptions.rawValue
    }

}

用法:

UIViewKeyframeAnimationOptions(animationOptions: .CurveEaseOut)

Answer 4

通过@eskimwier答案试图曲线设置时并没有为我工作linear了animateKeyframes(withDuration:delay:options:animations:completion:)。这是在Swift 3的Xcode 8.2.1中。

我的动画似乎默认为easeInOut（启动速度慢，中间速度快，结尾速度慢）。苹果是否更改了默认曲线？

无论如何，我想要一条线性曲线，并尝试了以上建议的方法UIViewAnimationOptions与关键帧动画配合使用：

let animationOptions: UIViewAnimationOptions = .curveLinear
var keyframeAnimationOptions: UIViewKeyframeAnimationOptions = UIViewKeyframeAnimationOptions(rawValue: animationOptions.rawValue)

UIView.animateKeyframes(withDuration: 3, delay: 0, options: [keyframeAnimationOptions], animations: {
    //... animations here ...
}, completion: nil)

这没有效果。对我唯一有用的是在调用animateKeyframes之前执行此操作：

UIView.setAnimationCurve(UIViewAnimationCurve.linear)

Answer 5

如果您使用关键帧，则必须自己定义曲线。如果添加线性关键帧，则您将获得线性动画。如果添加非线性关键帧，您将获得非线性动画。

这frameStartTime是你的朋友...关键帧之间始终是线性的（或节奏/立方/立方节奏，如定义UIViewKeyframeAnimationOptionCalculationMode）

UIViewKeyframeAnimationOptionCalculationModeLinear     = 0 << 9,
UIViewKeyframeAnimationOptionCalculationModeDiscrete   = 1 << 9,
UIViewKeyframeAnimationOptionCalculationModePaced      = 2 << 9,
UIViewKeyframeAnimationOptionCalculationModeCubic      = 3 << 9,
UIViewKeyframeAnimationOptionCalculationModeCubicPaced = 4 << 9

要计算正确的计时值，您可以使用它作为参考： RBBEasingFunction

例如EaseInOutQuad这样（其中 t 是动画内的相对时间）：

if (t < 0.5) {
    return 2 * t * t;
} else {
    return -1 + (4 - 2 * t) * t;
}