iOS：如何为 3 个具有相同持续时间和重复的序列设置动画？

Posted 2023-03-13

【中文标题】iOS：如何为 3 个具有相同持续时间和重复的序列设置动画？

【英文标题】：iOS: How to animate 3 sequences with equal duration and repeat?

【发布时间】：2020-07-24 09:22:32

【问题描述】：

我想为 UIView 的颜色变化制作动画。

我希望它从 Red -> Blue -> Yellow -> Red -> Blue ... 等等。 我希望每个序列/过渡持续 1 秒。所以 1 个周期应该需要 3 秒。

基本上，

重复

红色 -> 蓝色 蓝色 -> 黄色 黄色 -> 红色

故事板是这样的：

我的第一个想法是使用animateKeyframes。

UIView.animateKeyframes(withDuration: 3, delay: 0, options: [.repeat], animations: 
    UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 1.0/3.0) 
        self.squareView.backgroundColor = .red
    
    UIView.addKeyframe(withRelativeStartTime: 1.0/3.0, relativeDuration: 1.0/3.0) 
        self.squareView.backgroundColor = .blue
    
    UIView.addKeyframe(withRelativeStartTime: 2.0/3.0, relativeDuration: 1.0/3.0) 
        self.squareView.backgroundColor = .yellow
    
)

注意我是如何添加repeat 选项的。每个序列持续 3 秒的 1/3 = 1 秒。我觉得我的计算是正确的。

但是，问题在于这 3 个序列不会连续重复。

重复

红色 -> 蓝色 蓝色 -> 黄色 黄色 -> 黑色 黑色 -> 红色

方块的初始颜色（在情节提要中设置）黑色，出现在每个循环之间！

一瞬间，你可以看到黑色方块。

如果我将初始颜色更改为红色，那么看起来红色序列比其他颜色持续时间更长。所以这并不能解决问题。

使用UIView.animate 是我的第二次尝试。

UIView.animate(withDuration: 1, animations: 
    self.squareView.backgroundColor = .red
)  [weak self] _ in
    UIView.animate(withDuration: 1, animations: 
        self?.squareView.backgroundColor = .blue
    )  [weak self] _ in
        UIView.animate(withDuration: 1, animations: 
            self?.squareView.backgroundColor = .yellow
        )  [weak self] _ in
            self?.startAnimation()
        
    

效果很好！

从红色到蓝色到黄色的平滑过渡，然后再回到红色。 但是代码比较难看..

有没有一种方法可以使用animateKeyFrames 或其他方法来实现我想要的干净代码？

顺便说一句，我最初的目标比这复杂得多。我将其简化为单个视图，但根本问题是相同的。

提前致谢。

【问题讨论】：

在您使用animateKeyframes 的第一个示例中，您应该添加将动画恢复为黑色的第四个关键帧

@Kirow 嗨，这仍然会显示黑色。我不希望黑色出现在序列中:(

【参考方案1】：

要使您的动画正确，您需要确保您的初始颜色与上次颜色更改相同。

所以首先为.black -> .red 设置动画，然后为-> .blue -> .yellow -> .red 设置重复

UIView.animate(withDuration: 1, animations: 
    view.backgroundColor = .red
, completion:  isComplete in
    UIView.animateKeyframes(withDuration: 3, delay: 0, options: [.repeat], animations: 
        UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1.0/3.0) 
            view.backgroundColor = .blue
        
        UIView.addKeyframe(withRelativeStartTime: 1.0/3.0, relativeDuration: 1.0/3.0) 
            view.backgroundColor = .yellow
        
        
        UIView.addKeyframe(withRelativeStartTime: 2.0/3.0, relativeDuration: 1.0/3.0) 
            view.backgroundColor = .red
        
    )
)