Swift 圆形进度条

效果图

前言

ios 10.0

因为 UI 做了一些很别致的进度条效果图，而且在网上又找不到合适的三方库，自己在网上查查资料做了出来，然后整理了一下，分享给大家使用

首先，这个东西只是用贝赛尔曲线做出来的，并不是很难，做出来只是略微麻烦一点，网上也有很多资料，不过并不是很多，所以我就整理了一下，一是整理备份一下记录，二是分享给大家看下

1、绘制这个断断续续的进度条

UI 设计很漂亮，但是由于数据过多或过少，导致太难看，最后放弃

1.1 初始化一个贝塞尔直线

///贝塞尔直线
private lazy var path: UIBezierPath = {
   
    let bezierPath = UIBezierPath()
    bezierPath.move(to: CGPoint(x: 0, y: 0))
    bezierPath.addLine(to: CGPoint(x: bounds.size.width, y: 0))
    return bezierPath
}()

1.2 使用CAShapeLayer初始化底部背景线，和进度线

此处 lineDashPattern 是长度对比，一长一短线，我使用的是两个数据，多个的话，暂时没弄明白，有大佬了解的留个言，
建议：此处进度最好和你自己进度比率相同，要不然会出现上图的情况（一线两色）

///背景线
private lazy var backLayer: CAShapeLayer = {
   
    let layer = CAShapeLayer()
    layer.fillColor = UIColor.clear.cgColor
    layer.strokeColor = .green.cgColor
    layer.lineWidth = 2
    layer.lineDashPattern = [15, 3]
    layer.path = path.cgPath
    return layer
}()
///进度条线
private lazy var progressLayer: CAShapeLayer = {
   
    let layer = CAShapeLayer()
    layer.fillColor = UIColor.clear.cgColor
    layer.strokeColor = .red.cgColor
    layer.lineWidth = 2
    layer.lineDashPattern = [15, 3]
    layer.strokeStart = 0
    layer.strokeEnd = 0
    layer.path = path.cgPath
    return layer
}()

1.3 添加到视图上

直接设置 progressLayer.strokeEnd = progress 会显得突兀，我再此添加了一个动画，
后续此处就不一一说明

///数据
layer.addSublayer(backLayer)
layer.addSublayer(progressLayer)

///进度
public var progress: CGFloat