How do you create a wiggle animation similar to ip

Question

We are currently developing an application that contains a series of icons. We want the icons to wiggle like the app deletion animations when pressed. What would be the best way to code this animation sequence?

Answer 1

The answer by Vinzius is very cool. However the wobble only rotates from 0 Radians to 0.08. Thus the wobble can look a little unbalanced. If you get this same issue then you may want to add both a negative and a positive rotation by using a CAKeyframeAnimation rather than a CABasicRotation:

- (CAAnimation*)getShakeAnimation 
{
    CAKeyframeAnimation* animation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];

    CGFloat wobbleAngle = 0.06f;

    NSValue* valLeft = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(wobbleAngle, 0.0f, 0.0f, 1.0f)];
    NSValue* valRight = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(-wobbleAngle, 0.0f, 0.0f, 1.0f)];
    animation.values = [NSArray arrayWithObjects:valLeft, valRight, nil];

    animation.autoreverses = YES;  
    animation.duration = 0.125;
    animation.repeatCount = HUGE_VALF;  

    return animation;    
}

You can use this animation method for your view or button like this.

[self.yourbutton.layer addAnimation:[self getShakeAnimation] forKey:@""];

Answer 2

I tried to do something like that for an iPad app.

I tried to do some rotations (with CAAnimation) to the view. Here is a sample code I wrote :

- (CAAnimation*)getShakeAnimation {

    CABasicAnimation *animation;
    CATransform3D transform;

    // Create the rotation matrix
    transform = CATransform3DMakeRotation(0.08, 0, 0, 1.0);

    // Create a basic animation to animate the layer's transform
    animation = [CABasicAnimation animationWithKeyPath:@"transform"];

    // Assign the transform as the animation's value
    animation.toValue = [NSValue valueWithCATransform3D:transform];

    animation.autoreverses = YES;  
    animation.duration = 0.1;  
    animation.repeatCount = HUGE_VALF;  

    return animation;

}

And you should try to apply this one to your layer (with function : addAnimation). Here, autoreverses property is to alternate left and right orientation. Try setting others values to the angle and duration.

But in my case I had to add others angles to the CATransform3DMakeRotation method, depending on the initial layer orientation ^^

Good Luck ! Vincent