Swift 圆形进度条

demo 传送门
demo

效果图

HJProgress.gif

前言

ios 10.0

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

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

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

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

image.png

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 = 0.0 {
    didSet {
        CATransaction.begin()
        CATransaction.setDisableActions(false)
        CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: .linear))
        CATransaction.setAnimationDuration(2)
        progressLayer.strokeEnd = progress
        CATransaction.commit()
    }
}

2 普通圆形进度条

image.png

2.1首先开放公共参数

///背景颜色
public var backColor: UIColor = .gray
///进度条颜色
public var progressColor: UIColor = .red
///线宽
public var lineWidth: CGFloat = 2.0  
///圆直径
public var realWidth: CGFloat = 100
///圆起点角度。角度从水平右侧开始为0，顺时针为增加角度。直接传度数 如-90
public var startAngle: CGFloat = 0.5 * .pi
///圆结束角度。角度从水平右侧开始为0，顺时针为增加角度。直接传度数 如-90
public var endAngle: CGFloat = 0.5 * .pi
///动画时长
public var duration: CGFloat = 2

2.2 使用贝赛尔曲线画圆

设置中心点、半径（通过直径 - 宽度计算得来）、起始位置，结束位置

let radius = realWidth / 2 - lineWidth

///贝塞尔直线
private lazy var path: UIBezierPath = {
    let bezierPath = UIBezierPath(arcCenter: CGPoint(x: realWidth/2, y: realWidth/2),
                                  radius: radius,
                                  startAngle: startAngle,
                                  endAngle: 2 * .pi + endAngle,
                                  clockwise: true)
    return bezierPath
}()

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

然后 添加到视图，和设置进度我就不说了，上面都有， 至于是多少角度的圆形，设置起始角度和结束角度就可以了

///背景圆环
private lazy var backLayer: CAShapeLayer = {
    let layer = CAShapeLayer()
    layer.frame         = bounds
    layer.fillColor     = UIColor.clear.cgColor
    layer.lineWidth     = lineWidth
    layer.strokeColor   = backColor.cgColor
    layer.lineCap       = .round
    layer.path          = path.cgPath
    return layer
}()

///进度圆环
private lazy var progressLayer: CAShapeLayer = {
    let layer = CAShapeLayer()
    layer.frame         = bounds
    layer.fillColor     = UIColor.clear.cgColor
    layer.lineWidth     = lineWidth
    layer.strokeColor   = progressColor.cgColor
    layer.lineCap       = .round
    layer.path          = path.cgPath
    layer.strokeEnd     = 0
    return layer
}()

3 绘制渐变进度条

image.png

3.1首先开放渐变公共参数

相同参数我就不在一一叙述

///渐变颜色
public var colors: [CGColor] = [UIColor.red.cgColor, UIColor.green.cgColor]
///渐变色位置
public var locations: [NSNumber] = [0, 1]
///渐变色起始位置
public var startPoint: CGPoint = CGPoint(x: 0, y: 0)
///渐变色结束位置
public var endPoint: CGPoint = CGPoint(x: 1, y: 0)

3.2 使用CAGradientLayer设置渐变背景

///渐变背景
private lazy var gradientLayer: CAGradientLayer = {
    let layer = CAGradientLayer()
    layer.frame = bounds
    layer.colors =  colors
    layer.locations =  locations
    layer.startPoint =  startPoint
    layer.endPoint =  endPoint
    return layer
}()

3.3 把进度圆环放到渐变背景上

然后加载进度就可以了

gradientLayer.mask = progressLayer
layer.addSublayer(gradientLayer)

4 在进度条终点添加样式

image.png

4.1 添加终点样式

此处我使用了 UIView，你可以采用图片、渐变 view 等
在 layer.addSublayer(progressLayer) 后面放入,

addSubview(dot)
dot.isHidden = true

4.2 跟谁进度条速度加载

使用 CAAnimation 加载动画
整圆和非整圆这块加载我没给弄清楚，有了解的大佬请给予指出，虽然结果没错，但是两套逻辑总感觉很奇怪

private lazy var pointAnimation: CAAnimation = {
    let animation = CAKeyframeAnimation(keyPath: "position")
    animation.timingFunction = CAMediaTimingFunction(name: .linear)
    animation.fillMode = .forwards
    animation.calculationMode = CAAnimationCalculationMode.paced
    animation.isRemovedOnCompletion = false
    animation.duration = duration
    ///此处记得加载代理，不用执行方法
    animation.delegate = self
    
    var end = 2 * .pi * progress + startAngle
    ///非整圆
    if data.startAngle != data.endAngle {
        end = (2 * .pi - CGFloat(fabs(Double(endAngle))) - startAngle) * progress + startAngle
    }
    
    let imagePath = UIBezierPath(arcCenter: CGPoint(x: realWidth/2, y: realWidth/2),
                                 radius: radius,
                                 startAngle: startAngle,
                                 endAngle: end,
                                 clockwise: true)
    animation.path = imagePath.cgPath
    return animation
}()

执行加载动画, 此处跟谁到 progress 设置进度后面即可

dot.isHidden = false
dot.layer.add(pointAnimation, forKey: "pointAnimation")

5 仪表盘进度条样式

image.png

5.1 公开参数

此处总长度是圆周长长度，这个切记要计算好，否则最后一根线会有问题

///线间距 间断进度条专属  直线计算长度，圆计算周长
public var lineDashPattern: [NSNumber] = [15 , 5]

5.2 初始化贝塞尔曲线,CAShapeLayer背景和进度条

///贝塞尔直线
private lazy var path: UIBezierPath = {
    let bezierPath = UIBezierPath(arcCenter: CGPoint(x: data.realWidth / 2, y: data.realWidth / 2),
                                  radius: radius,
                                  startAngle: startAngle,
                                  endAngle: 2 * .pi + endAngle,
                                  clockwise: true)
        
    return bezierPath
}()
///背景
private lazy var backLayer: CAShapeLayer = {
    let layer = CAShapeLayer()
    layer.frame         = bounds
    layer.fillColor     = UIColor.clear.cgColor
    layer.lineWidth     = lineWidth
    layer.strokeColor   = backColor.cgColor
    layer.path          = cgPath
    layer.lineDashPattern = lineDashPattern
    
    return layer
}()
///进度条
private lazy var progressLayer: CAShapeLayer = {
    let layer = CAShapeLayer()
    layer.frame         = bounds
    layer.fillColor     = UIColor.clear.cgColor
    layer.lineWidth     = lineWidth
    layer.strokeColor   = progressColor.cgColor
    layer.path          = path.cgPath
    layer.strokeEnd     = 0
    layer.lineDashPattern = lineDashPattern
    
    return layer
}() 

添加和设置进度和之前一样，我就不一一赘述

下面就说些我封装的进度条使用方法

1、通过设置 type 类型，添加各种类型的进度条

let newView = HJProgress(frame: CGRect(x: 10, y: 110, width: 120, height: 120))
newView.type = .circle

2、通过设置HJData() 设置各种参数，添加数据之后，才会出现进度条

var data = HJData()
data.realWidth = 120
data.lineWidth = 2
newView.data = data

3、通过设置progress 加载进度条

具体例子看我上面的 demo 吧，欢迎来提建议