圆形边框按钮颤动

简介

圆形边框按钮颤动（Circular Border Button Shaker）是一种常见的UI特效，它能够吸引用户的注意力并提高应用程序的交互性。它通常被用于表达用户行为的响应（如按钮被按下）或错误状态的警示（如密码错误）。在本文中，我们将介绍如何实现圆形边框按钮颤动效果。

实现原理

圆形边框按钮颤动效果是通过在按钮被触发时扩大并缩小按钮边框的宽度来实现的。首先，我们需要定义两个动画：

1. 按钮按下动画：按钮按下时，将按钮边框的宽度增加到一个较大的值（通常是边框宽度的两倍），然后逐渐恢复到正常大小。

2. 振动动画：按钮在按下时需要振动。我们可以使用一个叫做核函数（Kernel Function）的函数来生成一个随机数，该随机数应用于每个动画迭代的边框宽度。这将产生一个随机的，不规则的动画效果，使按钮看起来像是在颤动。

在实现这两个动画之后，当用户按下按钮时，我们可以同时播放按钮按下动画和振动动画，从而产生一个圆形边框按钮颤动效果。

代码示例

假设你使用iOS开发，以下是Swift的一个基本实现，你可以参考它来实现你自己的圆形边框按钮颤动效果：

class CircularBorderButton: UIButton {

    var pressDuration: TimeInterval = 0.2
    var borderWidthExpanded: CGFloat = 10
    var borderWidthNormal: CGFloat = 5
    var shakeDuration: TimeInterval = 0.5
    var shakeDelta: CGFloat = 6.0

    override func awakeFromNib() {
        super.awakeFromNib()

        layer.borderWidth = borderWidthNormal
        layer.borderColor = titleLabel?.textColor?.cgColor
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesBegan(touches, with: event)

        UIView.animate(withDuration: pressDuration,
                       animations: {
                        self.layer.borderWidth = self.borderWidthExpanded
                       },
                       completion: { _ in
                        UIView.animate(withDuration: self.pressDuration) {
                            self.layer.borderWidth = self.borderWidthNormal
                        }
                       })

        let shakeAnimation = CAKeyframeAnimation(keyPath: "borderWidth")
        shakeAnimation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
        shakeAnimation.duration = shakeDuration
        var borderWidths = [CGFloat]()

        let shakeCount = Int(shakeDuration / 0.03)
        for _ in 0...shakeCount {
            borderWidths.append(borderWidthNormal + CGFloat(arc4random_uniform(UInt32(shakeDelta * 2))) - shakeDelta)
        }

        shakeAnimation.values = borderWidths
        layer.add(shakeAnimation, forKey: "borderShake")
    }
}

结论

圆形边框按钮颤动是一种常见的UI特效，通过扩大并缩小按钮边框的宽度来产生振动效果，以吸引用户的注意力。我们实现了两个动画：一个是按钮按下动画，另一个是振动动画。使用Swift，我们可以很容易地实现这个效果，使我们的应用程序更加生动有趣。