Swift：For循环 - 在迭代之前等待动画完成

Question

我正在尝试显示基于随机数组的动画序列。

在我的 ViewController 上，我有 4 个带有标签 (1,2,3,4) 的 UIButton。

然后我有一个 shuffledArray

shuffledArray = [3,2,4,1]

我正在使用 for 循环遍历该数组并像这样为 UIButton 的背景设置动画：

for square in shuffledArray {
        let btn = view.viewWithTag(square)
        
        UIView.animate(withDuration: 1, delay: 0.0, options:[], animations: {
            btn?.backgroundColor = .red
            btn?.backgroundColor = .black
            btn?.backgroundColor = .red
        }, completion: nil)
 }

不过，这只会让 4 个方格同时变黑。

有没有办法运行这个循环，但要等待每个动画首先触发，然后再迭代到数组的下一个索引？

我尝试使用：

sleep(4)

for 循环结束，但这似乎冻结了我的应用程序，然后所有 4 个方块再次同时发生变化。

旁注

这个 for 循环在按钮点击时被激活。在 for 循环运行后，我将生成一个介于 1 和 4 之间的随机数，然后将其附加到 shuffledArray。所以它开始于：

 shuffledArray = [3]

那就是第二次了

 shuffledArray = [3,2]

第三个

 shuffledArray = [3,2,4]

等等……

这个问题似乎只发生在数组包含超过 1 个项目时。

Answer 1

试试这样的？ （未测试）

var currentIndex = 0 
func animateNext() {
    if currentIndex < shuffledArray.count {  
        let btn = view.viewWithTag(shuffledArray[currentIndex])
        UIView.animate(withDuration: 1, delay: 0.0, options:[.autoreverse], animations: {
            btn?.backgroundColor = .red
            btn?.backgroundColor = .black
        }) { _ in
            self.currentIndex += 1
            self.animateNext()
        }
    }
}

Answer 2

尝试使用延迟属性，如下所示：

for (index, square) in shuffledArray.enumerated() {
        let btn = view.viewWithTag(square)

        UIView.animate(withDuration: 1, delay: index, options:[], animations: {
            btn?.backgroundColor = .red
            btn?.backgroundColor = .black
            btn?.backgroundColor = .red
        }, completion: nil)
    }

更新：

• 尝试通过CAAnimationGroup (https://developer.apple.com/documentation/quartzcore/caanimationgroup) 组合动画。
• 使用CAKeyframeAnimation - 用于闪烁效果 (https://developer.apple.com/documentation/quartzcore/cakeyframeanimation)