画弧形可变色进度条

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface McArcView : UIView

//圆环圆心在本页面的位置  默认中心
@property (nonatomic, assign) CGPoint point;
//圆环宽度 默认15
@property (nonatomic, assign) CGFloat arcWidth;
//起始位置 范围 0~2  X轴正方形为0 一圈是2
@property (nonatomic, assign) CGFloat startAngle;
//结束位置 范围 0~2  X轴正方形为0 一圈是2
@property (nonatomic, assign) CGFloat endAngle;
//yes:顺时针  no：逆时针
@property (nonatomic, assign)BOOL clockwise;
//线头方式
@property (nonatomic, assign)CAShapeLayerLineCap lineCapStyle;

//圆环背景色
@property (nonatomic, strong) UIColor *arcBgColor;
//圆环进度色(渐变)
@property (nonatomic, strong) UIColor *arcProStartColor;
//圆环进度色(渐变)
@property (nonatomic, strong) UIColor *arcProMidColor;
//圆环进度色(渐变)
@property (nonatomic, strong) UIColor *arcProEndColor;




//跳到进度
@property (nonatomic, assign) CGFloat progress;



@end

NS_ASSUME_NONNULL_END

#import "McArcView.h"

@interface McArcView ()
@property (nonatomic, strong)CAGradientLayer *gradientLayer;
@property (nonatomic, strong) CAShapeLayer *shapeLayer;//进度圆环

@end

@implementation McArcView

-(instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    if (self) {
        _point = CGPointMake(frame.size.width/2, frame.size.height/2);
        _arcWidth = 15;
        _startAngle = 0;
        _endAngle = 1;
        _clockwise = YES;
        _lineCapStyle = kCALineCapRound;
        _arcBgColor = [UIColor grayColor];
        _arcProStartColor = [UIColor redColor];
        _arcProMidColor = [UIColor yellowColor];
        _arcProEndColor = [UIColor blueColor];
        _progress = 0;
    }
    return self;
}


-(void)drawRect:(CGRect)rect{
    
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:_point radius:(rect.size.width - _arcWidth)/2 startAngle:_startAngle*M_PI endAngle:_endAngle*M_PI clockwise:_clockwise];
    
    //背景圆环
    CAShapeLayer *bgLayer = [CAShapeLayer layer];
    bgLayer.frame = rect;
    bgLayer.fillColor = [UIColor clearColor].CGColor;//填充色 -  透明色
    bgLayer.lineWidth = _arcWidth;//环的宽度
    bgLayer.strokeColor = _arcBgColor.CGColor;//线条颜色
    bgLayer.strokeStart = 0;
    bgLayer.strokeEnd = 1;
    bgLayer.lineCap = _lineCapStyle;//圆角
    bgLayer.path = circlePath.CGPath;
    [self.layer addSublayer:bgLayer];
    
    
    //进度环
    _shapeLayer = [CAShapeLayer layer];
    _shapeLayer.frame = rect;
    _shapeLayer.fillColor = [UIColor clearColor].CGColor;
    _shapeLayer.lineWidth = _arcWidth;
    _shapeLayer.strokeColor = _arcProStartColor.CGColor;
    _shapeLayer.strokeStart = 0;
    _shapeLayer.strokeEnd = _progress;
    _shapeLayer.lineCap = _lineCapStyle;
    _shapeLayer.path = circlePath.CGPath;
    [self.layer addSublayer:_shapeLayer];
    
    //gradientLayer 上左边从下到上放一个渐变色 右边 从上到下放一个就按变色  最上面为中间值   中间颜色 和 起始颜色 还有结束颜色都从创建的时候传过来
    
    self.gradientLayer = [CAGradientLayer layer];
    
    //左边的渐变图层
    CAGradientLayer *leftGradientLayer = [CAGradientLayer layer];
    leftGradientLayer.frame = CGRectMake(0, 0, rect.size.width/2, rect.size.height);
    [leftGradientLayer setColors:[NSArray arrayWithObjects:(id)_arcProStartColor.CGColor, (id)_arcProMidColor.CGColor, nil]];
    [leftGradientLayer setLocations:@[@0,@0.9]];
    [leftGradientLayer setStartPoint:CGPointMake(0, 1)];
    [leftGradientLayer setEndPoint:CGPointMake(1, 0)];
    [_gradientLayer addSublayer:leftGradientLayer];
    
    CAGradientLayer *rightGradientLayer = [CAGradientLayer layer];
    rightGradientLayer.frame = CGRectMake(rect.size.width/2, 0, rect.size.width/2, rect.size.height);
    [rightGradientLayer setColors:[NSArray arrayWithObjects:(id)_arcProMidColor.CGColor, (id)_arcProEndColor.CGColor, nil]];
    [rightGradientLayer setLocations:@[@0.1, @1]];
    [rightGradientLayer setStartPoint:CGPointMake(0.5, 0)];
    [rightGradientLayer setEndPoint:CGPointMake(0.5, 1)];
    [_gradientLayer addSublayer:rightGradientLayer];
    
    [self.gradientLayer setMask:_shapeLayer];
    
    self.gradientLayer.frame = rect;
    //渐变图层映射到进度条路径上面
    
    [self.layer addSublayer:self.gradientLayer];
}


-(void)setProgress:(CGFloat)progress{
    _progress = progress;
    

    [self setNeedsDisplay];
}





@end