Question

我想制作一个弹性弹出动画（在iPhone手机谷歌地图应用中，有点像弹出窗口）

有没有人知道制作弹性动画的数学公式是什么样的？我试过但想不出配方或怎么做。

以下是我的想法:(一个控件或什么东西）开始成长，更快，更快，当它达到正确的尺寸时它会停止生长但是会弹性摆动，然后停止。

任何想法，建议，都不一定要那样。非常感谢！

Answer 1

这是你看到的一个pop-in动画，虽然我还没有完全复制它。我使用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"];

其中POPINOVERSHOOTPERCENTAGE约为0.1。

这会放大一个图层（可能是UIView的背衬图层），按百分比超调，减少和下冲一点，然后以最终尺寸结束。

它与谷歌地图注释的作用接近，但并不完全相同。我想对时间进行一些微调可能就是这样。

Answer 2

使用核心动画很容易实现这一点，并且不需要数学 - 好吧，除了添加，减法或除法以确定位置的大小之外没什么。

你可以创建一个CAKeyFrameAnimation，将大小从0（或其他）增加到比它应该大的大小，然后缩小到比它应该大的小，然后最终缩放到它的大小预期的大小。

这将为您提供放大，缩小和实际尺寸效果。

弹性动画 - 背后的数学

2 个答案: