首页 >iOS开发

iOS关于CAReplicatorLayer(多图层复制)动画

2018-10-09 13:57 编辑: yyuuzhu 分类:iOS开发 来源:MR小锦

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

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

One Point Scale动画.gif

  • 第一个动画代码如下

- (void)addLayer {
    //初始化添加复制图层
    replicatorLayer = [CAReplicatorLayer layer];
    replicatorLayer.bounds = CGRectMake(100100300300);
    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 + 20self.view.center.y/2)];
    [path addLineToPoint:CGPointMake(self.view.center.x + 10self.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.010.010.01);

    [replicatorLayer addSublayer:activityLayer];

    //复制的图层数为三个
    replicatorLayer.instanceCount = 3;
    //设置每个复制图层延迟时间
    replicatorLayer.instanceDelay = 1.f / 3.f;
    //设置每个图层之间的偏移
    replicatorLayer.instanceTransform = CATransform3DMakeTranslation(3500);
}

- (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.f15.f;

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

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

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

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

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

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

作者:MR小锦
链接:https://www.jianshu.com/p/90ffd020547b

搜索CocoaChina微信公众号:CocoaChina
微信扫一扫
订阅每日移动开发及APP推广热点资讯
公众号:
CocoaChina
我要投稿   收藏文章
上一篇:iOS封装一个轻量级的顶部分类控件
我来说两句
发表评论
您还没有登录!请登录注册
所有评论(0

综合评论

相关帖子

sina weixin mail 回到顶部