CAReplicatorLayer的目的是為了高效生成許多相似的圖層捆姜。它會繪制一個或多個圖層的子圖層,并在每個復(fù)制體上應(yīng)用不同的變換。
gitHub地址在/layer/replicatorLayer里面
CAReplicatorLayer屬性說明:
@property NSInteger instanceCount;
指定圖層需要重復(fù)多少次@property CFTimeInterval instanceDelay;
圖層出現(xiàn)的延遲@property CATransform3D instanceTransform;
重復(fù)圖層的transform@property(nullable) CGColorRef instanceColor;
重復(fù)圖層的顏色@property float instanceRedOffset;
@property float instanceGreenOffset;
@property float instanceBlueOffset;
@property float instanceAlphaOffset;
重復(fù)圖層的顏色漸變值
1负蚊、圓形重復(fù)圖層效果
達到的效果為:
replicatorLayer-1
示例代碼為:
/**
* @func 重復(fù)圖層圓形
*/
-(void)cicleReplicatorLayer{
//創(chuàng)建一個ReplicatorLayer
CAReplicatorLayer * replicatorLayer = [CAReplicatorLayer layer];
//設(shè)置大小
replicatorLayer.frame = self.bounds;
[self.layer addSublayer:replicatorLayer];
//設(shè)置ReplicatorLayer的復(fù)制個數(shù)
replicatorLayer.instanceCount = 10;
//給每個instance添加transform
CATransform3D transform = CATransform3DIdentity;
//向下平移200
// transform = CATransform3DTranslate(transform, 50, 0, 0);
//繞著Z軸旋轉(zhuǎn)
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;
//設(shè)置subLayer和位置大小
CALayer * layer = [CALayer layer];
layer.frame = CGRectMake(50, 100, 50, 50);
layer.backgroundColor = [UIColor whiteColor].CGColor;
[replicatorLayer addSublayer:layer];
}
2神妹、實現(xiàn)一個雷達的動畫
實現(xiàn)效果為:
雷達效果.gif
示例代碼:
/**
*雷達動畫
*/
-(void)radarAnimation{
// 創(chuàng)建一個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);
// 創(chuàng)建動畫
CABasicAnimation *transform = [CABasicAnimation animationWithKeyPath:@"transform"];
NSValue *value = [NSValue valueWithCATransform3D:CATransform3DMakeScale(10, 10, 1)];
transform.toValue = value;
transform.duration = 3;
transform.repeatCount = MAXFLOAT;
//設(shè)置透明度家妆,可以直接設(shè)置replicatorLayer的instanceAlphaOffset來設(shè)置
CABasicAnimation * alpha = [CABasicAnimation animationWithKeyPath:@"opacity"];
alpha.fromValue = @(1);
alpha.toValue = @(0);
alpha.duration = 2;
// 創(chuàng)建動畫組
CAAnimationGroup * group = [CAAnimationGroup animation];
group.animations = @[transform,alpha];
group.duration = 2;
group.repeatCount = MAXFLOAT;
[shaperLayer addAnimation:group forKey:@"radarAnimation"];
// 創(chuàng)建replicatorLayer
CAReplicatorLayer * replicatorLayer = [CAReplicatorLayer layer];
[replicatorLayer addSublayer:shaperLayer];
// 復(fù)制層的個數(shù)
replicatorLayer.instanceCount = 3;
// 復(fù)制層延遲時間
replicatorLayer.instanceDelay = 0.5;
// replicatorLayer.instanceAlphaOffset = -0.1;
[self.layer addSublayer:replicatorLayer];
}
3鸵荠、圓點縮放轉(zhuǎn)圈效果
實現(xiàn)效果為:
圓點縮放轉(zhuǎn)圈.gif
示例代碼:
/**
* @func 轉(zhuǎn)圈動畫,帶大小縮放
*/
-(void)cicleScaleAnimation{
//創(chuàng)建一個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);
//創(chuàng)建縮放動畫
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
animation.duration = 2;
animation.repeatCount = MAXFLOAT;
//動畫起始為原來大小
animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1, 1, 1)];
//動畫結(jié)束為原來的0.1倍
animation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 0.1)];
[shaperLayer addAnimation:animation forKey:nil];
//創(chuàng)建replicatorLayer
CAReplicatorLayer * replicatorLayer = [CAReplicatorLayer layer];
//這里設(shè)置的高度500伤极,顯示區(qū)域Y值在100-(500-100)之間蛹找,動畫占用區(qū)域高度為300
replicatorLayer.frame = CGRectMake(0, 0, kWidth, 500);
[replicatorLayer addSublayer:shaperLayer];
//重復(fù)層的個數(shù)
replicatorLayer.instanceCount = 20;
//重復(fù)層的延時
replicatorLayer.instanceDelay = 0.1;
CGFloat angle = 2*M_PI / 20.0;
//創(chuàng)建replicatorLayer的instance的transform繞著Z軸旋轉(zhuǎn)angle角度
replicatorLayer.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1);
[self.layer addSublayer:replicatorLayer];
}
這是重復(fù)圖層的用法,其他效果哨坪,大家可以自己嘗試庸疾。