用户界面非法输入时提示闪烁动画的简例

当用户输入空值时,我们需要提示用户该内容不能为空,所以需要一个UI上的显著提示.

因为我们使用了Eureka库,所以可以借助Row的Rule来操作:

TextRow(){row in
    row.placeholder = "输入习惯目录组名称"
    row.value = self.node.name
    row.add(rule: RuleRequired())
}

我给row添加了一个内置的规则RuleRequired,这表示row的内容不能为空,否则会在验证时失败.

接下来在保存对象时我们需要验证规则:

if form.validate().count != 0{
    return
}

我们看一下实际效果:

但是等一下!这样干拔显示是否有些不明显!?

为了更好地提示用户注意,我们需要来点小动画:

//显示占位Label闪烁动画
if let placeholderLabel = cell.textField.value(forKey: "_placeholderLabel") as? UILabel{
    placeholderLabel.alpha = 0.0
    UIView.animate(withDuration: 0.3, delay: 0.0, usingSpringWithDamping: 0.2, initialSpringVelocity: 2.8, options: [.autoreverse], animations: {
        placeholderLabel.alpha = 1.0
    }, completion: nil)
}

我们首先取得占位Label对象,然后设置其透明度,接着来一波流动画显示.

注意我在动画选项中使用了.autoreverse选项,含义是做一个重复动作.

最后我们再次运行App看一下效果:

是不是感觉效果好多了???

这就是我们需要的效果!!!

看似很小的动画可以带来很好的用户体验,这次就到这里,感谢观赏 ;)