tips1:用CAShapeLayer来实现一个圆形Image loader 动画

创建一个UIView的子类,添加两个属性:cirecleRadius用来设定圆的半径


在初始化方法里面配置circlePathLayer,

tips1:用CAShapeLayer来实现一个圆形Image loader 动画_第1张图片

在配置方法里面设定cireclePathLayer的frame,lineWidth,填充颜色和边界线的颜色,并设定当前view的背景色为白色,这样看起来更加清晰


tips1:用CAShapeLayer来实现一个圆形Image loader 动画_第2张图片

下面就为cireclePathLayer创建一个path,并使的path的frame的始终保持在view 的中心

先要设定path的frame

tips1:用CAShapeLayer来实现一个圆形Image loader 动画_第3张图片

然后用UIBezierPath画出一个圆形


tips1:用CAShapeLayer来实现一个圆形Image loader 动画_第4张图片

 由于layer没有UIAutoresizing 所以还得在layoutSubView里面调整layer 的frame


tips1:用CAShapeLayer来实现一个圆形Image loader 动画_第5张图片

 初始化之后就可以看到在view的中心画出了一个圆形

之后在添加一个属性progress来显示进度, 把progress的值给layer的strokeEnd属性来动态的画圆


tips1:用CAShapeLayer来实现一个圆形Image loader 动画_第6张图片

下面将创建一个ImageView的子类,并用SDWebImage来加载一个网络图片


tips1:用CAShapeLayer来实现一个圆形Image loader 动画_第7张图片

最后,拖曳一个UIImageView到storyboard上,使他指向CustomImageView

运行将看到:


tips1:用CAShapeLayer来实现一个圆形Image loader 动画_第8张图片

你可能感兴趣的:(tips1:用CAShapeLayer来实现一个圆形Image loader 动画)