Swift3990Days - 如何实现圆形加载进度条

概述Swift90Days - 如何实现圆形加载进度条 今天照着 raywenderlich 的教程学习了一下使用 CAShapeLayer 实现一个原型的加载指示器。完成效果如图： 后面显示图片的动画暂且不谈，先说这个红色的圆环动画。 通过自定义一个 UIView 实现了这个红色的加载指示器，上面有一个 CAShapeLayer ，用来显示红色的圆环，圆环部分的关键代码是： let circlePa Swift90Days - 如何实现圆形加载进度条

今天照着 raywenderlich 的教程学习了一下使用 CAShapeLayer 实现一个原型的加载指示器。完成效果如图：

后面显示图片的动画暂且不谈，先说这个红色的圆环动画。

通过自定义一个 UIVIEw 实现了这个红色的加载指示器，上面有一个 CAShapeLayer ，用来显示红色的圆环，圆环部分的关键代码是：

let circlePathLayer = CAShapeLayer()let circleRadius: CGfloat = 20.0func configure() {    circlePathLayer.frame = bounds    circlePathLayer.linewidth = 2    circlePathLayer.fillcolor = UIcolor.clearcolor().CGcolor    circlePathLayer.strokecolor = UIcolor.redcolor().CGcolor    layer.addSublayer(circlePathLayer)    backgroundcolor = UIcolor.whitecolor()    progress = 0}

其实也没什么，就是设置 frame 和 linewidth 以及一些颜色之类的。然后在 layoutSubvIEws 里面设置 layer 的 path 就可以了：

overrIDe func layoutSubvIEws() {    super.layoutSubvIEws()    circlePathLayer.frame = bounds    circlePathLayer.path = UIBezIErPath(ovalInRect: circleFrame()).CGPath}

至于动画，则是通过 setter 来实现的，在 set 里设置 Layer 的终点：

var progress: CGfloat {    get {        return circlePathLayer.strokeEnd    }    set {        if (newValue > 1) {            circlePathLayer.strokeEnd = 1        } else if (newValue < 0) {            circlePathLayer.strokeEnd = 0        } else {            circlePathLayer.strokeEnd = newValue        }    }}

嗯挺简单也挺实用的，刚好公司里面有用到。完整的教程和项目源码见原文。

原文链接：

How To Implement A Circular Image Loader Animation with CAShapeLayer 总结

以上是内存溢出为你收集整理的Swift39/90Days - 如何实现圆形加载进度条全部内容，希望文章能够帮你解决Swift39/90Days - 如何实现圆形加载进度条所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。