渐变环形进度条

前言：

进了新公司，发现代码全都是第三方拼接的。虽然实现了功能，但定制很麻烦。以前单色的进度条，实现
简单，现在需要做到颜色渐变，于是就自己写了个控件。（实在不喜欢用第三方，除非必要的）。

实现原理：

其实原理很简单，只是在单色的基础上，把圆环分成多个小段，然后逐个分配颜色。

拓展实现：

控件添加了文字进度的显示；
控件还增加了从无到有的一个动画效果，其实也就是不断绘图的过程。

代码实现：swift

/**********************************/
/*********  渐变环形进度条  **********/
/**********************************/

class XJJGCView: UIView {

/**
 ***颜色数组
 *个数为1时，单色
 *个数为2时，双色渐变
 *个数为3时，三色渐变，两个双色渐变
 *以此类推
 */
var colors: [UIColor]?

//小数:0.2 -- 真实百分比
var progress: CGFloat? {
    didSet {
        guard let pro = progress else {return}
        self.drawWithProgress(pro)
    }
}

var lineWidth: CGFloat = 10//线宽度
var backColor: UIColor?//背景圆环颜色
var startAngle: CGFloat = 0//开始角度，默认：0，可选值：0 ~ pi_2
var angleCount: Int = 100//圆弧个数，整个圆划分为多少份

//文字属性
var textFont: UIFont!
var textColor: UIColor!

var isAnimated: Bool = true//是否需要动画，默认：true

private let pi_2 = CGFloat(Double.pi * 2)
private let per_progress: CGFloat = 0.0203//每一帧的变化
//小数:0.2 -- 动画百分比
private var an_progress: CGFloat = 0//累计变化
private var isEndDraw: Bool = false//是否画完圆弧

override init(frame: CGRect) {
    super.init(frame: frame)
    self.initUI()
}

required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}

override func layoutSubviews() {
    super.layoutSubviews()
    self.setSubviewsLayout()
}

private var playLink: CADisplayLink!

private func initUI() {
    self.backgroundColor = UIColor.clear
    self.textFont = UIFont.boldSystemFont(ofSize: 13)
    self.textColor = #colorLiteral(red: 0.2549019754, green: 0.2745098174, blue: 0.3019607961, alpha: 1)
}

private func setSubviewsLayout() {
    
}

private func drawWithProgress(_ pro: CGFloat) {
    guard pro > 0, pro <= 1 else {return}
    
    self.an_progress = 0
    if isAnimated {
        self.playLink = CADisplayLink(target: self, selector: #selector(timeCounter))
        self.playLink.add(to: RunLoop.main, forMode: .defaultRunLoopMode)
        if #available(iOS 10.0, *) {
            self.playLink.preferredFramesPerSecond = 50//一秒完成的帧数
        }else {
            self.playLink.frameInterval = 1//调用一次 有多少帧   为1时，每秒60次
        }
    }else {
        self.an_progress = pro
        self.isEndDraw = true
        self.setNeedsDisplay()
    }
}

@objc func timeCounter(_ link: CADisplayLink) {
    if self.an_progress >= (self.progress ?? 0) {
        self.finished()
    }else {
        self.an_progress += self.per_progress
        self.setNeedsDisplay()
    }
}

private func finished() {
    self.an_progress = self.progress ?? 0
    self.isEndDraw = true
    if self.playLink != nil {
        self.playLink.invalidate()
        self.playLink = nil
    }
    self.setNeedsDisplay()
}

//找到圆弧上直线经过的点，并返回圆心到这一点所在直线的任意一点，通过scale实现
private func findPoint(_ center: CGPoint,
                       _ radius: CGFloat,
                       _ startAngle: CGFloat,
                       _ moveAngle: CGFloat,
                       _ scale: CGFloat) -> CGPoint {
    let angle: CGFloat = startAngle + moveAngle / 2
    let o_x: CGFloat = radius * cos(angle)
    let o_y: CGFloat = radius * sin(angle)
    let c_x: CGFloat = center.x + o_x * scale
    let c_y: CGFloat = center.y + o_y * scale
    
    return CGPoint(x: c_x, y: c_y)
}

override func draw(_ rect: CGRect) {
    super.draw(rect)
    guard let current = UIGraphicsGetCurrentContext() else {return}
    
    current.clear(rect)
    current.setFillColor(UIColor.clear.cgColor)
    current.fill(rect)
    
    self.creatGradient(current)
    self.creatText(current)
}

//画圆环
private func creatGradient(_ context: CGContext) {
    
    let start: CGFloat = startAngle
    let end: CGFloat = start + (progress ?? 0) * pi_2
    let center: CGPoint = CGPoint(x: self.bounds.width / 2, y: self.bounds.height / 2)
    let r: CGFloat = self.bounds.width / 2 - lineWidth
    let anglePer: CGFloat = pi_2 / CGFloat(angleCount)
    var currentAngle: CGFloat = start
    
    for i in 0.. UIColor? {
    if let cs = colors, cs.count > 0 {
        switch cs.count {
        case 1://单色
            return cs[0]
        case 2://双色
            var r: CGFloat = 0;
            var g: CGFloat = 0;
            var b: CGFloat = 0;
            var a: CGFloat = 0;

            cs[0].getRed(&r, green: &g, blue: &b, alpha: &a)

            var rr: CGFloat = 0;
            var gg: CGFloat = 0;
            var bb: CGFloat = 0;
            var aa: CGFloat = 0;

            cs[1].getRed(&rr, green: &gg, blue: &bb, alpha: &aa)

            return  UIColor(red: current * rr + (1 - current) * r,
                            green: current * gg + (1 - current) * g,
                            blue: current * bb + (1 - current) * b,
                            alpha: current * aa + (1 - current) * a)
        case 3://三色
            var r: CGFloat = 0;
            var g: CGFloat = 0;
            var b: CGFloat = 0;
            var a: CGFloat = 0;

            cs[0].getRed(&r, green: &g, blue: &b, alpha: &a)

            var rr: CGFloat = 0;
            var gg: CGFloat = 0;
            var bb: CGFloat = 0;
            var aa: CGFloat = 0;

            cs[1].getRed(&rr, green: &gg, blue: &bb, alpha: &aa)

            var rrr: CGFloat = 0;
            var ggg: CGFloat = 0;
            var bbb: CGFloat = 0;
            var aaa: CGFloat = 0;

            cs[2].getRed(&rrr, green: &ggg, blue: &bbb, alpha: &aaa)

            if current > 0.5 {
                let cr: CGFloat = (current - 0.5) * 2
                return  UIColor(red: cr * rrr + (1 - cr) * rr,
                                green: cr * ggg + (1 - cr) * gg,
                                blue: cr * bbb + (1 - cr) * bb,
                                alpha: cr * aaa + (1 - cr) * aa)
            }else {
                let cr: CGFloat = current * 2;
                return  UIColor(red: cr * rr + (1 - cr) * r,
                                green: cr * gg + (1 - cr) * g,
                                blue: cr * bb + (1 - cr) * b,
                                alpha: cr * aa + (1 - cr) * a)
            }
        default://多色
            let per: CGFloat = 1 / CGFloat(cs.count - 1)
            var startColor: UIColor = UIColor.clear
            var endColor: UIColor = UIColor.clear
            for i in 0.. (per * CGFloat(i)), current < (per * CGFloat(i + 1)) {
                    var r: CGFloat = 0;
                    var g: CGFloat = 0;
                    var b: CGFloat = 0;
                    var a: CGFloat = 0;
                    
                    startColor.getRed(&r, green: &g, blue: &b, alpha: &a)
                    
                    var rr: CGFloat = 0;
                    var gg: CGFloat = 0;
                    var bb: CGFloat = 0;
                    var aa: CGFloat = 0;
                    
                    endColor.getRed(&rr, green: &gg, blue: &bb, alpha: &aa)
                    
                    let cr: CGFloat = (current - per * CGFloat(i)) * CGFloat(cs.count - 1)
                    return  UIColor(red: cr * rr + (1 - cr) * r,
                                    green: cr * gg + (1 - cr) * g,
                                    blue: cr * bb + (1 - cr) * b,
                                    alpha: cr * aa + (1 - cr) * a)
                }else if current == (per * CGFloat(i + 1)) {
                    return endColor
                }else if current > (per * CGFloat(i + 1)) {
                    if i == cs.count - 2 {
                        return endColor
                    }
                    continue
                }
            }
        }
    }
    
    return nil
}

}