CAAnimationGroup

通过一个简单的例子来体验一下动画组，先看下demo效果：

waveSpreadDemo.gif

---

仔细分析以上动画，发现有好多同心圆在不断的扩大，同时颜色在变浅；

• 抓住关键的两点：
  1. 圆不断的扩大
2. 圆的颜色变浅

所以，至少要使用到两个动画并且同时添加在动画组里面

1.圆不断的扩大（缩放效果、transform.scale）：

{
// 可以使用核心动画CABasicAnimation中的缩放效果，设置一个初始值和一个结束值
    CABasicAnimation * basicAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    basicAnimation.fromValue = @0.5;
    basicAnimation.toValue = @3.0;
}

2.圆的颜色变化（颜色透明度变化、opacity）：

{
// 可以使用核心动画CAKeyframeAnimation设置一组初始值和一组结束值，来达到更好的渐变效果
// 每一个values里面的元素变化值对应一个变化时间keyTimes里面的时间值
    CAKeyframeAnimation * keyanimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
    keyanimation.values   = @[@1, @1.9, @0.8, @0.7, @0.6, @0.5, @0.4, @0.3, @0.2, @0.1, @0.0];
    keyanimation.keyTimes = @[@0, @0.1, @0.2, @0.3, @0.4, @0.5, @0.6, @0.7, @0.8, @0.9, @1];
}

3.准备好了这两个动画之后，然后把这两个动画添加到动画组里面去

{
    CAMediaTimingFunction * defaultCurve = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
// 初始化一个动画组
    CAAnimationGroup * grounpAnimation = [CAAnimationGroup animation];
// 设置相关属性
    grounpAnimation.fillMode = kCAFillModeForwards;
// 设置动画开始时间
    grounpAnimation.beginTime = CACurrentMediaTime();
// 设置动画持续时间
    grounpAnimation.duration = 3;
    grounpAnimation.repeatCount = HUGE_VAL;
    grounpAnimation.timingFunction = defaultCurve;
    grounpAnimation.removedOnCompletion = NO;
// 添加刚才已经准备好的两个动画
    grounpAnimation.animations = @[basicAnimation, keyanimation];
}

4.将动画组添加到layer中去（准备好一个layer）

{
    CALayer * layer = [CALayer layer];
    layer.backgroundColor = [UIColor orangeColor].CGColor;
// layer的位置设置
    layer.frame = CGRectMake(width * 0.3, height * 0.3, width * 0.4, width * 0.4);
    layer.borderColor = [UIColor orangeColor].CGColor;
    layer.borderWidth = 1.0f;
// 关键点之一，切圆角，如果不切，将看到的是一个矩形在变化
    layer.cornerRadius = width * 0.4 * 0.5f;
    layer.opacity = 0.0f;
// 将动画组添加带layer中
    [layer addAnimation:grounpAnimation forKey:@"layer"];
}

5.将动画效果显示出来

// 只有将layer添加到一个可见视图中的layer中去才能看到动画效果
{
    [self.view.layer addSublayer:layer];
}

接下来看下效果怎么样

QQ20190212-154139-HD.2019-02-12 15_46_05.gif

看到这种效果，可以说成功了一大半，其实接下来要实现的和动画没什么太大的关系；
实现这种效果的思路就是循环添加多个layer（每个layer都添加了动画组）

{
    CGFloat width = self.view.frame.size.width;
    CGFloat height = self.view.frame.size.height;
    
    NSInteger count = 5;
    double duration = 5;

    CALayer * animationLayer = [CALayer layer];
    animationLayer.frame = CGRectMake(width * 0.3, height * 0.3, width * 0.4, height * 0.4);
    for (int i = 0; i < count; ++ i) {
        
        // 动画之一 scale 大小变化
        CABasicAnimation * basicAnimation = [CABasicAnimation animationWithKeyPath:kKeyPath];
        basicAnimation.fromValue = @0.5;
        basicAnimation.toValue = @8.0;
        // 动画之一 opacity 透明度变化
        CAKeyframeAnimation * keyanimation = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
        keyanimation.values   = @[@1, @1.9, @0.8, @0.7, @0.6, @0.5, @0.4, @0.3, @0.2, @0.1, @0.0];
        keyanimation.keyTimes = @[@0, @0.1, @0.2, @0.3, @0.4, @0.5, @0.6, @0.7, @0.8, @0.9, @1];
        
        CAMediaTimingFunction * defaultCurve = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
        
        CAAnimationGroup * grounpAnimation = [CAAnimationGroup animation];
        grounpAnimation.fillMode = kCAFillModeForwards;
        // 设置时间间隔，动画开始时间不能相同，要不然全部重叠
        grounpAnimation.beginTime = CACurrentMediaTime() + (double)i * duration / (double)count;
        grounpAnimation.duration = duration;// 设置动画持续时间
        grounpAnimation.repeatCount = HUGE_VAL;
        grounpAnimation.timingFunction = defaultCurve;
        grounpAnimation.removedOnCompletion = NO;
        grounpAnimation.animations = @[basicAnimation, keyanimation];
        
        CALayer * layer = [CALayer layer];
        layer.backgroundColor = [self getColor].CGColor;
        layer.frame = CGRectMake(0, 0, width * 0.4, height * 0.4);
        layer.borderColor = [UIColor orangeColor].CGColor;
        layer.borderWidth = 1.0f;
        layer.cornerRadius = height * 0.2f;
        layer.opacity = 0.0f;
        [layer addAnimation:grounpAnimation forKey:@"layer"];
        [animationLayer addSublayer:layer]; //layer叠加
    }
    [self.view.layer addSublayer:animationLayer];
    self.view.layer.masksToBounds = NO;
    self.view.layer.backgroundColor = [UIColor whiteColor].CGColor;
}

到此就能实现最上面那个图的效果了。

附上demo代码链接：https://github.com/ClassStudent/MWaveSpreadDemo.git