Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to create iphone's wobbling icon effect?

I want to wobble an image back and forth in my application similar to how the iPhone icons wobble when you press down on it. What's the best way to do that?

This is my first foray into animations that's not using an animated GIF. I think the idea is to slightly rotate the image back and forth to create the wobbling effect. I've looked at using CABasicAnimation and CAKeyframeAnimation. CABasicAnimation creates a jitter every time it repeats because it jumps to the from position and doesn't interpolate back. CAKeyframeAnimation seems like the solution except that I can't get it to work. I must be missing something. Here's my code using the CAKeyframeAnimation (which doesn't work):

    NSString *keypath = @"wobbleImage"; CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:keypath]; animation.duration = 1.0f; animation.delegate = self; animation.repeatCount = 5;  CGFloat wobbleAngle = 0.0872664626f; NSValue *initial = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(0.0f, 0.0f, 0.0f, 1.0f)]; NSValue *middle = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(wobbleAngle, 0.0f, 0.0f, 1.0f)]; NSValue *final = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(-wobbleAngle, 0.0f, 0.0f, 1.0f)]; animation.values = [NSArray arrayWithObjects:initial, middle, final, nil];  [imageView.layer addAnimation:animation forKey:keypath]; 


Or there could be a totally simpler solution that I'm just missing. Appreciate any pointers. Thanks!

like image 438
jeanniey Avatar asked May 30 '09 08:05

jeanniey


People also ask

How do I make my icons jiggle on iPhone?

Press the Digital Crown (the knob on the side), then tap and hold any app icon until the apps begin to jiggle. After that you can hold and drag any app icon to a new location. When you're done, press the Digital Crown again.


2 Answers

Simple way to do it:

#define RADIANS(degrees) (((degrees) * M_PI) / 180.0)  CGAffineTransform leftWobble = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(-5.0)); CGAffineTransform rightWobble = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(5.0));  itemView.transform = leftWobble;  // starting point  [UIView beginAnimations:@"wobble" context:itemView]; [UIView setAnimationRepeatAutoreverses:YES]; // important [UIView setAnimationRepeatCount:10]; [UIView setAnimationDuration:0.25]; [UIView setAnimationDelegate:self]; [UIView setAnimationDidStopSelector:@selector(wobbleEnded:finished:context:)];  itemView.transform = rightWobble; // end here & auto-reverse  [UIView commitAnimations];  ...  - (void) wobbleEnded:(NSString *)animationID finished:(NSNumber *)finished context:(void *)context  {      if ([finished boolValue]) {         UIView* item = (UIView *)context;         item.transform = CGAffineTransformIdentity;      } } 

Probably have to play with timing and angles but this should get you started.

EDIT: I edited the response to add code to put the item back in its original state when done. Also, note that you can use the beginAnimations context value to pass along anything to the start/stop methods. In this case it's the wobbling object itself so you don't have to rely on specific ivars and the method can be used for any generic UIView-based object (i.e. text labels, images, etc.)

like image 136
Ramin Avatar answered Sep 21 '22 08:09

Ramin


Ramin's answer was very good, but since OS4 the same effect can be achieved using animateWithDuration in one simple function too.

(adapted his example for future googlers)

#define RADIANS(degrees) (((degrees) * M_PI) / 180.0)  - (void)startWobble {  itemView.transform = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(-5));   [UIView animateWithDuration:0.25        delay:0.0        options:(UIViewAnimationOptionAllowUserInteraction | UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse)       animations:^ {        itemView.transform = CGAffineTransformRotate(CGAffineTransformIdentity, RADIANS(5));       }       completion:NULL  ]; }  - (void)stopWobble {  [UIView animateWithDuration:0.25       delay:0.0        options:(UIViewAnimationOptionAllowUserInteraction | UIViewAnimationOptionBeginFromCurrentState | UIViewAnimationOptionCurveLinear)       animations:^ {        itemView.transform = CGAffineTransformIdentity;       }       completion:NULL   ]; } 
like image 21
Pieter Avatar answered Sep 19 '22 08:09

Pieter