问如何设置UIView关键帧动画的动画曲线(``func UIView.animateKeyframes()`)
EN

Stack Overflow用户

提问于 2021-06-20 13:52:26

回答 1查看 178关注 0票数 2

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

ios

swift

uiviewanimation

keyframe

回答 1

Stack Overflow用户

发布于 2021-06-20 13:52:26

有趣的是，如果您能够弄清楚如何将UIView.animate()方法(类型为UIView.AnimationOptions)传递给animateKeyframes(withDuration:delay:options:animations:completion:)，那么它们的动画选项就可以工作。不幸的是，对于像线性、缓入或缓出这样的定时曲线，没有现有的常量。展示了如何将值从UIView.AnimationOptions常量“强制”到UIView.KeyframeAnimationOptions OptionSet中：

extension UIViewKeyframeAnimationOptions {

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

}

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

我对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()匹配的选项中的标志感到好奇。我编写了一些代码来记录这两个OptionSets的所有值，得到的结果如下：

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动画的缓入/缓出计时。

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

编辑#2：

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

您可以从github 下载示例项目。

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

下面是这个组合的视频：