UIView shake animation UIView shake animation ios ios

UIView shake animation


I wrote that post. It's overkill for a UIView, plus the parameters are geared toward an OSX app. Do this instead.

CABasicAnimation *animation =                          [CABasicAnimation animationWithKeyPath:@"position"];[animation setDuration:0.05];[animation setRepeatCount:8];[animation setAutoreverses:YES];[animation setFromValue:[NSValue valueWithCGPoint:               CGPointMake([lockView center].x - 20.0f, [lockView center].y)]];[animation setToValue:[NSValue valueWithCGPoint:               CGPointMake([lockView center].x + 20.0f, [lockView center].y)]];[[lockView layer] addAnimation:animation forKey:@"position"];

You'll have to play with the duration and repeatCount parameters as well as the x distance from center in the from and to values, but it should give you what you need. I hope that helps. Let me know if you have any questions.

---


Swift 3.0

let midX = lockView.center.xlet midY = lockView.center.ylet animation = CABasicAnimation(keyPath: "position")animation.duration = 0.06animation.repeatCount = 4animation.autoreverses = trueanimation.fromValue = CGPoint(x: midX - 10, y: midY)animation.toValue = CGPoint(x: midX + 10, y: midY)layer.add(animation, forKey: "position")


I prefer this solution that has a nice springy behavior, ideal for a wrong-password shake animation.

view.transform = CGAffineTransformMakeTranslation(20, 0);[UIView animateWithDuration:0.4 delay:0.0 usingSpringWithDamping:0.2 initialSpringVelocity:1.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{    view.transform = CGAffineTransformIdentity;} completion:nil];

Swift 3

extension UIView {    func shake() {        self.transform = CGAffineTransform(translationX: 20, y: 0)        UIView.animate(withDuration: 0.4, delay: 0, usingSpringWithDamping: 0.2, initialSpringVelocity: 1, options: .curveEaseInOut, animations: {            self.transform = CGAffineTransform.identity        }, completion: nil)    }}


Here's my nice and simple looking version This simulates the shake you get on Mac OS X when you do an incorrect login. You could add this as a category on UIView if you like.

@implementation UIView (DUExtensions)- (void) shake {    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.translation.x"];    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];    animation.duration = 0.6;    animation.values = @[ @(-20), @(20), @(-20), @(20), @(-10), @(10), @(-5), @(5), @(0) ];    [self.layer addAnimation:animation forKey:@"shake"];  }@end

The animation values are the x offset from the views current position. Positive values shifting the view to the right, and negative values to the left. By successively lowering them, you get a shake that naturally loses momentum. You can tweak these numbers if you like.