如何创建iPhone的摆动图标效果？

Question

我想在应用程序中来回摆动图像，就像按下时在iPhone图标上摆动一样。最好的方法是什么？

这是我首次尝试不使用动画GIF的动画。我认为该方法是稍微前后旋转图像以产生摆动效果。我看过使用CABasicAnimation和CAKeyframeAnimation。CABasicAnimation每次重复都会产生一个抖动，因为它跳到起始位置并且不会向内插。CAKeyframeAnimation似乎是解决方案，除了我无法使其正常工作。我肯定错过了什么。这是我使用CAKeyframeAnimation的代码（不起作用）：

    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];

或可能有一个我不曾想到的完全简单的解决方案。感谢任何指针。谢谢！

Answer 1

简单的方法：#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;     }}可能必须考虑时间和角度，但这应该可以帮助您入门。编辑：我编辑了响应以添加代码，以在完成后将项目恢复为原始状态。另外，请注意，您可以使用beginAnimations上下文值将任何内容传递给start / stop方法。在这种情况下，它是摆动对象本身，因此您不必依赖特定的ivars，并且该方法可用于任何基于UIView的通用对象（即文本标签，图像等）。

Answer 2

Ramin的回答非常好，但是由于OS4使用一个简单函数animateWithDuration也可以实现相同的效果。（使他的榜样适合未来的Google员工）#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  ];}

Answer 3

您应该CAKeyframeAnimation用来制作更平滑的动画。+ (void) animationKeyFramed: (CALayer *) layer                    delegate: (id) object              forKey: (NSString *) key {    CAKeyframeAnimation *animation;    animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation.z"];    animation.duration = 0.4;    animation.cumulative = YES;    animation.repeatCount = 2;    animation.values = [NSArray arrayWithObjects:            [NSNumber numberWithFloat: 0.0],             [NSNumber numberWithFloat: RADIANS(-9.0)],             [NSNumber numberWithFloat: 0.0],            [NSNumber numberWithFloat: RADIANS(9.0)],            [NSNumber numberWithFloat: 0.0], nil];    animation.fillMode = kCAFillModeForwards;    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];    animation.removedOnCompletion = NO;    animation.delegate = object;    [layer addAnimation:animation forKey:key];}