CAReplicatorLayer 学习和实践

介绍

CAReplicatorLayer的目的是为了高效生成许多相似的图层。它会绘制一个或多个图层的子图层，并在每个复制体上应用不同的变换。只要脑洞足够大，效果就足够炫。

实践

在本期的demo中，我一共实现了5个效果。

1.音乐震动条

思路
1. 用CALayer创建一个矩形条，作为base
2. 用CAReplicatorLayer复制baseLayer。
3. 设置动画，让他们长短发生变化。也许应该是：transform.scale.y。

- (void)musicLayer
{
    //背景layer，无实在意义。仅用作多页面显示不同区域。
    CALayer *_musicLayer = [CALayer layer];
    _musicLayer.frame = CGRectMake(0, 64, LAYER_WIDTH, LAYER_WIDTH);
    _musicLayer.backgroundColor = [UIColor lightGrayColor].CGColor;
    [self.view.layer addSublayer:_musicLayer];

    //创建一个小长方形
    CALayer *baseLayer = [CALayer layer];
    baseLayer.frame = CGRectMake(0, 0, 20, 100);
    baseLayer.backgroundColor = [UIColor redColor].CGColor;
    baseLayer.cornerRadius = 5;
    baseLayer.anchorPoint = CGPointMake(0, 1);
    baseLayer.position = CGPointMake(10, CGRectGetWidth(_musicLayer.bounds));

    //创建复制layer
    CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
    replicatorLayer.instanceCount = 5;  //复制5个
    replicatorLayer.instanceTransform = CATransform3DMakeTranslation(40, 0, 0); //复制的时候产生位移40
    replicatorLayer.instanceDelay = 0.1;    //复制时延迟时间
    replicatorLayer.instanceRedOffset -= 0.1;
    [replicatorLayer addSublayer:baseLayer];
    [_musicLayer addSublayer:replicatorLayer];

    //animation
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale.y"];
    animation.duration = 1;
    animation.values = @[@1,@0.5,@0];
    animation.repeatCount = HUGE;
    animation.autoreverses = YES;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    [baseLayer addAnimation:animation forKey:nil];
}

代码很简单，也不复杂。不过需要注意的是：我尝试了很多动画方法。想能用CABasicAnimation尽量就不用CAKeyframeAnimation。不过最后以失败告终。不知道是真的不行，还是技术不行。有大神知道为什么请麻烦告诉一下。学习学习。

2.三角形移动的等待指示器

思路
1. 用CALayer创建一个圆形，作为base
2. 用CAReplicatorLayer复制3个baseLayer。
3. 设置动画，让他们发生位移变化。会改变什么属性呢？我们先猜一猜。

- (void)trilateralLayer
{
    CALayer *_trilateralLayer = [CALayer layer];
    _trilateralLayer.frame = CGRectMake(LAYER_WIDTH, 64, LAYER_WIDTH, LAYER_WIDTH);
    _trilateralLayer.backgroundColor = [UIColor orangeColor].CGColor;
    [self.view.layer addSublayer:_trilateralLayer];

    //老规矩，创建一个圆形的baseLayer
    CGFloat radius                     = 100/4.0;
    CGFloat transX                     = 100 - radius;
    CAShapeLayer *baseLayer = [CAShapeLayer layer];
    baseLayer.frame = CGRectMake(0, 0, radius, radius);
    baseLayer.fillColor = [UIColor greenColor].CGColor;
    baseLayer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, radius, radius)].CGPath;


    /*        创建克隆层         */
    CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
    replicatorLayer.frame              = CGRectMake(0, 0, radius, radius);
    replicatorLayer.instanceDelay      = 0.0;   //因为不需要一个一个展现，所以延迟设置成0
    replicatorLayer.instanceCount      = 3;
    //这里面要设置复制的layer的变换了。先向右移动一定像素，再顺时针移动一定角度。这里有个点，至少我当时不是很明白，就是为什么这么设置就会闭合成一个三角形。那么当你弄三只小木棍模拟一下这个动画变换过程，你就会发现其中的道理了。
    CATransform3D trans3D              = CATransform3DIdentity;
    trans3D                            = CATransform3DTranslate(trans3D, transX, 0, 0);
    trans3D                            = CATransform3DRotate(trans3D, 120.0*M_PI/180.0, 0.0, 0.0, 1.0);
    replicatorLayer.instanceTransform  = trans3D;
    [replicatorLayer addSublayer:baseLayer];
    [_trilateralLayer addSublayer:replicatorLayer];

    //这个动画就很简单了，仅仅是改变了位置。
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
    animation.duration = 1;
    animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeTranslation(0, 0, 0)];
    animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeTranslation(transX ,0, 0)];
    animation.repeatCount = HUGE;
    animation.autoreverses = NO;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    [baseLayer addAnimation:animation forKey:nil];
}

这个动画我实现了很久，总是达不到预期的效果。最后还是看了教程照猫画虎才实现的。不过明白了一些就是：layer的大小，以及运动的距离，都会影响动画的效果。所以动画需要计算来设计。

3.正方形移动的等待指示器

思路
1. 用CALayer创建一个圆形，作为base
2. 用CAReplicatorLayer横向复制5个baseLayer，然后把CAReplicatorLayer作为baseLayer再纵向复制5个。这样就有了一个正方形
3. 设置动画，让他们由大变小。

- (void)rectLayer
{
    CALayer *_rectLayer = [CALayer layer];
    _rectLayer.frame = CGRectMake(0, 64 + LAYER_WIDTH, LAYER_WIDTH, LAYER_WIDTH);
    _rectLayer.backgroundColor = [UIColor orangeColor].CGColor;
    [self.view.layer addSublayer:_rectLayer];

    CGFloat radius                     = 50/4.0;
    CGFloat transX                     = radius + 5;
    CAShapeLayer *baseLayer = [CAShapeLayer layer];
    baseLayer.frame = CGRectMake(30, 30, radius, radius);
    baseLayer.fillColor = [UIColor redColor].CGColor;
    baseLayer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, radius, radius)].CGPath;

    //横向创建5个圆形baseLayer
    CAReplicatorLayer *replicator1 = [CAReplicatorLayer layer];
    replicator1.instanceCount = 5;
    replicator1.instanceTransform = CATransform3DMakeTranslation(transX, 0, 0);
    replicator1.instanceDelay = 0.3; //这个属性很重要，设置延迟时间才会出现逐个变化的效果
    [replicator1 addSublayer:baseLayer];

    //将上面创建的replicator1 作为子视图在纵向创建5个，形成一个正方形。
    CAReplicatorLayer *replicator2 = [CAReplicatorLayer layer];
    replicator2.instanceCount = 5;
    replicator2.instanceTransform = CATransform3DMakeTranslation(0, transX, 0);
    replicator2.instanceDelay = 0.3;
    [replicator2 addSublayer:replicator1];
    [_rectLayer addSublayer:replicator2];

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
    animation.duration = 1;
    animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 0)];
    animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.2, 0.2, 0)];
    animation.repeatCount = HUGE;
    animation.autoreverses = YES; //autoreverses需要注意，他的意思是动画结束时执行逆动画
    [baseLayer addAnimation:animation forKey:nil];
}

这个动画唯一需要注意的地方就是instanceDelay属性。

4.圆形移动的等待指示器

思路
1. 用CALayer创建一个圆形，作为base，并设置他围绕中心点旋转。
2. 用CAReplicatorLayer横向复制10个baseLayer，并设置为圆形。
3. 设置动画，让他们由大变小。你们的思路跟我一样了么？

- (void)progressLayer
{
    CALayer *_progressLayer = [CALayer layer];
    _progressLayer.frame = CGRectMake(0, 64 + LAYER_WIDTH * 2, LAYER_WIDTH, LAYER_WIDTH);
    _progressLayer.backgroundColor = [UIColor lightGrayColor].CGColor;
    [self.view.layer addSublayer:_progressLayer];

    CAReplicatorLayer *replicator = [CAReplicatorLayer layer];
    replicator.frame = _progressLayer.bounds;
    replicator.instanceCount = 10;
    CGFloat angle = 2 * M_PI / 10; //按照一定角度复制
    replicator.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1);
    //1.0 / 10.0 = 0.1
    //1 / 10 = 0
    //如果这个没想好，没设置对，那么他就不会出现渐渐变大的效果，该问题我用了10多个小时才找出来。
    replicator.instanceDelay = 1.0 / 10.0;  //血的教训，整型和浮点型的重要性
    [_progressLayer addSublayer:replicator];

    CGFloat radius = 20;
    CAShapeLayer *baseLayer = [CAShapeLayer layer];
    baseLayer.frame = CGRectMake(50, 50, radius, radius);
    baseLayer.fillColor = [UIColor redColor].CGColor;
    baseLayer.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, radius, radius)].CGPath;
    baseLayer.transform = CATransform3DMakeScale(0.01, 0.01, 0.01); //先缩小，达到由小变大的效果
    [replicator addSublayer:baseLayer];

    //到目前为止，baseLayer已经按照一定角度排布好，然后每个baseLayer都会围绕中心点转动。那么唯一需要我们做的就是改变他们的大小
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    animation.duration = 1;
    animation.fromValue = @1;
    animation.toValue = @0.1;
    animation.repeatCount = HUGE;
    [baseLayer addAnimation:animation forKey:nil];
}

这个动画也不难，唯一需要注意的就是属性的类型。切记切记。

5.倒影的实现

思路
1. 创建一个CALayer，并设置他的contents属性，显示图片。作为base。当然你也可以使用UIImageView。个人喜好吧。
2. 用CAReplicatorLayer横向复制2个baseLayer。将复制的图层沿着x轴翻转。就能实现倒影效果了，为了锦上添花，我们还应该设置他的透明度以及颜色值变化。不多说了，太简单，直接上代码。

- (void)shadowLayer
{
    CALayer *_shadowLayer = [CALayer layer];
    _shadowLayer.frame = CGRectMake(LAYER_WIDTH, 64 + LAYER_WIDTH, LAYER_WIDTH, LAYER_WIDTH * 2);
    _shadowLayer.backgroundColor = [UIColor whiteColor].CGColor;
    [self.view.layer addSublayer:_shadowLayer];

    CALayer *baseLayer = [CALayer layer];
    baseLayer.frame = CGRectMake(0, 0, LAYER_WIDTH, LAYER_WIDTH);
    baseLayer.contents = (__bridge id)[UIImage imageNamed:@"demo"].CGImage;

    CAReplicatorLayer *replicator = [CAReplicatorLayer layer];
    replicator.instanceCount = 2;
    replicator.frame = _shadowLayer.bounds;
    CATransform3D transform = CATransform3DIdentity;
    transform = CATransform3DRotate(transform, M_PI, 1, 0, 0);
    replicator.instanceTransform = transform;
    replicator.instanceRedOffset = -0.1;
    replicator.instanceGreenOffset = -0.1;
    replicator.instanceBlueOffset = -0.1;
    replicator.instanceAlphaOffset = -0.1;
    [replicator addSublayer:baseLayer];
    [_shadowLayer addSublayer:replicator];
}

总结

• 有几个属性是重点：instanceDelay，instanceCount，instanceTransform，划重点，必考。通过设置不同的值，可以创造很多不同效果的动画。
• 很多属性请注意他们的类型。比如时间，一定不能是整型的。不要犯我的低级错误。
• 创建完baseLayer以后，一定要将它addSubLayer到CAReplicatorLayer中，否则一切都是空谈。
• 耐心，耐心，耐心。

以上都是自己学习时写的demo。pu出来方便大家学习。如果有错误的地方，请帮忙指正。谢谢啦。也许这是新年的最后一篇，祝自己明年会事事顺利。如果步步高升也是极好的。

源码：https://github.com/lpy834994897/AnimationSimple