iOS关于CAReplicatorLayer（多图层复制）动画

分别写了关于指示器动画，圆形加载动画。效果如图：

[图片上传中...(One Point Scale动画.gif-80399d-1535716681149-0)]
One Point Scale动画.gif

• 第一个动画代码如下

- (void)addLayer {
    //初始化添加复制图层
    replicatorLayer = [CAReplicatorLayer layer];
    replicatorLayer.bounds = CGRectMake(100, 100, 300, 300);
    replicatorLayer.position = self.view.center;
    replicatorLayer.backgroundColor = [UIColor clearColor].CGColor;
    [self.view.layer addSublayer:replicatorLayer];
    [self addActivityLayer];
}

- (void)addActivityLayer {
    activityLayer = [CAShapeLayer layer];

    //使用贝塞尔曲线绘制矩形路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(self.view.center.x, self.view.center.y/2)];
    [path addLineToPoint:CGPointMake(self.view.center.x + 20, self.view.center.y/2)];
    [path addLineToPoint:CGPointMake(self.view.center.x + 10, self.view.center.y/2 + 20)];
    [path addLineToPoint:CGPointMake(self.view.center.x - 10 , self.view.center.y/2 + 20)];
    [path closePath];
    activityLayer.fillColor = [UIColor whiteColor].CGColor;
    activityLayer.path = path.CGPath;
    //设置图层不可见
    activityLayer.transform = CATransform3DMakeScale(0.01, 0.01, 0.01);
    
    [replicatorLayer addSublayer:activityLayer];
    
    //复制的图层数为三个
    replicatorLayer.instanceCount = 3;
    //设置每个复制图层延迟时间
    replicatorLayer.instanceDelay = 1.f / 3.f;
    //设置每个图层之间的偏移
    replicatorLayer.instanceTransform = CATransform3DMakeTranslation(35, 0, 0);
}

- (CABasicAnimation *)alphaAnimation{
    //设置透明度动画
    CABasicAnimation *alpha = [CABasicAnimation animationWithKeyPath:@"opacity"];
    alpha.fromValue = @1.0;
    alpha.toValue = @0.01;
    alpha.duration = 1.f;
    return alpha;
}

- (CABasicAnimation *)activityScaleAnimation{
    //设置缩放动画
    CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scale.toValue = @1;
    scale.fromValue = @1;
    return scale;
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    //设置动画组，并执行动画
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[[self alphaAnimation],[self activityScaleAnimation]];
    group.duration = 1.f;
    group.repeatCount = HUGE;
    [activityLayer addAnimation:group forKey:@""];
}

• 第二个动画就很有趣了，因为可以这样子玩。

  • 四个点的时候：

    
    Four Point Scale动画.gif

  • 三个点的时候是这样滴：

    
    Three Point Scale动画.gif

  • 一个点的时候又是这样子的：

    
    

是不是觉得很不可思议？怎么能这么玩呢？

原因还是跟复制图层的属性设置有关。

划重点来了

//    replicatorLayer.instanceDelay = 4.f/ 15.f;
//    replicatorLayer.instanceDelay = 3.f/ 15.f;
    replicatorLayer.instanceDelay = 1.f/ 15.f;

就是这个属性导致这个圆形加载动画可以这样子玩的原因。

---

那这个 instanceDelay属性又是什么呢？

• 在短时间内的复制延时,一般用在动画上(支持动画的延时)

也就是说一旦复制图层的时间控制得有点不一样，都会有很多意想不到的效果。

---

好了，如果有关于这个图层动画还有想深入了解的，可以关注我。后续我将为大家奉上更多实战内容。因为理论的内容在网上有很多,但实战的内容还是比较少的。所以大家应该还是比较期待的。

这个是上面demo的链接：https://github.com/xiaojin1123/CAReplicatorLayer-