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

问题描述

我要摇晃的图像在我的应用类似，来回iPhone图标如何摇晃时preSS下来就可以了。什么是做到这一点的最好办法？

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（不工作），我的code：

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

或者，有可能是一个完全简单的解决方案，我只是失踪。鸭preciate任何指针。谢谢！

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

推荐答案

简单的方法来做到这一点：

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.

编辑：我编辑添加code完成后把后面的项目在其原始状态的响应。另请注意，您可以使用 beginAnimations 上下文值沿东西传递给启动/停止的方法。在这种情况下，它是摆动对象本身所以不必依赖于特定实例变量和可用于任何通用基础的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屋！