当前位置: 动力学知识库 > 问答 > 编程问答 >

iphone - Is there an easy way to have animation overshoot its target and then come back?

问题描述:

Is there an easy way to have animation overshoot its target and then come back?

So let's say I would like to scale a circle from 50% to 110% then back to 100%, creating an almost cartoony effect.

I think Flash or some jQuery plugin has something like this built-in as an easing option. Does iOS have anything similar or does it need to be done manually?

网友答案:

You don't have to do it manually. You can do it almost automatically with UIView animation methods.

You can set your target size to 110%, and set the animation to reverse and "repeat". You set the repeat count to 0.58 in this case. That is, do half of a full out and back cycle, then 1/6 of that more.

That's not quite all there is to it. If you just do that, after the animation completes, it would snap back to 110%. So you need to set it back to 100% to keep it at the target position.

Like this:

// make it 50% size initially; maybe you already did that
circleView.transform = CGAffineTransformMakeScale(0.5,0.5);

[UIView animateWithDuration:1.0 / 0.58 // actual duration 1.0s
        animations:^{
            [UIView setAnimationRepeatCount:0.58];
            [UIView setAnimationRepeatAutoreverses:YES];
            circleView.transform = CGAffineTransformMakeScale(1.1,1.1);
        }
        completion:^(BOOL finished){
            circleView.transform = CGAffineTransformIdentity;
        }
]
网友答案:

You'll have to do it manually. Take a look at CAKeyframeAnimation. You can specify different values to use at different points in the animation. Easing is supported by setting the timingFunctions property. The hardest part will be figuring out the right values to get the effect you want.

网友答案:

It's just two animations -- start the second one in a block when the first is complete. The easing options have to do with how they accelerate/decelerate into the animation.

Here's the basic idea

http://objcolumnist.com/2010/09/19/core-animation-using-blocks/

In your code, you would want to start the next animation in the finish block.

分享给朋友:
您可能感兴趣的文章:
随机阅读: