iOS CAReplicatorLayer 复制图层
CAReplicatorLayer 是 CALayer 的子类,是一个图层容器,可以添加特定的图层到其中,并复制出多个图层,例如你把一个单一的形状,通过简单的设置,在屏幕上就可以显示多个相同的形状。
·
简介
CAReplicatorLayer 是 CALayer 的子类,是一个图层容器,可以添加特定的图层到其中,并复制出多个图层,例如你把一个单一的形状,通过简单的设置,在屏幕上就可以显示多个相同的形状。
你可以使用 CAReplicatorLayer 结合动画制作出很多酷炫的动画。本章利用CAReplicatorLayer 制作几个可以充当加载提示的指示器,来演示下复制图层的使用。
CAReplicatorLayer
属性解析:
instanceCount //元素图层的数量,默认为1
instanceDelay //元素图层之间的延迟时间,默认为0
instanceTransform //可以移动、缩放、旋转元素图层
使用步骤:
- 创建元素图层
- 创建动画对象,并添加到元素图层上
- 创建复制图层
演示示例
- 示例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
- 元素图层添加动画
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"]; //添加到元素图层上
- 创建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 是一个图层容器,可以接受特定的图层并复制出多个图层。
更多推荐
已为社区贡献4条内容
所有评论(0)