animating UITextField to indicate a wrong password
This Swift 2.0 answer requires no recursion and no loops. Just leverages CABasicAnimation
by refining this SO answer:
func shakeView(shakeView: UIView) {
let shake = CABasicAnimation(keyPath: "position")
let xDelta = CGFloat(5)
shake.duration = 0.15
shake.repeatCount = 2
shake.autoreverses = true
let from_point = CGPointMake(shakeView.center.x - xDelta, shakeView.center.y)
let from_value = NSValue(CGPoint: from_point)
let to_point = CGPointMake(shakeView.center.x + xDelta, shakeView.center.y)
let to_value = NSValue(CGPoint: to_point)
shake.fromValue = from_value
shake.toValue = to_value
shake.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
shakeView.layer.addAnimation(shake, forKey: "position")
}
Updated for Swift 4:
func shakeView(_ shakeView: UIView) {
let shake = CABasicAnimation(keyPath: "position")
let xDelta = CGFloat(5)
shake.duration = 0.15
shake.repeatCount = 2
shake.autoreverses = true
let from_point = CGPoint(x: shakeView.center.x - xDelta, y: shakeView.center.y)
let from_value = NSValue(cgPoint: from_point)
let to_point = CGPoint(x: shakeView.center.x + xDelta, y: shakeView.center.y)
let to_value = NSValue(cgPoint: to_point)
shake.fromValue = from_value
shake.toValue = to_value
shake.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
shakeView.layer.add(shake, forKey: "position")
}
(Jan 16 2015) Update: (enum UIViewAnimationOptions) cast is fine and UIViewAnimationOptionCurveEaseOut is 2 << 16 per UIView.h under typedef NS_OPTIONS(NSUInteger, UIViewAnimationOptions)
(Jan 31 2013) Further modified Kai's answer to include:
- edge delay of 0.01s
- easeInOut
- reduce duration of shakes every shake from 0.09 to 0.04
- throttle down movement by a pt every 1 complete loop (right-left-right)
Note: if you plan on shaking two controls (email and password) together you might want to avoid using class or static variables for shakes and translate. Instead, initialize and pass shake and translate as parameters. I used statics so no class variables needed.
-(void)shakeAnimation:(UIView*) view {
const int reset = 5;
const int maxShakes = 6;
//pass these as variables instead of statics or class variables if shaking two controls simultaneously
static int shakes = 0;
static int translate = reset;
[UIView animateWithDuration:0.09-(shakes*.01) // reduce duration every shake from .09 to .04
delay:0.01f//edge wait delay
options:(enum UIViewAnimationOptions) UIViewAnimationCurveEaseInOut
animations:^{view.transform = CGAffineTransformMakeTranslation(translate, 0);}
completion:^(BOOL finished){
if(shakes < maxShakes){
shakes++;
//throttle down movement
if (translate>0)
translate--;
//change direction
translate*=-1;
[self shakeAnimation:view];
} else {
view.transform = CGAffineTransformIdentity;
shakes = 0;//ready for next time
translate = reset;//ready for next time
return;
}
}];
}
Something like that
-(void)shake:(UIView *)theOneYouWannaShake
{
[UIView animateWithDuration:0.03 animations:^
{
theOneYouWannaShake.transform = CGAffineTransformMakeTranslation(5*direction, 0);
}
completion:^(BOOL finished)
{
if(shakes >= 10)
{
theOneYouWannaShake.transform = CGAffineTransformIdentity;
return;
}
shakes++;
direction = direction * -1;
[self shake:theOneYouWannaShake];
}];
}
So you need three more things: An int direction which is set to 1 before the shake is called an int shakes, which is set to 0 before the shake is called and a constant MAX_SHAKES which is as large as you like. Hope that helps.
EDIT:
call it like this:
direction = 1;
shakes = 0;
[self shake:aUIView];
inside header file add
int direction;
int shakes;