如何让 UIButton 在点击时抖动？ [复制]答案

【问题标题】：How to make UIButton shake on tap? [duplicate]如何让 UIButton 在点击时抖动？ [复制]
【发布时间】：2018-03-15 08:22:40
【问题描述】：

我正在学习使用关键帧和弹簧动画的 UIView 动画，并且我试图在点击它后让按钮抖动。问题是我从库中拖放按钮并将后沿固定到其上方的 UILabel 上，仅此而已。在各种示例中，我看到了标题约束，但我的按钮没有标题。这是我到目前为止的代码

@IBAction func noButtonPressed(_ sender: UIButton) {
    UIView.animate(withDuration: 1, delay: 1, usingSpringWithDamping: 0.5, initialSpringVelocity: 15, options: [], animations: {
        self.noButtonTrailing.constant = 16
        self.view.layoutIfNeeded()
    })
}

我想在某处做一个标题约束吗？谢谢

【问题讨论】：

标签： ios swift animation uibutton shake

【解决方案1】：

这是用于线性运动和 UIView 阻尼动画的简单媒体计时动画。

注意：Swift 4

extension UIView {


    // Using CAMediaTimingFunction
    func shake(duration: TimeInterval = 0.5, values: [CGFloat]) {
        let animation = CAKeyframeAnimation(keyPath: "transform.translation.x")

        // Swift 4.2 and above
        animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)

        // Swift 4.1 and below
        animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)


        animation.duration = duration // You can set fix duration
        animation.values = values  // You can set fix values here also
        self.layer.add(animation, forKey: "shake")
    }


    // Using SpringWithDamping
    func shake(duration: TimeInterval = 0.5, xValue: CGFloat = 12, yValue: CGFloat = 0) {
        self.transform = CGAffineTransform(translationX: xValue, y: yValue)
        UIView.animate(withDuration: duration, delay: 0, usingSpringWithDamping: 0.4, initialSpringVelocity: 1.0, options: .curveEaseInOut, animations: {
            self.transform = CGAffineTransform.identity
        }, completion: nil)

    }


    // Using CABasicAnimation
    func shake(duration: TimeInterval = 0.05, shakeCount: Float = 6, xValue: CGFloat = 12, yValue: CGFloat = 0){
        let animation = CABasicAnimation(keyPath: "position")
        animation.duration = duration
        animation.repeatCount = shakeCount
        animation.autoreverses = true
        animation.fromValue = NSValue(cgPoint: CGPoint(x: self.center.x - xValue, y: self.center.y - yValue))
        animation.toValue = NSValue(cgPoint: CGPoint(x: self.center.x + xValue, y: self.center.y - yValue))
        self.layer.add(animation, forKey: "shake")
    }

}

按钮操作

@IBAction func noButtonPressed(button: UIButton) {

  // for spring damping animation
  //button.shake()  


  // for CAMediaTimingFunction
  button.shake(duration: 0.5, values: [-12.0, 12.0, -12.0, 12.0, -6.0, 6.0, -3.0, 3.0, 0.0])

 // for CABasicAnimation
 //button.shake(shakeCount: 10)  

}

【讨论】：

如果你也能加个gif就太好了:)

【解决方案2】：

这是@Krunal 代码的输出。我使用了 3 种不同的情况，输出非常好 :)

    @IBAction func instagramButtonClicked(_ sender: Any) {
        guard let button = sender as? UIButton else {
            return
        }

        button.shake(duration: 0.5, values: [-12.0, 12.0, -12.0, 12.0, -6.0, 6.0, -3.0, 3.0, 0.0])

    }

    @IBAction func facebookButtonClicked(_ sender: Any) {
        guard let button = sender as? UIButton else {
            return
        }

        button.shake()
    }
    @IBAction func websiteButtonClicked(_ sender: Any) {
        guard let button = sender as? UIButton else {
            return
        }

        button.shake(duration: 0.5, values: [-1.0, 1.0, -6.0, 6.0, -10.0, 10.0, -12.0, 12.0])

    }

【讨论】：

很好..一切都很好:)

【解决方案3】：

我想你正在寻找这个：

let animation = CABasicAnimation(keyPath: "position")
animation.duration = 0.07
animation.repeatCount = 4
animation.autoreverses = true
animation.fromValue = NSValue(cgPoint: CGPoint(x: self.BUTTON.center.x - 10, y: BUTTON.center.y))
animation.toValue = NSValue(cgPoint: CGPoint(x: BUTTON.center.x + 10, y: BUTTON.center.y))
BUTTON.layer.add(animation, forKey: "position")

【讨论】：