前言：

進(jìn)了新公司，發(fā)現(xiàn)代碼全都是第三方拼接的。雖然實(shí)現(xiàn)了功能，但定制很麻煩。以前單色的進(jìn)度條，實(shí)現(xiàn)
簡單，現(xiàn)在需要做到顏色漸變，于是就自己寫了個(gè)控件。（實(shí)在不喜歡用第三方，除非必要的）。

實(shí)現(xiàn)原理：

其實(shí)原理很簡單，只是在單色的基礎(chǔ)上，把圓環(huán)分成多個(gè)小段，然后逐個(gè)分配顏色。

拓展實(shí)現(xiàn)：

控件添加了文字進(jìn)度的顯示；
控件還增加了從無到有的一個(gè)動(dòng)畫效果，其實(shí)也就是不斷繪圖的過程。

代碼實(shí)現(xiàn)：swift

/**********************************/
/*********  漸變環(huán)形進(jìn)度條  **********/
/**********************************/

class XJJGCView: UIView {

/**
 ***顏色數(shù)組
 *個(gè)數(shù)為1時(shí)，單色
 *個(gè)數(shù)為2時(shí)，雙色漸變
 *個(gè)數(shù)為3時(shí)，三色漸變，兩個(gè)雙色漸變
 *以此類推
 */
var colors: [UIColor]?

//小數(shù):0.2 -- 真實(shí)百分比
var progress: CGFloat? {
    didSet {
        guard let pro = progress else {return}
        self.drawWithProgress(pro)
    }
}

var lineWidth: CGFloat = 10//線寬度
var backColor: UIColor?//背景圓環(huán)顏色
var startAngle: CGFloat = 0//開始角度，默認(rèn)：0，可選值：0 ~ pi_2
var angleCount: Int = 100//圓弧個(gè)數(shù)，整個(gè)圓劃分為多少份

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

var isAnimated: Bool = true//是否需要?jiǎng)赢?，默認(rèn)：true

private let pi_2 = CGFloat(Double.pi * 2)
private let per_progress: CGFloat = 0.0203//每一幀的變化
//小數(shù):0.2 -- 動(dòng)畫百分比
private var an_progress: CGFloat = 0//累計(jì)變化
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//一秒完成的幀數(shù)
        }else {
            self.playLink.frameInterval = 1//調(diào)用一次 有多少幀   為1時(shí)，每秒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()
}

//找到圓弧上直線經(jīng)過的點(diǎn)，并返回圓心到這一點(diǎn)所在直線的任意一點(diǎn)，通過scale實(shí)現(xiàn)
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)
}

//畫圓環(huán)
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..<angleCount {
        
        autoreleasepool {
            let en: CGFloat = start + anglePer * CGFloat(i + 1)
            let pro: CGFloat = CGFloat(i) / CGFloat(angleCount)
    
            context.setLineWidth(lineWidth)
            if pro < an_progress {//漸變圓弧
                let pro_color: CGFloat = (anglePer * CGFloat(i + 1)) / (an_progress * pi_2)
                if let color = self.getCurrentColor(pro_color) {
                    context.setStrokeColor(color.cgColor)
                }else {
                    context.setStrokeColor(#colorLiteral(red: 0.9254902005, green: 0.2352941185, blue: 0.1019607857, alpha: 1))
                }
            }else {//固定圓弧
                if let color = self.backColor {
                    context.setStrokeColor(color.cgColor)
                }else {
                    context.setStrokeColor(#colorLiteral(red: 0.501960814, green: 0.501960814, blue: 0.501960814, alpha: 1))
                }
            }
            context.addArc(center: center, radius: r, startAngle: currentAngle, endAngle: en, clockwise: false)
    
            context.drawPath(using: .stroke)
            
            currentAngle = en - 0.01    //為了去掉縫隙，前移一點(diǎn)位移
        }
    }
    
    if self.isEndDraw {
        self.creatPoint(context, start, end, center, r)
        self.isEndDraw = false
    }
}

//起始點(diǎn)和結(jié)束點(diǎn)
private func creatPoint(_ context: CGContext,
                        _ start: CGFloat,
                        _ end: CGFloat,
                        _ center: CGPoint,
                        _ radius: CGFloat) {
    let startP: CGPoint = self.findPoint(center, radius, start, 0, 1)
    let endP: CGPoint = self.findPoint(center, radius, end, 0, 1)
    let rP: CGFloat = lineWidth / 2 - 1
    //start point
    self.creatStartPoint(context, startP, rP)
    
    //end point
    self.creatEndPoint(context, endP, rP)
}

private func creatStartPoint(_ context: CGContext, _ center: CGPoint, _ radius: CGFloat) {
    context.setLineWidth(1)
    if let color = colors?.first {
        context.setStrokeColor(color.cgColor)
        context.setFillColor(color.cgColor)
    }else {
        context.setStrokeColor(#colorLiteral(red: 0.9254902005, green: 0.2352941185, blue: 0.1019607857, alpha: 1))
        context.setFillColor(#colorLiteral(red: 0.9254902005, green: 0.2352941185, blue: 0.1019607857, alpha: 1))
    }
    context.addArc(center: center, radius: radius, startAngle: 0, endAngle: pi_2, clockwise: true)
    context.drawPath(using: .fillStroke)
}

private func creatEndPoint(_ context: CGContext, _ center: CGPoint, _ radius: CGFloat) {
    context.setLineWidth(1)
    if let color = colors?.last {
        context.setStrokeColor(color.cgColor)
        context.setFillColor(color.cgColor)
    }else {
        context.setStrokeColor(#colorLiteral(red: 0.9254902005, green: 0.2352941185, blue: 0.1019607857, alpha: 1))
        context.setFillColor(#colorLiteral(red: 0.9254902005, green: 0.2352941185, blue: 0.1019607857, alpha: 1))
    }
    context.addArc(center: center, radius: radius + 0.5, startAngle: 0, endAngle: pi_2, clockwise: true)
    context.drawPath(using: .fillStroke)
}

//寫文字
private func creatText(_ context: CGContext) {
    let text = String(format: "%.2f%%", an_progress * 100)
    let style = NSMutableParagraphStyle()
    style.lineBreakMode = .byWordWrapping
    style.alignment = .center
    
    /*之前的寫法
     let dic: [String : Any] = [
     NSFontAttributeName: textFont,
     NSForegroundColorAttributeName: textColor,
     NSParagraphStyleAttributeName: style,
     ]
     */
    
    let dic: [NSAttributedStringKey : Any] = [
        .font: textFont,
        .foregroundColor: textColor,
        .paragraphStyle: style,
        ]
    let size = text.size(withAttributes: dic)
    let rect = CGRect(x: self.bounds.width / 2 - size.width / 2,
                      y: self.bounds.height / 2 - size.height / 2,
                      width: size.width,
                      height: size.height)
    text.draw(in: rect, withAttributes: dic)
}

//獲取顏色
private func getCurrentColor(_ current: CGFloat) -> 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..<cs.count - 1 {
                startColor = cs[i]
                endColor = cs[i + 1]
                if current > (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
}

}