通过使 UI 元素闪烁来指示错误

Question

我有一个视图，用户需要在按钮起作用之前进行选择。为了使这一点更明显，如果首先按下（灰色）按钮，我想让代表需要完成的选择的元素闪烁。 IE。我想指出这是该状态下的错误，并引导用户注意他们需要首先使用的 UI 元素。

我目前尝试让元素（下面代码中的self.display）快速闪烁两次如下：

@IBAction func inactiveButtonClick() {
    let period = 0.16

    UIView.animate(withDuration: period/2, delay: 0.0, options: [.curveEaseInOut, .autoreverse, .repeat], animations: {
        self.display.alpha = 0
    }, completion: { _ -> Void in
        self.display.alpha = 1
    })

    DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + period*2, execute: {
        self.display.layer.removeAllAnimations()
    })

}

这相当很好，但感觉不是 100% 正确，动画有时会在结束前被截断几分之一秒。我想我可以对两个动画进行排队，但我想知道是否有更简单的方法来完成此操作。是否有任何内置方法可以让 UI 元素闪烁以指示错误？如果不是，是否有任何“已知良好”的曲线和频率组合可以将其传达给用户？

Answer 1

关键帧动画似乎非常适合这种情况：

UIView.animateKeyframes(withDuration: period, delay: 0.0, options: [], animations: {
    UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.5, animations: {
        self.display.alpha = 0
    });
    UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5, animations: {
        self.display.alpha = 1
    });
}, completion: nil);

因此，您首先创建一个持续时间为 period 的关键帧动画。在动画块内部，您可以通过指定相对开始时间（0 到 1 - 1 开始关键帧动画结束，即持续时间）来添加自定义关键帧动画。

所以首先我们添加从开头开始的动画，其相对持续时间为 0.5，即总动画持续时间的 1/2。第二个动画将在第一个动画完成时开始，时间为总动画时间的 1/2，并继续播放剩余的 1/2 动画时间。

希望对您有所帮助

通过使 UI 元素闪烁来指示错误

Indicating error by making UI element blink

interaction-design

uiviewanimation

ios

swift