封装一个UILabel圆形边框显示进度

封装了一个UILabel并让它显示圆形的边框，UILabel上面显示百份比，而边框则用Animation绘制到整个圆占指定百分比的点。

这只是我个人想的继承一个UILabel实现的，用到两个CAShapeLayer，第一个Layer的作用是画出灰色的背影圆圈，第二个Layer位置放置在第一个Layer的上面，并设置为红色描绘颜色并描绘到插定的位置，之后实现相应的动画效果即可。

import UIKit

class kCircleLabel: UILabel {

    var percent:Double!

    convenience init(percent per:Double,frame:CGRect) {
        self.init(frame: frame)
        self.percent = per
        createCircle()
    }

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

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    func createCircle() {
        self.textAlignment = NSTextAlignment.Center
        self.text = "\(percent * 100 )%"

        //第一个圆形Layer，边框为灰色的
        let circleLayer:CAShapeLayer = CAShapeLayer()
        circleLayer.lineWidth = 8
        //清除填充的颜色
        circleLayer.fillColor = UIColor.clearColor().CGColor
        //边框的颜色
        circleLayer.strokeColor = UIColor.init(red: CGFloat(220.0 / 255.0 ), green: CGFloat(220.0 / 255.0), blue: CGFloat(220.0 / 255.0), alpha: 1.0).CGColor

        //用贝塞尔曲线画出一个圆
        let circlePath:UIBezierPath = UIBezierPath(ovalInRect: CGRect(x: 0, y: 0, width: self.frame.size.width, height: self.frame.size.height))

        circleLayer.path = circlePath.CGPath
        self.layer.addSublayer(circleLayer)

        //第二个只描绘到特定位置的弧Layer
        let arcLayer:CAShapeLayer = CAShapeLayer()

        //画出特定的弧
        let arcPath:UIBezierPath = UIBezierPath(arcCenter: CGPoint(x: self.frame.size.width / 2, y: self.frame.size.height / 2), radius: self.frame.size.width / 2, startAngle: 0.0, endAngle: CGFloat(360 * percent / 180 * M_PI), clockwise: true)

        arcLayer.path = arcPath.CGPath
        arcLayer.lineWidth = 8
        //清除填充的颜色
        arcLayer.fillColor = UIColor.clearColor().CGColor
        arcLayer.strokeColor = UIColor.redColor().CGColor

        //弧Layer的动画
        let arcAnimation:CABasicAnimation = CABasicAnimation(keyPath: "strokeEnd")
        arcAnimation.fromValue = 0.0
        arcAnimation.toValue = 1.0
        arcAnimation.duration = 1.5
        arcAnimation.removedOnCompletion = false
        arcAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)

        //这是从大到小的动画，适用于整个Layer
        let scaleAnimation:CABasicAnimation = CABasicAnimation(keyPath: "transform.scale")
        scaleAnimation.fromValue = 5.0
        scaleAnimation.toValue = 1.0
        scaleAnimation.duration = 0.5

        arcLayer.addAnimation(arcAnimation, forKey: nil)

        /*let animationGroup:CAAnimationGroup = CAAnimationGroup()
        animationGroup.duration = 1.0
        animationGroup.animations = [ arcAnimation, scaleAnimation]*/

        self.layer.insertSublayer(arcLayer, above : circleLayer)
        self.layer.addAnimation(scaleAnimation, forKey: nil)

    }

    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    //override func drawRect(rect: CGRect) {
        // Drawing code
    //}

}

调用时：

let circleLabel = kCircleLabel(percent: 0.52, frame: CGRect(x:  (self.view.bounds.width - 100.0) / 2, y: 260, width: 100.0, height: 100.0))

self.view.addSubview(circleLabel)

要实现这个效果的关键是要学会怎么使用贝塞尔曲线，并给Layer设置Path。