iOS 百分比圓環曲線swift4.0實現

標籤：point   uiview   src   class   erp   anim   fill   duration   .com   

 

 

 

 

import UIKit

 

class XZCircleView: UIView {

 

    let backGroundLayer = CAShapeLayer.init()///背景白色細曲線

    let progressLayer = CAShapeLayer.init()///進度真是數值曲線

    var endVale = 0.00

    var progressColor = UIColor.white.cgColor

    var backColor = "FFFFFF".toUiColorWithAlpha(0.2).cgColor

    

    

    // Only override draw() if you perform custom drawing.

    // An empty implementation adversely affects performance during animation.

    override func draw(_ rect: CGRect) {

        // Drawing code

        self.initTheView(rect)

    }

 

    func initTheView(_ rect : CGRect) {

        

        // 設定百分比動畫顯示

//設定白色背景線

        self.backGroundLayer.frame = rect

        

        self.backGroundLayer.fillColor = UIColor.clear.cgColor

        self.backGroundLayer.lineWidth = 1

        let backPath = UIBezierPath.init(arcCenter: CGPoint.init(x: self.p_centerX, y: self.p_centerY), radius: self.frame.size.width / 2.00, startAngle: CGFloat(-Double.pi * 7.0 / 6.0 ), endAngle: CGFloat(Double.pi / 6.0), clockwise: true)

        

        self.backGroundLayer.path = backPath.cgPath

        self.backGroundLayer.strokeStart = 0

        self.backGroundLayer.strokeEnd = 1

        self.backGroundLayer.strokeColor = backColor

        self.layer.addSublayer(self.backGroundLayer)

        

        

        self.backGroundLayer.fillColor = UIColor.clear.cgColor

        self.backGroundLayer.lineWidth = 1

 

 

//設定真實進度曲線

        self.progressLayer.frame = rect

        self.progressLayer.fillColor = UIColor.clear.cgColor

        self.progressLayer.lineWidth = 12

        self.progressLayer.lineCap = kCALineCapRound

        

        let progressPath = UIBezierPath.init(arcCenter: CGPoint.init(x: self.p_centerX, y: self.p_centerY), radius: self.frame.size.width / 2.00, startAngle: CGFloat(-Double.pi * 7.0 / 6.0 ), endAngle: CGFloat(endVale), clockwise: true)

        self.progressLayer.path = progressPath.cgPath

        self.progressLayer.strokeStart = 0

        self.progressLayer.strokeEnd = 1

        self.progressLayer.strokeColor = progressColor

        self.layer.addSublayer(self.progressLayer)

//添加動畫

        let pathAnimation = CABasicAnimation.init(keyPath: "strokeEnd")

        pathAnimation.duration = 0.5

        pathAnimation.fromValue = 0

        pathAnimation.toValue = 1

        pathAnimation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseOut)

        self.progressLayer.add(pathAnimation, forKey: "strokeEnd")

    }

 

}

iOS 百分比圓環曲線swift4.0實現