CAReplicatorLayer就是一個容器，可以對已經(jīng)存在的一個圖層進行復(fù)制，單一的形狀經(jīng)過復(fù)制后可以顯示多個相同的形狀，復(fù)制圖層可以在原圖層的基礎(chǔ)上做出一些屬性變換。在原圖層上加上動畫效果之后，這些動畫效果也會被復(fù)制的圖層獲得，這樣我們就可以做出很多炫酷的動畫效果。

主要參數(shù)：

instanceCount 圖層的拷貝次數(shù)，默認值為1
instanceDelay 圖層拷貝延時
instanceTransform 復(fù)制圖層和上一個復(fù)制圖層之間的位移量，錨點為CAReplicatorlayer中心點

下面使用CAReplicatorLayer創(chuàng)建兩個簡單的加載動畫的效果

    //1.創(chuàng)建容器
    CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
    replicatorLayer.frame = CGRectMake(0, 0, 100, 100);
    replicatorLayer.position = CGPointMake(140, 160);
    //2.創(chuàng)建基礎(chǔ)圖層
    CAShapeLayer *dotLayer = [CAShapeLayer layer];
    dotLayer.frame = CGRectMake(0, 0, 15, 15);
    dotLayer.position = CGPointMake(50, 5);
    dotLayer.backgroundColor = [UIColor redColor].CGColor;
    dotLayer.cornerRadius = dotLayer.frame.size.width/2;
    dotLayer.transform = CATransform3DMakeScale(0.1, 0.1, 0.1);
    //3.在基礎(chǔ)圖層上添加動畫
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    animation.fromValue = @1;
    animation.toValue = @0.1;
    animation.duration = 1;
    animation.repeatCount = HUGE_VALF;  // 重復(fù)次數(shù)無限大
    [dotLayer addAnimation:animation forKey:@"animation"];
    //4.設(shè)置關(guān)鍵參數(shù)在容器中開始對基礎(chǔ)圖層進行復(fù)制
    replicatorLayer.instanceCount = 15;
    CGFloat angle = (M_PI*2.0)/15;   // 旋轉(zhuǎn)的角度
    replicatorLayer.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1);  // 旋轉(zhuǎn)
    replicatorLayer.instanceDelay = 1.0/15;
    [replicatorLayer addSublayer:dotLayer];
    // 最后添加到父視圖上
    [self.view.layer addSublayer:replicatorLayer];

replicatorLayer1.gif

    //1.創(chuàng)建容器
    CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
    replicatorLayer.bounds = CGRectMake(0, 0, 100, 100);
    replicatorLayer.position = CGPointMake(300, 160);
    //2.創(chuàng)建基礎(chǔ)圖層
    CAShapeLayer *basicLayer = [CAShapeLayer layer];
    basicLayer.bounds = CGRectMake(0, 0, 10, 40);
    basicLayer.position = CGPointMake(10, 50);
    basicLayer.backgroundColor = [UIColor redColor].CGColor;
    basicLayer.transform = CATransform3DMakeScale(1, 0.1, 1);
    //3.基礎(chǔ)圖層上添加動畫
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale.y"];
    animation.values = @[@1,@0.8,@0.6,@0.4,@0.2,@0.4,@0.6,@0.8,@1];
    animation.duration = 0.5;
    animation.repeatCount = HUGE_VALF;
    [basicLayer addAnimation:animation forKey:@"animation"];
    //4.設(shè)置關(guān)鍵參數(shù)在容器中開始對基礎(chǔ)圖層進行復(fù)制
    replicatorLayer.instanceCount = 5;
    replicatorLayer.instanceTransform = CATransform3DMakeTranslation(13, 0, 0);
    replicatorLayer.instanceDelay = 0.1;
    [replicatorLayer addSublayer:basicLayer];
    //添加圖層
    [self.view.layer addSublayer:replicatorLayer];

replicatorLayer2.gif

使用CAReplicatorLayer可以對原圖層進行一次復(fù)制，并對復(fù)制圖層的屬性進行一定的更改，可以做出一個倒影的效果。

    //1.創(chuàng)建一個容器
    CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
    replicatorLayer.bounds = CGRectMake(0, 0, 300, 300);
    replicatorLayer.position = CGPointMake(self.view.bounds.size.width/2, 260);
    //2.創(chuàng)建基礎(chǔ)圖層
    CALayer *basicLayer = [CALayer layer];
    basicLayer.bounds = CGRectMake(0, 0, 208, 107);
    basicLayer.position = CGPointMake(replicatorLayer.bounds.size.width/2, 97);
    basicLayer.contents = (id)[UIImage imageNamed:@"ss(4)"].CGImage;
    //3.設(shè)置復(fù)制圖層的屬性
    replicatorLayer.instanceCount = 2;
    CATransform3D transform = CATransform3DIdentity;
    transform = CATransform3DTranslate(transform, 0, 0, 0);
    transform = CATransform3DScale(transform, 1, -1, 0);
    replicatorLayer.instanceTransform = transform;
    replicatorLayer.instanceAlphaOffset = -0.5;
    [replicatorLayer addSublayer:basicLayer];
    //4.添加圖層
    [self.view.layer addSublayer:replicatorLayer];

replicatorLayer3.png

所有的動畫效果或者頁面實現(xiàn)的方式不唯一，這里的例子只希望能給讀者更多一點的思路，可以在需要制作類似的頁面的時候可以有更多選擇。從上面兩個簡單的動效圖的例子可以知道，配合基礎(chǔ)動畫，使用CAReplicatorLayer可以制作更多的動畫效果，多練習(xí)制作幾個就可以實現(xiàn)更多復(fù)雜的加載動畫。