Core Animation 叠加

之前做过一些游戏，现在的游戏引擎基本都支持多个动画同时播放。

看了一下core animation，也是支持多个动画同时播放的。其实也是很简单，就是多次调用CALayer的addAnimation函数。

比如代码：

    CALayer *sublayer =[CALayer layer];
    sublayer.backgroundColor =[UIColor orangeColor].CGColor;
    sublayer.shadowOffset = CGSizeMake(0, 3);
    sublayer.shadowRadius =5.0;
    sublayer.shadowColor =[UIColor blackColor].CGColor;
    sublayer.shadowOpacity = 1;
    
    sublayer.borderColor =[UIColor blackColor].CGColor;
    sublayer.borderWidth =2.0;
    sublayer.cornerRadius =10.0;
    sublayer.anchorPoint = CGPointMake(0, 0);
    [self.view.layer addSublayer:sublayer];

    CGImageRef img = [UIImage imageNamed:@"Image"].CGImage;
    sublayer.contents = (__bridge id)img;
    sublayer.frame = CGRectMake(180, 60, CGImageGetWidth(img), CGImageGetWidth(img));
    
    
    CGPoint fromPoint = sublayer.frame.origin;
    
    //路径曲线
    UIBezierPath *movePath = [UIBezierPath bezierPath];
    [movePath moveToPoint:fromPoint];
    CGPoint toPoint = CGPointMake(30, 460);
    [movePath addQuadCurveToPoint:toPoint
                     controlPoint:CGPointMake(300,0)];

    
    //关键帧
    CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    moveAnim.path = movePath.CGPath;
    moveAnim.removedOnCompletion = YES;
    moveAnim.duration = 3;
    
    //旋转变化
    CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
    scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
    //x，y轴缩小到0.1,Z 轴不变
    scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];
    scaleAnim.removedOnCompletion = YES;
    scaleAnim.duration = 5;
    
    //透明度变化
    CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@"alpha"];
    opacityAnim.fromValue = [NSNumber numberWithFloat:1.0];
    opacityAnim.toValue = [NSNumber numberWithFloat:0.1];
    opacityAnim.removedOnCompletion = YES;
    
    [sublayer addAnimation:moveAnim forKey:nil];
    [sublayer addAnimation:scaleAnim forKey:nil];

上面的代码创建了3个动画实例，然后调用2次addAnimation把移动动画和缩放动画放进去。

运行一下，就会发现这两个动画同时起作用了。只是一个使用了3秒，一个使用了5秒才完成。

另外框架还提供了一个类，CAAnimationGroup。

定义如下：

@interface CAAnimationGroup : CAAnimation

可以看到它是CAAnimation的一个子类。

可以这么使用：

    CALayer *sublayer =[CALayer layer];
    sublayer.backgroundColor =[UIColor orangeColor].CGColor;
    sublayer.shadowOffset = CGSizeMake(0, 3);
    sublayer.shadowRadius =5.0;
    sublayer.shadowColor =[UIColor blackColor].CGColor;
    sublayer.shadowOpacity = 1;
    
    sublayer.borderColor =[UIColor blackColor].CGColor;
    sublayer.borderWidth =2.0;
    sublayer.cornerRadius =10.0;
    sublayer.anchorPoint = CGPointMake(0, 0);
    [self.view.layer addSublayer:sublayer];

    CGImageRef img = [UIImage imageNamed:@"Image"].CGImage;
    sublayer.contents = (__bridge id)img;
    sublayer.frame = CGRectMake(180, 60, CGImageGetWidth(img), CGImageGetWidth(img));
    
    
    CGPoint fromPoint = sublayer.frame.origin;
    
    //路径曲线
    UIBezierPath *movePath = [UIBezierPath bezierPath];
    [movePath moveToPoint:fromPoint];
    CGPoint toPoint = CGPointMake(30, 460);
    [movePath addQuadCurveToPoint:toPoint
                     controlPoint:CGPointMake(300,0)];

    
    //关键帧
    CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    moveAnim.path = movePath.CGPath;
    moveAnim.removedOnCompletion = YES;
    moveAnim.duration = 3;
    
    //旋转变化
    CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"];
    scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
    //x，y轴缩小到0.1,Z 轴不变
    scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];
    scaleAnim.removedOnCompletion = YES;
    scaleAnim.duration = 5;
    
    //透明度变化
    CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@"alpha"];
    opacityAnim.fromValue = [NSNumber numberWithFloat:1.0];
    opacityAnim.toValue = [NSNumber numberWithFloat:0.1];
    opacityAnim.removedOnCompletion = YES;
    
//    [sublayer addAnimation:moveAnim forKey:nil];
//    [sublayer addAnimation:scaleAnim forKey:nil];

    
    //关键帧，旋转，透明度组合起来执行
    CAAnimationGroup *animGroup = [CAAnimationGroup animation];
    animGroup.animations = [NSArray arrayWithObjects:moveAnim, scaleAnim,opacityAnim, nil];
    animGroup.duration = 1;
    [sublayer addAnimation:animGroup forKey:nil];

看最后的4行代码，也就是创建一个CAAnimationGroup对象，把3个动画放进去，然后调用CALayer的addAnimation函数，把创建的CAAnimationGroup传进去就可以了。

有个细节需要注意，CAAnimation有个属性duration，我们这里设置了1， 实际上前面2个动画的时间是3和5.那么使用CAAnimationGroup的话，就会只执行1秒。这个和多次调用addAnimation有点不太一样，需要注意。

这个文档上写的很清楚：

到这里为止，我们知道同时播放多个动画有2种方式：

1. 多次调用addAnimation函数

2. 使用CAAnimationGroup

那么有个问题，有没有一种办法可以让2个动画先后执行呢，也就是执行完一个动画后，接着再执行另外一个动画。

肯定是有办法的，后面介绍。