iOS开发-活动指示器功能的实现

今天呢给同学们讲解一下通过核心动画实现一个活动指示器功能,那么废话不多说直接上代码~先看演示视频

iOS开发-活动指示器功能的实现.gif

活动指示器实现思路

  • 1> 创建复制图层
// 0.创建背景view
    UIView *bgView = [[UIView alloc] init];
    bgView.backgroundColor = [UIColor grayColor];
    CGFloat bgViewX = self.view.frame.size.width * 0.5  ;
    CGFloat bgViewY = 300;
    CGFloat bgViewW = 200;
    CGFloat bgViewH = 200;
    bgView.center = CGPointMake(bgViewX, bgViewY);
    bgView.bounds = CGRectMake(0, 0, bgViewW, bgViewH);
    [self.view addSubview:bgView];
    
    // 1.创建复制图层 可以把图层里面所有子层复制
    CAReplicatorLayer *repL = [CAReplicatorLayer layer];
    repL.frame = bgView.bounds;
    [bgView.layer addSublayer:repL];
  • 2> 创建一个矩形图层,设置缩放动画。
    CALayer *layer = [CALayer layer];
    layer.transform = CATransform3DMakeScale(0, 0, 0);
    layer.position = CGPointMake(bgView.bounds.size.width * 0.5, 20);
    layer.bounds = CGRectMake(0, 0, 10, 10);
    layer.backgroundColor = [UIColor greenColor].CGColor;
    [repL addSublayer:layer];
    
    // 2.创建动画
    CABasicAnimation *anim = [CABasicAnimation animation];
    anim.keyPath = @"transform.scale";
    anim.fromValue = @1;
    anim.toValue = @0;
    CGFloat duration = 1;
    anim.duration = duration;
    anim.repeatCount = MAXFLOAT;
    [layer addAnimation:anim forKey:nil];
  • 3> 复制矩形图层,并且设置每个复制层的角度形变
    int count = 20;
    CGFloat angle = M_PI * 2 / count;
    
    // 复制层中子层总数
    // instanceCount:表示复制层里面有多少个子层,包括原始层
    repL.instanceCount = count;
    
    // 设置复制子层偏移量,不包括原始层,相对于原始层x偏移
    repL.instanceTransform = CATransform3DMakeRotation(angle, 0, 0, 1);
  • 4> 设置复制动画延长时间(需要保证第一个执行完毕之后,绕一圈刚好又是从第一个执行,因此需要把动画时长平均分给每个子层)
    • 公式:延长时间 = 动画时长 / 子层总数
    • 假设有两个图层,动画时间为1秒,延长时间就为0.5秒。当第一个动画执行到一半的时候(0.5),第二个开始执行。第二个执行完
    // 设置复制层动画延迟时间
    repL.instanceDelay = duration / count;
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 快乐分享错了人,成为了炫耀,难过分享错了人,成了矫情。 在别人眼里永远只看结果,不看过程,没变强之前,不要告诉别人...
    LZMJ阅读 207评论 0 0
  • yum是基于C/S架构的,有服务端和客户端,可以自动解决依赖关系的RPM包的前端工具。工作流程:yum客户端先会将...
    fengkaipeng阅读 1,149评论 0 3
  • 六年前的这个时候,自己一个人去南京参加会计师的考试,下午四点多晕晕乎乎的从考场出来,想着要赶紧去车站,搭早一点的火...
    姜三疯阅读 697评论 0 50
  • 我第一天使用,不知道好用吗?希望它是我开启生活,新的方向和新的感觉 ,从今天开始努力生活,用它记录我每天不...
    可爱love尼阅读 102评论 0 0
  • The power of taking notes 06/12/2017 Part 1 The power of ...
    李绅Luis阅读 237评论 0 0

友情链接更多精彩内容