简介

CAReplicatorLayer 是 CALayer 的子类，是一个图层容器，可以添加特定的图层到其中，并复制出多个图层，例如你把一个单一的形状，通过简单的设置，在屏幕上就可以显示多个相同的形状。
你可以使用 CAReplicatorLayer 结合动画制作出很多酷炫的动画。本章利用CAReplicatorLayer 制作几个可以充当加载提示的指示器，来演示下复制图层的使用。

加载指示器

CAReplicatorLayer

属性解析：

instanceCount //元素图层的数量，默认为1
instanceDelay //元素图层之间的延迟时间，默认为0
instanceTransform //可以移动、缩放、旋转元素图层

使用步骤：

1. 创建元素图层
2. 创建动画对象，并添加到元素图层上
3. 创建复制图层

演示示例

• 示例1

圆环点

1. 先使用 CALayer 制作一个元素圆点

CGSize size = CGSizeMake(100, 100); //大小
UIColor *color = [UIColor redColor]; //颜色
CALayer* itemLayer = [CALayer layer];
itemLayer.bounds = CGRectMake(0, 0, size.width/6, size.width/6);
itemLayer.position = CGPointMake(size.width/2, 5);
itemLayer.cornerRadius = itemLayer.bounds.size.width/2; //圆形
itemLayer.backgroundColor = color.CGColor;  //颜色
itemLayer.transform = CATransform3DMakeScale(0.1, 0.1, 0.1); //最初大小缩小为0.1

2. 元素图层添加动画

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation.fromValue = @1;
animation.toValue = @0.1;
animation.duration = 0.5; //动画时间
animation.repeatCount = HUGE_VALF;
[itemLayer addAnimation:animation forKey:@"animation"]; //添加到元素图层上

3. 创建CAReplicatorLayer 复制层

CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
replicatorLayer.frame = CGRectMake(0, 0, size.width, size.height);
replicatorLayer.position = self.view.center;
replicatorLayer.backgroundColor = [UIColor clearColor].CGColor;
// 核心代码：
NSInteger numOfSpot = 15; //复制的数量
replicatorLayer.instanceCount = numOfSpot;
CGFloat angle = (M_PI*2.0)/numOfSpot; //旋转的角度
replicatorLayer.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1);  //旋转效果
replicatorLayer.instanceDelay = 1.0/numOfSpot;  //下一个元素添加的延迟时间
[replicatorLayer addSublayer:itemLayer];    // 添加元素圆点
[self.view.layer addSublayer:replicatorLayer];

• 示例2

这里写图片描述

// 关键帧动画
// 计算三个圆点位置
CGPoint p0,p1,p2;
p0 = CGPointMake(size.width/2.0, size.height);
p1 = CGPointMake(size.width/2.0*(1-cos(M_PI*30/180.0)), size.width/2.0*(1-sin(M_PI*30/180.0)));
p2 = CGPointMake(size.width/2.0*(1+cos(M_PI*30/180.0)), size.width/2.0*(1-sin(M_PI*30/180.0)));
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
animation.duration = 1.5;
animation.values = @[[NSValue valueWithCGPoint:p0],[NSValue valueWithCGPoint:p1],[NSValue valueWithCGPoint:p2],[NSValue valueWithCGPoint:p0]];
animation.timingFunctions = @[
                             [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
                             [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut],
                             [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]
                              ];  //运动速率
animation.repeatCount = HUGE_VALF;
// 添加关键帧动画
[itemLayer addAnimation:animation forKey:@"animation"]; 

// 核心代码
NSInteger numOfSpot = 3; //数量
replicatorLayer.instanceCount = numOfSpot;
CGFloat angle = (M_PI*2) / numOfSpot; //计算角度
replicatorLayer.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1);  //旋转
[replicatorLayer addSublayer:itemLayer]; //添加元素圆点

Demo地址

总结

CAReplicatorLayer 是一个图层容器，可以接受特定的图层并复制出多个图层。