如何创建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];

}