音量條效果.gif

CAReplicatorLayer

• 1 CAReplicatorLayer的目的是為了高效生成許多相似的圖層.它是可以復(fù)制自己子層的layer,并且復(fù)制出來的layer和原生子層有同樣的屬性，位置，形變，動(dòng)畫。

• 2 CAReplicatorLayer的屬性

 //拷貝的次數(shù)
@property NSInteger instanceCount;
//是否開啟景深效果
@property BOOL preservesDepth;
//當(dāng)CAReplicatorLayer的子Layer層進(jìn)行動(dòng)畫的時(shí)候，拷貝的副本執(zhí)行動(dòng)畫的延時(shí)
@property CFTimeInterval instanceDelay;
//拷貝副本的3D變換
@property CATransform3D instanceTransform;
//拷貝副本的顏色變換
@property(nullable) CGColorRef instanceColor;
//每個(gè)拷貝副本的顏色偏移參數(shù)
@property float instanceRedOffset;
@property float instanceGreenOffset;
@property float instanceBlueOffset;
//每個(gè)拷貝副本的透明度偏移參數(shù)
@property float instanceAlphaOffset; 

本文一開始的例子就是通過CAReplicatorLayer來實(shí)現(xiàn)的.創(chuàng)建新項(xiàng)目,在控制器的viewDidLoad方法中添加如下代碼

- (void)viewDidLoad {
    [super viewDidLoad];
//創(chuàng)建圖層
    CAReplicatorLayer *replicator = [CAReplicatorLayer layer];
//設(shè)置圖層的位置為控制器view的中心點(diǎn)
    replicator.position = self.view.center;
//設(shè)置復(fù)制層的大小(任意取值)
    replicator.bounds = CGRectMake(0, 0, 250, 250);
//設(shè)置復(fù)制層的背景顏色 
    replicator.backgroundColor = [UIColor lightGrayColor].CGColor;
//將復(fù)制層添加到控制器的layer上
    [self.view.layer addSublayer:replicator];
//創(chuàng)建一個(gè)振動(dòng)層
    CALayer *vibrateLayer = [CALayer layer];
//振動(dòng)層的寬高
    CGFloat width = 25; 
    CGFloat height = 100;
    vibrateLayer.bounds = CGRectMake(0, 0, width, height);
//給定振動(dòng)層的錨點(diǎn)
    vibrateLayer.anchorPoint = CGPointMake(0.5, 1);
// 設(shè)置振動(dòng)層的位置
    vibrateLayer.position = CGPointMake(width * 0.5, replicator.bounds.size.height);
//設(shè)置振動(dòng)層的圓角
vibrateLayer.cornerRadius = 10;
//設(shè)置振動(dòng)層的背景顏色
    vibrateLayer.backgroundColor = [UIColor magentaColor].CGColor;
//將需要被復(fù)制的振動(dòng)層添加到復(fù)制層上
    [replicator addSublayer:vibrateLayer];
//創(chuàng)建幀動(dòng)畫
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale.y"];
//動(dòng)畫執(zhí)行的持續(xù)時(shí)間
    anim.duration = 1;
//修改的屬性
    anim.values = @[@(1),@(0.5),@(0)];
//旋轉(zhuǎn)后再旋轉(zhuǎn)到原來的位置,反極性開始
    anim.autoreverses = YES;
    anim.repeatCount = MAXFLOAT;
    [vibrateLayer addAnimation:anim forKey:nil];
//設(shè)置復(fù)制層需要復(fù)制的個(gè)數(shù)
    replicator.instanceCount = 4;
//設(shè)置復(fù)制出來子層的位移
    replicator.instanceTransform = CATransform3DMakeTranslation(50, 0, 0);
// 執(zhí)行動(dòng)畫的延遲
    replicator.instanceDelay = 0.1;
//改變顏色
    replicator.instanceAlphaOffset = - 0.1;
    replicator.instanceRedOffset = -0.2;
}