弹性动画 - 背后的数学

Question

我想做一个弹性的弹出动画(在iPhone的谷歌地图应用程序,有点像弹出窗口)

有没有人知道制作弹性动画的数学公式是什么样的？我试过但想不出配方或如何做到这一点.

下面是什么我想到:(控制,或某事)开始越来越大,快,快,当它到达它停止增长,但周围晃大小合适,弹性,然后停止.

任何想法,建议,它不一定是那种方式.非常感谢!

Answer 1

虽然我还没有完全复制它,但它是你看到的一种流行动画.我使用CAKeyframeAnimation得到的最接近的是:

CAKeyframeAnimation *boundsOvershootAnimation = [CAKeyframeAnimation animationWithKeyPath:@"bounds.size"];
CGSize startingSize = CGSizeZero;
CGSize overshootSize = CGSizeMake(targetSize.width * (1.0f + POPINOVERSHOOTPERCENTAGE), targetSize.height * (1.0f + POPINOVERSHOOTPERCENTAGE));
CGSize undershootSize = CGSizeMake(targetSize.width * (1.0f - POPINOVERSHOOTPERCENTAGE), targetSize.height * (1.0f - POPINOVERSHOOTPERCENTAGE));
NSArray *boundsValues = [NSArray arrayWithObjects:[NSValue valueWithCGSize:startingSize],
                         [NSValue valueWithCGSize:overshootSize],
                         [NSValue valueWithCGSize:undershootSize],
                         [NSValue valueWithCGSize:targetSize], nil];
[boundsOvershootAnimation setValues:boundsValues];

NSArray *times = [NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0f],
                  [NSNumber numberWithFloat:0.5f],
                  [NSNumber numberWithFloat:0.9f],
                  [NSNumber numberWithFloat:1.0f], nil];    
[boundsOvershootAnimation setKeyTimes:times];


NSArray *timingFunctions = [NSArray arrayWithObjects:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut], 
                            [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
                            [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
                            nil];
[boundsOvershootAnimation setTimingFunctions:timingFunctions];
boundsOvershootAnimation.fillMode = kCAFillModeForwards;
boundsOvershootAnimation.removedOnCompletion = NO;

[layer addAnimation:boundsOvershootAnimation forKey:@"boundsOvershoot"];

在POPINOVERSHOOTPERCENTAGE0.1左右.

这会放大一个图层(可能是UIView的背衬图层),超过百分比,减少和下冲一点,然后以最终尺寸结束.

它与谷歌地图注释的作用接近,但并不完全相同.我认为对时间进行一些微调可能会做到这一点.