ios - 如何为 UIView 关键帧动画设置动画曲线 (`func UIView.animateKeyframes()` )

Question

UIView 关键帧动画可让您创建通过一系列步骤进行的 View 动画。函数 animateKeyframes(withDuration:delay:options:animations:completion:) 有一个类型为 UIView.KeyframeAnimationOptions 的选项参数。我希望这能让我选择一条整体时间曲线以应用于组合的动画集。它似乎应用了默认的缓入缓出动画曲线，并且似乎不允许您像 UIView.animate() 系列方法那样指定时间曲线。如果我想要线性计时，只是缓入或缓出怎么办？

Answer 1

有趣的是，UIView.animate() 方法(UIView.AnimationOptions 类型)的动画选项如果你能弄清楚如何将它们传递给 就可以工作>animateKeyframes(withDuration:delay:options:animations:completion:)。遗憾的是，对于线性、缓入或缓出等时序曲线，没有现成的常量。 This SO answer显示如何将 UIView.AnimationOptions 常量中的值“强制”到 UIView.KeyframeAnimationOptions OptionSet:

extension UIViewKeyframeAnimationOptions {

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

}

我更进一步，为不同的计时函数定义了常量。 (我不知道为什么 Apple 没有定义这些。这看起来很荒谬，但你就是这样。)

我对 UIView.KeyframeAnimationOptions 的扩展如下所示:

extension UIView.KeyframeAnimationOptions {
    static var curveLinear: UIView.KeyframeAnimationOptions =
        UIView.KeyframeAnimationOptions(rawValue:UIView.AnimationOptions.curveLinear.rawValue)

    static var curveEaseInOut: UIView.KeyframeAnimationOptions =
        UIView.KeyframeAnimationOptions(rawValue:UIView.AnimationOptions.curveEaseInOut.rawValue)

    static var curveEaseIn: UIView.KeyframeAnimationOptions =
        UIView.KeyframeAnimationOptions(rawValue:UIView.AnimationOptions.curveEaseIn.rawValue)

    static var curveEaseOut: UIView.KeyframeAnimationOptions =
        UIView.KeyframeAnimationOptions(rawValue:UIView.AnimationOptions.curveEaseOut.rawValue)

    init(animationOptions: UIView.AnimationOptions) {
        self.init(rawValue: animationOptions.rawValue)
    }
}

通过该扩展，您可以像调用 UIView.animate() 方法一样使用时序曲线值:

UIView.animateKeyframes(withDuration: 2.0, delay: 0, options: [.curveLinear]) {
    // Your animation keyframe steps here
}

UIView.AnimationOptions 中定义的一些其他标志可能也对 UIView.KeyframeAnimationOptions 有效。您可以使用允许您将 UIView.AnimationOptions 映射到 UIView.KeyframeAnimationOptions 的方法，或者向 UIView.KeyframeAnimationOptions 添加额外的标志将是微不足道的> 与我添加时序曲线标志的方式相同。

---

编辑:

我对 UIView.animate() 和 animateKeyframes() 匹配选项中的标志感到好奇。我写了一些代码来记录两个 OptionSet 的所有值，这就是我得到的:

KeyframeAnimationOptions:
option value 0x00000001 = layoutSubviews
option value 0x00000002 = allowUserInteraction
option value 0x00000004 = beginFromCurrentState
option value 0x00000008 = repeat
option value 0x00000010 = autoreverse
option value 0x00000020 = overrideInheritedDuration
option value 0x00000200 = overrideInheritedOptions

option value 0x00000000 = calculationModeLinear
option value 0x00000400 = calculationModeDiscrete
option value 0x00000800 = calculationModePaced
option value 0x00000C00 = calculationModeCubic
option value 0x00001000 = calculationModeCubicPaced

UIView.AnimationOptions:
option value 0x00000001 = layoutSubviews
option value 0x00000002 = allowUserInteraction
option value 0x00000004 = beginFromCurrentState
option value 0x00000008 = repeat
option value 0x00000010 = autoreverse
option value 0x00000020 = overrideInheritedDuration
option value 0x00000200 = overrideInheritedOptions

option value 0x00000040 = overrideInheritedCurve
option value 0x00000080 = allowAnimatedContent
option value 0x00000100 = showHideTransitionViews
option value 0x00000000 = curveEaseInOut
option value 0x00010000 = curveEaseIn
option value 0x00020000 = curveEaseOut
option value 0x00030000 = curveLinear
option value 0x00100000 = transitionFlipFromLeft
option value 0x00200000 = transitionFlipFromRight
option value 0x00300000 = transitionCurlUp
option value 0x00400000 = transitionCurlDown
option value 0x00500000 = transitionCrossDissolve
option value 0x00600000 = transitionFlipFromTop
option value 0x00700000 = transitionFlipFromBottom
option value 0x03000000 = preferredFramesPerSecond60
option value 0x07000000 = preferredFramesPerSecond30

两组中的前 7 个标志具有相同的名称和相同的值。 KeyframeAnimationOptions 的 0 值是 calculationModeLinear，它是 UIView.AnimationOptions 的 curveEaseInOut。它会导致关键帧和“常规”UIView 动画的缓入/缓出时间。

所有其他常量的值在两个 OptionSet 中都是唯一的，这表明其他一些 UIView.AnimationOptions 可能适用于关键帧动画。不过，我只测试了时序曲线值，它们都按预期工作。

编辑#2:

关键帧动画标志(如 calculationModeLinear、calculationModeCubic 和 calculationModeCubicPaced)和 View 动画标志(如 curveLinear、curveEaseInOut 等)将如何交互并不是很明显，因为关键帧动画标志也与动画计时相关.我写了一个测试应用程序看看他们是怎么做的。事实证明，UIView.AnimationOptions 时序曲线标志会影响整个关键帧动画的整体时序。 (整体关键帧动画开始和停止的方式。)

您可以从github 下载示例项目here .

很难看到缓入/缓出 UIView 动画计时与立方关键帧动画选项之一相结合。使用关键帧计算模式线性模式更容易看到缓入/缓出。

下面是该组合的视频:

(请注意青色方 block 在返回起点之前如何滑行到动画矩形的右下角停止。)