为翻转动画添加反弹效果

时间:2015-05-07 18:59:40

标签: ios objective-c animation cabasicanimation

我为一张饼图制作了动画片。这是我的代码"

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:中的动画)

1 个答案:

答案 0 :(得分:2)

使用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];

使用keyTimesvalues,您可以在动画中指定多个姿势。在这里,我以1的比例开始,动画为0.5(你的第一个动画值),然后是1.1(过冲以创建"反弹"),最后是1(你的第二个动画值) )。根据自己的喜好调整那些!

如果你想分两部分制作这个动画,你可以保留你的第一个动画,然后在CAKeyFrameAnimation中开始animationDidStop:finished:代替这个:{/ p>

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

您可能希望使用参数来调整动画。