Question

I’m trying to vibrate/shake a UI element, namely a control, as if it were struck, and is resonating. I can use Core Animation to shake it vertically, horizontally or both, by one pixel:

CABasicAnimation* rotationXAnimation;
rotationXAnimation = [CABasicAnimation animationWithKeyPath:@"position.y"];
rotationXAnimation.fromValue = [NSNumber numberWithFloat: ((UIControl *) sender).center.y-1.0 ];
rotationXAnimation.toValue = [NSNumber numberWithFloat: ((UIControl *) sender).center.y+1.0 ];
rotationXAnimation.duration = 0.2;
rotationXAnimation.cumulative = NO; 
rotationXAnimation.repeatCount = 10.0; 
rotationXAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

[((UIControl *) sender).layer addAnimation:rotationXAnimation forKey:@"upDownAnimation"];

Or I can rotate by a small arc back and forth around the z axis (-M_PI * 0.02 and M_PI * 0.02):

CABasicAnimation* rotationAnimation;
rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.fromValue = [NSNumber numberWithFloat: -M_PI * 0.02 ];
rotationAnimation.toValue = [NSNumber numberWithFloat: M_PI * 0.02 ];
rotationAnimation.duration = 0.2;
rotationAnimation.cumulative = NO;  
rotationAnimation.repeatCount = 10.0; 
rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

[((UIControl *) sender).layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];

None of these look that pleasing. Does anyone have some good alternatives? I would especially appreciate cool keyPaths ideas to try.

Thanks!

Update:

The following, where I am contracting and expanding the control, is better, but I’m still looking for other ideas.

CABasicAnimation* scaleAnimation;
scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.fromValue = [NSNumber numberWithFloat: 0.95 ];
scaleAnimation.toValue = [NSNumber numberWithFloat: +1.05 ];
scaleAnimation.duration = 0.1;
scaleAnimation.cumulative = NO; 
scaleAnimation.repeatCount = 10.0; 
scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

[((UIControl *) sender).layer addAnimation:scaleAnimation forKey:@"scaleAnimation"];

Answer 1

I’m shaking one of my Input-Views after a wrong user input using:

- (void)earthquake:(UIView*)itemView
{
    CGFloat t = 2.0;
    CGAffineTransform leftQuake  = CGAffineTransformTranslate(CGAffineTransformIdentity, t, -t);
    CGAffineTransform rightQuake = CGAffineTransformTranslate(CGAffineTransformIdentity, -t, t);

    itemView.transform = leftQuake;  // starting point

    [UIView beginAnimations:@"earthquake" context:itemView];
    [UIView setAnimationRepeatAutoreverses:YES]; // important
    [UIView setAnimationRepeatCount:4];
    [UIView setAnimationDuration:0.07];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationDidStopSelector:@selector(earthquakeEnded:finished:context:)];

    itemView.transform = rightQuake; // end here & auto-reverse

    [UIView commitAnimations];
}

- (void)earthquakeEnded:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context 
{
    if ([finished boolValue]) 
    {
        UIView* item = (UIView *)context;
        item.transform = CGAffineTransformIdentity;
    }
}

This looks quite natural, I got this code from some internet-thread that I can’t remember.