CAReplicatorLayer的目的是为了高效生成许多相似的图层。它会绘制一个或多个图层的子图层,并在每个复制体上应用不同的变换。
gitHub地址在/layer/replicatorLayer里面
CAReplicatorLayer属性说明:
@property NSInteger instanceCount;
指定图层需要重复多少次@property CFTimeInterval instanceDelay;
图层出现的延迟@property CATransform3D instanceTransform;
重复图层的transform@property(nullable) CGColorRef instanceColor;
重复图层的颜色@property float instanceRedOffset;
@property float instanceGreenOffset;
@property float instanceBlueOffset;
@property float instanceAlphaOffset;
重复图层的颜色渐变值
1、圆形重复图层效果
达到的效果为:
示例代码为:
/**
* @func 重复图层圆形
*/
-(void)cicleReplicatorLayer{
//创建一个ReplicatorLayer
CAReplicatorLayer * replicatorLayer = [CAReplicatorLayer layer];
//设置大小
replicatorLayer.frame = self.bounds;
[self.layer addSublayer:replicatorLayer];
//设置ReplicatorLayer的复制个数
replicatorLayer.instanceCount = 10;
//给每个instance添加transform
CATransform3D transform = CATransform3DIdentity;
//向下平移200
// transform = CATransform3DTranslate(transform, 50, 0, 0);
//绕着Z轴旋转
transform = CATransform3DRotate(transform, M_PI/5.0, 0, 0, 1);
//上移200
transform = CATransform3DTranslate(transform, -50, 50, 0);
replicatorLayer.instanceTransform = transform;
//添加渐变颜色
replicatorLayer.instanceBlueOffset = -0.1;
replicatorLayer.instanceGreenOffset = -0.1;
//设置subLayer和位置大小
CALayer * layer = [CALayer layer];
layer.frame = CGRectMake(50, 100, 50, 50);
layer.backgroundColor = [UIColor whiteColor].CGColor;
[replicatorLayer addSublayer:layer];
}
2、实现一个雷达的动画
实现效果为:
示例代码:
/**
*雷达动画
*/
-(void)radarAnimation{
// 创建一个shaperLayer图层,也就是做变大动画
CAShapeLayer * shaperLayer = [CAShapeLayer layer];
shaperLayer.backgroundColor = [UIColor whiteColor].CGColor;
shaperLayer.bounds = CGRectMake(0, 0, 20, 20);
shaperLayer.cornerRadius = 10;
shaperLayer.position = CGPointMake(kWidth/2, kHeight/2);
// 创建动画
CABasicAnimation *transform = [CABasicAnimation animationWithKeyPath:@"transform"];
NSValue *value = [NSValue valueWithCATransform3D:CATransform3DMakeScale(10, 10, 1)];
transform.toValue = value;
transform.duration = 3;
transform.repeatCount = MAXFLOAT;
//设置透明度,可以直接设置replicatorLayer的instanceAlphaOffset来设置
CABasicAnimation * alpha = [CABasicAnimation animationWithKeyPath:@"opacity"];
alpha.fromValue = @(1);
alpha.toValue = @(0);
alpha.duration = 2;
// 创建动画组
CAAnimationGroup * group = [CAAnimationGroup animation];
group.animations = @[transform,alpha];
group.duration = 2;
group.repeatCount = MAXFLOAT;
[shaperLayer addAnimation:group forKey:@"radarAnimation"];
// 创建replicatorLayer
CAReplicatorLayer * replicatorLayer = [CAReplicatorLayer layer];
[replicatorLayer addSublayer:shaperLayer];
// 复制层的个数
replicatorLayer.instanceCount = 3;
// 复制层延迟时间
replicatorLayer.instanceDelay = 0.5;
// replicatorLayer.instanceAlphaOffset = -0.1;
[self.layer addSublayer:replicatorLayer];
}
3、圆点缩放转圈效果
实现效果为:
示例代码:
/**
* @func 转圈动画,带大小缩放
*/
-(void)cicleScaleAnimation{
//创建一个shaperLayer,动画效果layer
CAShapeLayer * shaperLayer = [CAShapeLayer layer];
shaperLayer.backgroundColor = [UIColor whiteColor].CGColor;
shaperLayer.bounds = CGRectMake(0, 0, 20, 20);
shaperLayer.cornerRadius = 10;
shaperLayer.position = CGPointMake(kWidth/2, 100);
shaperLayer.transform = CATransform3DMakeScale(0.1, 0.1, 0.1);
//创建缩放动画
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
animation.duration = 2;
animation.repeatCount = MAXFLOAT;
//动画起始为原来大小
animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1)];
//动画结束为原来的0.1倍
animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 0.1)];
[shaperLayer addAnimation:animation forKey:nil];
//创建replicatorLayer
CAReplicatorLayer * replicatorLayer = [CAReplicatorLayer layer];
//这里设置的高度500,显示区域Y值在100-(500-100)之间,动画占用区域高度为300
replicatorLayer.frame = CGRectMake(0, 0, kWidth, 500);
[replicatorLayer addSublayer:shaperLayer];
//重复层的个数
replicatorLayer.instanceCount = 20;
//重复层的延时
replicatorLayer.instanceDelay = 0.1;
CGFloat angle = 2*M_PI / 20.0;
//创建replicatorLayer的instance的transform绕着Z轴旋转angle角度
replicatorLayer.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1);
[self.layer addSublayer:replicatorLayer];
}
这是重复图层的用法,其他效果,大家可以自己尝试。