ios 做一个完整的渐变进度条

效果图：

gif.gif

注意点：
1、在设置贝塞尔曲线绘制圆环的时候，半径必须减去线宽的一半。
2、蒙版的使用。蒙版与蒙版盖住的layer，最终显示的蒙版的颜色与形状，所以蒙版颜色fillColor设置为透明色。

第一步，绘制背景圆环。

1.png

绘制贝塞尔曲线的时候需要注意默认从0 开始，参考坐标系。贴一张图

20160923141208631.png

需要注意的是，绘制圆环，填充色设置为透明，描边色需要设置。贝塞尔曲线的开始的位置为 -0.5 *M_PI，结束位置为 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

根据需要选择轴向渐变还是径向渐变。

 //渐变色，加蒙版，显示的蒙版的区域
    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 地址：渐变圆环进度