ios 渐变色圆弧进度条

最近项目中有需求提出要写一个渐变色的进度条类似于这样的

D471F6E7-D8A5-4071-B8DE-7D27E9B533C4.png

经过一番折腾做了以下工具类：

@interface CNNProgressView : UIView {
    CAShapeLayer *_trackLayer;
    CAShapeLayer *_progressLayer;
    
    
    UIColor *_strokeColor;
}
-(void)setPercent:(CGFloat)percent animated:(BOOL)animated;

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {        
        _strokeColor = UIColorFromRGB(0x797979);//背景圆环的颜色
        
        _trackLayer=[CAShapeLayer layer];
        _trackLayer.frame = self.bounds;
        [self.layer addSublayer:_trackLayer];
        
        _trackLayer.fillColor=[UIColor clearColor].CGColor;
        _trackLayer.strokeColor = _strokeColor.CGColor;
        _trackLayer.opacity = 1;//背景圆环的背景透明度
        _trackLayer.lineCap = kCALineCapButt;//这个参数主要是调整环型进度条边上是不圆角，主要有三个参数kCALineCapRound(圆角)，kCALineCapButt（直角），kCALineCapSquare（这个参数设了跟直角一样）
        _trackLayer.lineWidth = PROGRESS_LINE_WIDTH;
        
        UIBezierPath *path=[UIBezierPath bezierPathWithArcCenter:CGPointMake(frame.size.width/2, frame.size.height/2) radius:PROGRESS_WIDTH - 4 startAngle:degreesToRadians(-240) endAngle:degreesToRadians(120) clockwise:YES];
        
        _trackLayer.path=[path CGPath];
        
        
        _progressLayer = [CAShapeLayer layer];
        _progressLayer.frame = self.bounds;
        _progressLayer.fillColor = [[UIColor clearColor] CGColor];
        _progressLayer.strokeColor = [UIColor orangeColor].CGColor;//这个一定不能用clearColor，然显示不出来
        _progressLayer.lineCap = kCALineCapButt;
        _progressLayer.lineWidth = PROGRESS_LINE_WIDTH;
        _progressLayer.path =[path CGPath];
        _progressLayer.strokeEnd = 0.0;
        
        CALayer *gradientLayer=[CALayer layer];
        
        CAGradientLayer *gradientLayer1=[CAGradientLayer layer];
        
        gradientLayer1.frame=CGRectMake(0, 0, self.bounds.size.width/2,  self.bounds.size.height);
        [gradientLayer1 setColors:[NSArray arrayWithObjects:(id)UIColorFromRGB(0x62ffff).CGColor,(id)[UIColorFromRGB(0xff5ab2) CGColor], nil]];
        
        //注意，要把这行注释掉，不然进度条位置偏移 显示不出来
        
        //[gradientLayer1 setLocations:@[@0.5,@0.9,@1]];
        [gradientLayer1 setStartPoint:CGPointMake(0.5, 0.2)];//调整颜色比例主要是调这两个参数（0－1之间）
        [gradientLayer1 setEndPoint:CGPointMake(0.5, 0.7)];//调整颜色比例主要是调这两个参数（0－1之间）
        [gradientLayer addSublayer:gradientLayer1];
                
        CAGradientLayer *gradientLayer2=[CAGradientLayer layer];
        
        //如果只需要两种颜色渐变，把下边的gradientLayer2 相关代码去掉就行
        
        gradientLayer2.frame=CGRectMake(self.bounds.size.width/2, 0,self.bounds.size.width/2 , self.bounds.size.height);
        [gradientLayer2 setColors:[NSArray arrayWithObjects:(id)UIColorFromRGB(0x62ffff).CGColor,(id)UIColorFromRGB(0xff5ab2).CGColor, nil]];
        
        //注意，要把这行注释掉，不然进度条位置偏移 显示不出来
        
        //[gradientLayer2 setLocations:@[@0.1,@0.5,@1]];
        [gradientLayer2 setStartPoint:CGPointMake(0.5,0.2)];//调整颜色比例主要是调这两个参数（0－1之间）
        [gradientLayer2 setEndPoint:CGPointMake(0.5, 0.7)];//调整颜色比例主要是调这两个参数（0－1之间）
        
        [gradientLayer addSublayer:gradientLayer2];
        
        [gradientLayer setMask:_progressLayer];
        
        [self.layer addSublayer:gradientLayer];
    }
    return self;
}

-(void)setPercent:(CGFloat)percent animated:(BOOL)animated{
    
    [CATransaction begin];
    [CATransaction setDisableActions:!animated];
    [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
    [CATransaction setAnimationDuration:1];
    _progressLayer.strokeEnd = percent/360.0;
    
    [CATransaction commit];
}