CAReplicatorLayer 学习和实践

发表于 | 分类于 | | 阅读次数 |

介绍

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

实践

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

1.音乐震动条

思路

  1. 用CALayer创建一个矩形条，作为base
  2. 用CAReplicatorLayer复制baseLayer。
  3. 设置动画，让他们长短发生变化。也许应该是：transform.scale.y。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
- (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. 设置动画，让他们发生位移变化。会改变什么属性呢？我们先猜一猜。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
- (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. 设置动画，让他们由大变小。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
- (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. 设置动画，让他们由大变小。你们的思路跟我一样了么？
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
- (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轴翻转。就能实现倒影效果了，为了锦上添花，我们还应该设置他的透明度以及颜色值变化。不多说了，太简单，直接上代码。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
- (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