如何创建iphone的摆动图标效果? [英] how to create iphone's wobbling icon effect?

问题描述

我想在我的应用程序中来回摆动图像，类似于按下时 iPhone 图标的摆动方式.最好的方法是什么?

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?

这是我第一次尝试不使用动画 GIF 的动画.我认为这个想法是来回稍微旋转图像以创建摆动效果.我看过使用 CABasicAnimation 和 CAKeyframeAnimation.CABasicAnimation 每次重复时都会产生抖动，因为它会跳到起始位置并且不会向后插入.CAKeyframeAnimation 似乎是解决方案，只是我无法让它工作.我肯定错过了什么.这是我使用 CAKeyframeAnimation 的代码(不起作用):

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!

推荐答案

简单的方法:

#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.

我编辑了响应以添加代码以在完成后将项目恢复到原始状态.另请注意，您可以使用 beginAnimations 上下文值将任何内容传递给 start/stop 方法.在这种情况下，它是摆动对象本身，因此您不必依赖特定的 ivars，并且该方法可用于任何基于 UIView 的通用对象(即文本标签、图像等)

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.)

这篇关于如何创建iphone的摆动图标效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！