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"];
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With