UIButton / UIView.animate使按钮依次闪烁

Question

我正在快速制作一个Simon游戏，其中信号以枚举[Green，Yellow，Red，Red，Blue]给出...我想让按钮在信号发出时闪烁。我用来使按钮闪烁的代码是

extension UIButton {
    func blink() {
        self.alpha = 0.0;
        UIView.animate(withDuration: 0.6, //Time duration you want,
            delay: 0.0,
            options: [.curveEaseInOut, .autoreverse],
            animations: { [weak self] in self?.alpha = 1.0 },
            completion: { [weak self] _ in self?.alpha = 1.0 })
    }
}

并且在我的给定信号功能中，我正在执行

    func giveSignal() {
        disableButton()
        signals = []
        for _ in 0...levelNum  {
//            stopBlinkAll()
            let randomSignal:Int = randomSource.nextInt(upperBound: 4)
            switch randomSignal {
                //Green
                case 0:
                    green.blink()
                    signals.append(Block.green)
//                    green.stopBlink()
                //Red
                case 1:
                    red.blink()
                    signals.append(Block.red)
//                    red.stopBlink()
                //Yellow
                case 2:
                    yellow.blink()
                    signals.append(Block.yellow)
//                    yellow.stopBlink()
                //Blue
                case 3:
                    blue.blink()
                    signals.append(Block.blue)
//                    blue.stopBlink()
            default:
                break
            }

        }
        let finalSeq:String = makeString()
        statusBar.text = finalSeq
    }

但是，例如，如果信号指定为[绿色，黄色，红色]，则所有绿色，黄色，红色按钮会同时闪烁。如何解决此问题，使按钮一个接一个闪烁？

Answer 1

首先，将完成处理程序添加到blink，因为我们将仅在前一次闪烁完成后才开始下一个闪烁。

extension UIButton {
    func blink(completion: @escaping () -> Void) {
        self.alpha = 0.0;
        UIView.animate(withDuration: 0.6, //Time duration you want,
            delay: 0.0,
            options: [.curveEaseInOut],
            animations: { self.alpha = 1.0 },
            completion: { _ in
                UIView.animate(withDuration: 0.6,
                    delay: 0.0,
                    options: [.curveEaseInOut],
                    animations: { self.alpha = 0.0 },
                    completion: { _ in completion() })
             })
    }
}

然后编写一个包含[Block]和索引的函数，该函数使该索引处的按钮闪烁。请注意，我如何通过再次调用blink(at:in:)的闭包作为blink()调用的完成：

func blink(at index: Int, in signals: [Block]) {
    guard index < signals.count else { return }
    let completion = { blink(at: index + 1, in: signals) }

    switch (signals[index]) {
        case .green: green.blink(completion: completion)
        case .red: red.blink(completion: completion)
        case .yellow: yellow.blink(completion: completion)
        case .blue: blue.blink(completion: completion)
    }
}

现在，我们可以重写giveSignal：

func giveSignal() {
    disableButton()
    signals = []
    for _ in 0...levelNum  {
        let randomSignal:Int = randomSource.nextInt(upperBound: 4)
        switch randomSignal {
        //Green
        case 0:
            signals.append(Block.green)
        //Red
        case 1:
            signals.append(Block.red)
        //Yellow
        case 2:
            signals.append(Block.yellow)
        //Blue
        case 3:
            signals.append(Block.blue)
        default:
            break
        }

    }
    blink(at: 0, in: signals) // This starts the sequence of blinks
    let finalSeq:String = makeString()
    statusBar.text = finalSeq
}