动画组

动画组

CABasicAnimation和CAKeyframeAnimation仅仅作用于单独的属性，而CAAnimationGroup可以把这些动画组合在一起。CAAnimationGroup是另一个继承于CAAnimation的子类，它添加了一个animations数组的属性，用来组合别的动画。我们把清单8.6那种关键帧动画和调整图层背景色的基础动画组合起来（清单8.10），结果如图8.3所示。

清单8.10 组合关键帧动画和基础动画

  1. - (void)viewDidLoad
  2. {
  3.     [super viewDidLoad];
  4.     //create a path
  5.     UIBezierPath *bezierPath = [[UIBezierPath alloc] init];
  6.     [bezierPath moveToPoint:CGPointMake(0, 150)];
  7.     [bezierPath addCurveToPoint:CGPointMake(300, 150) controlPoint1:CGPointMake(75, 0) controlPoint2:CGPointMake(225, 300)];
  8.     //draw the path using a CAShapeLayer
  9.     CAShapeLayer *pathLayer = [CAShapeLayer layer];
  10.     pathLayer.path = bezierPath.CGPath;
  11.     pathLayer.fillColor = [UIColor clearColor].CGColor;
  12.     pathLayer.strokeColor = [UIColor redColor].CGColor;
  13.     pathLayer.lineWidth = 3.0f;
  14.     [self.containerView.layer addSublayer:pathLayer];
  15.     //add a colored layer
  16.     CALayer *colorLayer = [CALayer layer];
  17.     colorLayer.frame = CGRectMake(0, 0, 64, 64);
  18.     colorLayer.position = CGPointMake(0, 150);
  19.     colorLayer.backgroundColor = [UIColor greenColor].CGColor;
  20.     [self.containerView.layer addSublayer:colorLayer];
  21.     //create the position animation
  22.     CAKeyframeAnimation *animation1 = [CAKeyframeAnimation animation];
  23.     animation1.keyPath = @"position";
  24.     animation1.path = bezierPath.CGPath;
  25.     animation1.rotationMode = kCAAnimationRotateAuto;
  26.     //create the color animation
  27.     CABasicAnimation *animation2 = [CABasicAnimation animation];
  28.     animation2.keyPath = @"backgroundColor";
  29.     animation2.toValue = (__bridge id)[UIColor redColor].CGColor;
  30.     //create group animation
  31.     CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
  32.     groupAnimation.animations = @[animation1, animation2]; 
  33.     groupAnimation.duration = 4.0;
  34.     //add the animation to the color layer
  35.     [colorLayer addAnimation:groupAnimation forKey:nil];
  36. }

图8.3

图8.3 关键帧路径和基础动画的组合