为翻转动画添加弹跳效果

Question

我为已有的饼图设置了翻转动画。这是我的代码

CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.x"];
scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
scaleAnimation.toValue = [NSNumber numberWithFloat:0.5];
scaleAnimation.duration = 1.0f;
scaleAnimation.removedOnCompletion = NO;
[self.pieChart addAnimation:scaleAnimation forKey:@"scale"];

animationDidStop:finished:

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale.x"];
animation.fromValue = [NSNumber numberWithFloat:0.5];
animation.toValue = [NSNumber numberWithFloat:1.0];
animation.duration = 1.0f;
[self.pieChart addAnimation:animation forKey:@"scale"];

如何给第二个动画添加弹跳效果？（animationDidStop:finished:中的动画）

Answer 1

使用一个 CAKeyFrameAnimation 而不是两个 CABasicAnimation:

CAKeyframeAnimation *scaleAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale.x"];
scaleAnimation.keyTimes = @[@(0), @(0.5), @(0.9), @(1)];
scaleAnimation.values = @[@(1.0), @(0.5), @(1.1), @(1.0)];
scaleAnimation.duration = 1.0f;
scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

使用 keyTimes 和 values，您可以在动画中指定多个姿势。在这里，我让它从 1 的比例开始，动画到 0.5 的比例（你的第一个动画值），然后是 1.1（创建 "bounce" 的超调），最后是 1（你的第二个动画值）。根据您的喜好调整它们！

如果你想分两部分做这个动画，你可以保留你的第一个动画，然后在 animationDidStop:finished: 中开始一个 CAKeyFrameAnimation 类似于这样：

CAKeyframeAnimation *scaleAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale.x"];
scaleAnimation.keyTimes = @[@(0), @(0.8), @(1)];
scaleAnimation.values = @[@(0.5), @(1.1), @(1.0)];
scaleAnimation.duration = 1.0f;
scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

如果您想使用 UIView 动画块，则需要执行类似以下操作：

[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseIn animations:^{
    self.squareView.transform = CGAffineTransformMakeScale(0.5, 1);
} completion:^(BOOL finished) {
    [UIView animateWithDuration:1 delay:0 usingSpringWithDamping:0.6 initialSpringVelocity:0 options:0 animations:^{
        self.squareView.transform = CGAffineTransformIdentity;
    } completion:nil];
}];

您可能想要使用参数来调整动画。

为翻转动画添加弹跳效果

Add a bounce effect to a flip animation

animation

objective-c

cabasicanimation

ios