iOS-swift环形进度指示器+图片加载动画

如图,这个动画的是如何做的呢?

分析:

  • 1.环形进度指示器,根据下载进度来更新它
  • 2.扩展环,向内向外扩展这个环,中间扩展的时候,去掉这个遮盖

一.环形进度指示器

1.自定义View继承UIView,命名为CircularLoaderView.swift,此View将用来保存动画的代码

2.创建CAShapeLayer

3.初始化CAShapeLayer

4.设置环形进度条的矩形frame

可以参考下图,理解这个circleFrame

987457-ca67dde6412bfdc7

5.每次自定义的这个view的size改变时,你都需要重新计算circleFrame,所以要将它放在一个独立的方法,方便调用

6.由于layers没有autoresizingMask这个属性,你需要在layoutSubviews方法中更新circlePathLayer的frame来恰当地响应view的size变化

7.给CircularLoaderView.swift文件添加一个CGFloat类型属性,自定义的setter和getter方法,setter方法验证输入值要在0到1之间,然后赋值给layer的strokeEnd属性。

8.利用SDWebImage,在image下载回调方法中更新progress.
此处是自定义ImageView,在storyboard中拖个ImageView,设置为自定义的ImageView类型,在这个ImageView初始化的时候就会调用下面的代码

二.扩展这个环

仔细看,此处是两个动画一起执行,1是向外扩展2.是向内扩展.但可以用一个Bezier path完成此动画,需要用到组动画.

  • 1.增加圆的半径(path属性)来向外扩展
  • 2.同时增加line的宽度(lineWidth属性)来使环更加厚和向内扩展

987457-308bae99068c55b0

三.监听动画的结束

示例下载地址github
原文地址 Rounak Jain
参考地址

1 2 收藏 评论

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部