Эластичная анимация - математика, стоящая за ней

Question

Я хочу сделать эластичную всплывающую анимацию (в приложении iphone google maps, вроде как всплывающее окно)

Кто-нибудь имеет представление о том, как математическая формула будет выглядеть для создания эластичной анимации? Я пытался, но не мог придумать формулу или как это сделать.

Вот что я имел в виду: (элемент управления или что-то) начинает расти, быстрее, быстрее, когда он достигает нужного размера, он прекращает расти, но шевелится вокруг, упруго, затем останавливается.

Любые идеи, предложения, это не обязательно должно быть именно так. Большое спасибо!

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

, где POPINOVERSHOOTPERCENTAGE составляет около 0,1.

Это увеличивает слой (который может быть поддержкой UIViewслой), отклоняется на процент, уменьшается и немного отклоняется, а затем заканчивается в конечном размере.

Это близко к тому, что делают аннотации карты Google, но не совсем то же самое.Я думаю, что несколько небольших изменений в сроках, вероятно, сделают это.

Answer 2

Это было бы легко сделать с помощью Core Animation, и математика не требовалась - ну, ничего кроме сложения, вычитания или деления для определения размера позиции.

Вы можете создать CAKeyFrameAnimation, который увеличит размер с 0 (или любого другого) до размера, несколько большего, чем должен быть, затем уменьшится до большего, чем должно быть, и, наконец, уменьшится до предполагаемого размера .

Это даст вам увеличение, уменьшение и эффект фактического размера.