效果圖：
gif.gif
注意點：
1、在設置貝塞爾曲線繪制圓環(huán)的時候铺呵，半徑必須減去線寬的一半。
2隧熙、蒙版的使用片挂。蒙版與蒙版蓋住的layer，最終顯示的蒙版的顏色與形狀，所以蒙版顏色fillColor設置為透明色音念。
第一步沪饺，繪制背景圓環(huán)。
1.png
繪制貝塞爾曲線的時候需要注意默認從0 開始闷愤，參考坐標系整葡。貼一張圖
20160923141208631.png
需要注意的是，繪制圓環(huán)讥脐，填充色設置為透明遭居，描邊色需要設置。貝塞爾曲線的開始的位置為 -0.5 *M_PI旬渠，結(jié)束位置為 1.5 *M_PI俱萍；
//背景灰色
CAShapeLayer *shapeLayer =[[CAShapeLayer alloc]init];
shapeLayer.frame = CGRectMake(0, 0, rect.size.width, rect.size.width);
shapeLayer.lineWidth = _lineWidth; //線寬
shapeLayer.fillColor =[UIColor clearColor].CGColor; //填充顏色
shapeLayer.strokeColor = LBColor(50, 50, 50, 1).CGColor; //描邊顏色
CGPoint center = CGPointMake((rect.size.width )/2, (rect.size.width)/2);
UIBezierPath *bezierPath =[UIBezierPath bezierPathWithArcCenter:center radius:(rect.size.width- _lineWidth)/2 startAngle:-0.5 *M_PI endAngle:1.5 *M_PI clockwise:YES]; //一定要減去線寬的一半
shapeLayer.path = bezierPath.CGPath;
[self.layer addSublayer:shapeLayer];
第二步繪制漸變色
2.png
如上面，是從上到下的藍色漸變告丢。
關于梯度漸變引用一張圖
梯度.png
根據(jù)需要選擇軸向漸變還是徑向漸變枪蘑。
//漸變色，加蒙版岖免，顯示的蒙版的區(qū)域
CAGradientLayer *gradientLayer =[[CAGradientLayer alloc]init];
gradientLayer.frame = self.bounds;
gradientLayer.colors = @[(id)[UIColor hexStringToColor:@"#5F98FC"].CGColor,(id)[UIColor hexStringToColor:@"#47BFFC"].CGColor];
gradientLayer.startPoint = CGPointMake(0, 0);
gradientLayer.endPoint = CGPointMake(0, 1); //徑向漸變
[self.layer addSublayer:gradientLayer];
為需要添加蒙版的layer添加蒙版
self.foreLayer = [CAShapeLayer layer];
self.foreLayer.frame = self.bounds;
self.foreLayer.fillColor =[UIColor clearColor].CGColor;
self.foreLayer.lineWidth = self.lineWidth;
self.foreLayer.strokeColor = [UIColor redColor].CGColor; //顏色沒用
self.foreLayer.strokeEnd = 0;
self.foreLayer.lineCap = kCALineCapRound;
self.foreLayer.path = bezierPath.CGPath;
gradientLayer.mask = self.foreLayer;
因為貝塞爾曲線開始的位置是-0.5 *M_PI腥寇，strokeEnd 決定了描邊的進度。
demo 地址：漸變圓環(huán)進度
