How to make UIButton shake on tap? [duplicate] - ios

Question

This question already has answers here:
How do you make a shake animation for a button using Swift 3 [closed]
(2 answers)
Closed 5 years ago.
I'm learning about UIView animations using keyframes and spring animations and I'm trying to make a button shake after tapping it. The issue is that I drag and dropped the button from the library and pinned the trailing edge to a UILabel above it and nothing else. In the various examples I see a header constraint but my button has no header. This is the code I have so far
#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()
})
}
Am I suppose to make a header constraint somewhere? Thanks

Answer 1

Here is simple media timing animation for linear movement & UIView damping animation.
Note: 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")
}
}
Button Action
#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)
}

Answer 2

Here is the output for #Krunal code. I used 3 different cases and output is pretty nice :)
#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])
}

Answer 3

I think you are looking for this:
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")