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的链接： xiaojin1123/CAReplicatorLayer-