How to make "shaking" animation

Question

In my xcode project I have an UIImage. I want to make it shaking (animation) from left to right a little bit. I wrote this code, however, its not working.

-(void)errorShake
{
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:1.0];



    [lockImage setTransform:CGAffineTransformMakeRotation(-5 * M_PI / 180.0)];
    [lockImage setTransform:CGAffineTransformMakeRotation(-10 * M_PI / 180.0)];
    [lockImage setTransform:CGAffineTransformMakeRotation(-15 * M_PI / 180.0)];
    [lockImage setTransform:CGAffineTransformMakeRotation(-20 * M_PI / 180.0)];
     [lockImage setTransform:CGAffineTransformMakeRotation(-15 * M_PI / 180.0)];
     [lockImage setTransform:CGAffineTransformMakeRotation(-10 * M_PI / 180.0)];
     [lockImage setTransform:CGAffineTransformMakeRotation(-5 * M_PI / 180.0)];
     [lockImage setTransform:CGAffineTransformMakeRotation(0 * M_PI / 180.0)];
     [lockImage setTransform:CGAffineTransformMakeRotation(5 * M_PI / 180.0)];
     [lockImage setTransform:CGAffineTransformMakeRotation(10 * M_PI / 180.0)];
     [lockImage setTransform:CGAffineTransformMakeRotation(15 * M_PI / 180.0)];
     [lockImage setTransform:CGAffineTransformMakeRotation(20 * M_PI / 180.0)];
     [lockImage setTransform:CGAffineTransformMakeRotation(15 * M_PI / 180.0)];
     [lockImage setTransform:CGAffineTransformMakeRotation(10 * M_PI / 180.0)];
     [lockImage setTransform:CGAffineTransformMakeRotation(5 * M_PI / 180.0)];
     [lockImage setTransform:CGAffineTransformMakeRotation(0 * M_PI / 180.0)];


    [UIView commitAnimations];
}

Could you tell me please, how can I make my image shake ?

Solution 1

Here's the code I use for that effect.

 -(void)shakeView {

        CABasicAnimation *shake = [CABasicAnimation animationWithKeyPath:@"position"];
        [shake setDuration:0.1];
        [shake setRepeatCount:2];
        [shake setAutoreverses:YES];
        [shake setFromValue:[NSValue valueWithCGPoint:
                                 CGPointMake(lockImage.center.x - 5,lockImage.center.y)]];
        [shake setToValue:[NSValue valueWithCGPoint:
                               CGPointMake(lockImage.center.x + 5, lockImage.center.y)]];
        [lockImage.layer addAnimation:shake forKey:@"position"];
    }

As Jere mentioned. Make sure to include the import:

#import <QuartzCore/QuartzCore.h>

You can also add it as a category on UIView.

Solution 2

brynbodayles answer also works under iOS8 for a shake animation in swift.

With Import of QuartzCore:

func shakeView(){
    var shake:CABasicAnimation = CABasicAnimation(keyPath: "position")
    shake.duration = 0.1
    shake.repeatCount = 2
    shake.autoreverses = true

    var from_point:CGPoint = CGPointMake(LoginField.center.x - 5, LoginField.center.y)
    var from_value:NSValue = NSValue(CGPoint: from_point)

    var to_point:CGPoint = CGPointMake(LoginField.center.x + 5, LoginField.center.y)
    var to_value:NSValue = NSValue(CGPoint: to_point)

    shake.fromValue = from_value
    shake.toValue = to_value
    LoginField.layer.addAnimation(shake, forKey: "position")
}

Solution 3

func shakeView(_ view: UIView?) {
    let shake = CABasicAnimation(keyPath: "position")
    shake.duration = 0.1
    shake.repeatCount = 2
    shake.autoreverses = true
    shake.fromValue = NSValue(cgPoint: CGPoint(x: (view?.center.x)! - 5, y: view?.center.y ?? 0.0))
    shake.toValue = NSValue(cgPoint: CGPoint(x: (view?.center.x)! + 5, y: view?.center.y ?? 0.0))
    view?.layer.add(shake, forKey: "position")
}

Comments

[SmartTree]

Thanks ! But do I need to add any framework / library to the project ? Xcode gives an error because of first line.

[jere]

add the QuartzCore framework to your project! and also add #import <QuartzCore/QuartzCore.h> in the file you want to use the animation, or better yet in the apps prefix header file so you can see it from any class.

[SmartTree]

Wonderful ! And one more question: what is [self center] ?

[brynbodayle]

I've edited my answer to fix that. That was for the category implementation.

[SmartTree]

Xcode still gives me an error: Property "center" not found on object of type 'CABasicAnimation'

[Cashew]

you missed one of the center.x's... but good answer otherwise

[SmartTree]

Perfect ! Works fine ! Thanks everyone for help.

[Manu Gupta]

How to stop this animation in between while the shake is repeating

[AlBeebe]

This is such an elegant solution

[Francesco B.]

Welcome to StackOverflow! Perhaps you can add more details, to explain better the most important parts of your answer. Have a read of How do I write a good answer? for more information.