一丶原理

先看下效果:

無漸變:

1.png

由2個(gè)圓環(huán),一個(gè)背景灰色圓環(huán)+一個(gè)進(jìn)度圓環(huán);

1.圓環(huán)

CAShapeLayer用來顯示樣式的圖層;

畫圓環(huán)的方式:

利用貝塞爾曲線繪制,添加到CAShapeLayer上:

//弧度＝角度＊3.14再除以180

- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise NS_AVAILABLE_IOS(4_0);

注意

CAShapeLayer的lineCap屬性,設(shè)置線的頭部形狀;

有無形狀+圓形+方形;

/* The cap style used when stroking the path. Options are butt',round'

• and square'. Defaults tobutt'. */

無形狀
 NSString *cons kCALineCapButt;
 圓形
 NSString *const kCALineCapRound;
 方形
 NSString *const kCALineCapSquare; 

2.畫漸變
漸變:

2.png

CAGradientLayer介紹:

漸變用到CAGradientLayer這個(gè)類;給用的api很少,也很簡潔;

/*

顏色數(shù)組锡溯，設(shè)置我們需要過的的顏色，必須是CGColor對象

*/

@property(nullable, copy) NSArray *colors;

/*

顏色開始進(jìn)行過渡的位置

這個(gè)數(shù)組中的元素是NSNumber類型，單調(diào)遞增的祭饭，并且在0——1之間

例如芜茵，如果我們設(shè)置兩個(gè)顏色進(jìn)行過渡，這個(gè)數(shù)組中寫入0.5倡蝙，則第一個(gè)顏色會(huì)在達(dá)到layer一半的時(shí)候開始向第二個(gè)顏色過渡

*/

@property(nullable, copy) NSArray<NSNumber *> *locations;

/*

下面兩個(gè)參數(shù)用于設(shè)置渲染顏色的起點(diǎn)和終點(diǎn) 取值范圍均為0——1

默認(rèn)起點(diǎn)為（0.5 九串，0） 終點(diǎn)為（0.5 ，1）,顏色的過渡范圍就是沿y軸從上向下

*/

@property CGPoint startPoint;

@property CGPoint endPoint;

創(chuàng)建兩個(gè)CAGradientLayer;
右邊采用藍(lán)->黃色漸變;
左邊采用藍(lán)->黃色漸變;
用Layer把2個(gè)層拼接;
需要顯示的部分可以采用mask屬性進(jìn)行設(shè)置;
因?yàn)樾枰獔A環(huán),所以直接
_gradLayer.mask = self.frontShapeLayer;
就實(shí)現(xiàn)漸變圓環(huán);

要點(diǎn):
理論上一個(gè)CAGradientLayer就夠了;提供2個(gè)CAGradientLayer是運(yùn)輸可以設(shè)置3種顏色漸變;

二丶代碼

#import <UIKit/UIKit.h>

@interface ProgressView : UIView

@property (nonatomic, assign) CGFloat progress;
@property (nonatomic, assign,getter=isGradual) BOOL gradual;


/**
 @param gradual 開啟漸變,默認(rèn)關(guān)閉;
 */
- (void)setGradual:(BOOL)gradual;
/**
 @param progress 進(jìn)度 [0,1],默認(rèn)開啟
 */
- (void)setProgress:(CGFloat)progress;

@end

#import "ProgressView.h"

static const CGFloat kLineWidth = 5.0f;
static const CGFloat kFrontLineWidth = 5.0f;
#define kColor_Top [UIColor colorWithRed:34/255.0 green:44/255.0 blue:87/255.0 alpha:1]
#define kColor_Bottom [UIColor colorWithRed:223/255.0 green:157/255.0 blue:16/255.0 alpha:1]
#define kColor_Background [UIColor colorWithRed:225/255.0 green:224/255.0 blue:233/255.0 alpha:1]


@interface ProgressView ()



@property (strong, nonatomic) CAShapeLayer *frontShapeLayer;
@property (strong, nonatomic) CAShapeLayer *backShapeLayer;
@property (strong, nonatomic) UIBezierPath *circleBezierPath;
//漸變用
@property (nonatomic, strong) CAGradientLayer *rightGradLayer;
@property (nonatomic, strong) CAGradientLayer *leftGradLayer;
@property (nonatomic, strong) CALayer *gradLayer;

@end

@implementation ProgressView


-(void)drawRect:(CGRect)rect{
    
    CGFloat kWidth = rect.size.width;
    CGFloat kHeight = rect.size.height;
    
    if (!self.circleBezierPath){
        self.circleBezierPath = ({
            CGPoint pCenter = CGPointMake(kWidth * 0.5, kHeight * 0.5);
            CGFloat radius = MIN(kWidth, kHeight);
            radius = radius - kFrontLineWidth;
            UIBezierPath *circlePath = [UIBezierPath bezierPath];
            [circlePath addArcWithCenter:pCenter radius:radius * 0.5 startAngle:270 * M_PI / 180 endAngle:269 * M_PI / 180 clockwise:YES];
            [circlePath closePath];
            circlePath;
        });
    }
    if (!self.backShapeLayer) {
        self.backShapeLayer = ({
            CAShapeLayer *shapeLayer = [CAShapeLayer layer];
            shapeLayer.frame = rect;
            shapeLayer.path = self.circleBezierPath.CGPath;
            shapeLayer.fillColor = [UIColor clearColor].CGColor;
            shapeLayer.lineWidth = kLineWidth;
            shapeLayer.strokeColor = [UIColor colorWithWhite:0.886 alpha:1.000].CGColor;
            shapeLayer.lineCap = kCALineCapRound;
            [self.layer addSublayer:shapeLayer];
            shapeLayer;
        });
    }
    
    if (!self.frontShapeLayer){
        self.frontShapeLayer = ({
            CAShapeLayer  *shapeLayer = [CAShapeLayer layer];
            shapeLayer.frame = rect;
            shapeLayer.path = self.circleBezierPath.CGPath;
            shapeLayer.fillColor = [UIColor clearColor].CGColor;
            shapeLayer.lineWidth = kFrontLineWidth;
            shapeLayer.strokeColor = [UIColor colorWithRed:0.906 green:0.769 blue:0.125 alpha:1.000].CGColor;
            shapeLayer;
        });
        if (self.gradual) {
            [self addGradLayerWithRect:rect];
            self.frontShapeLayer.lineCap = kCALineCapRound;
            _gradLayer.mask = self.frontShapeLayer;
            [self.layer addSublayer:_gradLayer];
        }else{
            [self.layer addSublayer:self.frontShapeLayer];
        }
    }
    
     [self startAnimationValue:self.progress];
}
- (void)addGradLayerWithRect:(CGRect)rect{
    CGFloat kHeight = rect.size.height;
    CGRect viewRect = CGRectMake(0, 0, kHeight, kHeight);
    CGPoint centrePoint = CGPointMake(kHeight/2, kHeight/2);
    
    _leftGradLayer = ({
        CAGradientLayer *leftGradLayer = [CAGradientLayer layer];
        leftGradLayer.bounds = CGRectMake(0, 0, kHeight/2, kHeight);
        leftGradLayer.locations = @[@0.1];
        [leftGradLayer setColors:@[(id)kColor_Top.CGColor,(id)kColor_Bottom.CGColor]];
        leftGradLayer.position = CGPointMake(leftGradLayer.bounds.size.width/2, leftGradLayer.bounds.size.height/2);
        leftGradLayer;
    });
    _rightGradLayer = ({
        CAGradientLayer *rightGradLayer = [CAGradientLayer layer];
        rightGradLayer.locations = @[@0.1];
        rightGradLayer.bounds = CGRectMake(kHeight/2, 0, kHeight/2, kHeight);
        [rightGradLayer setColors:@[(id)kColor_Top.CGColor,(id)kColor_Bottom.CGColor]];
        rightGradLayer.position = CGPointMake(rightGradLayer.bounds.size.width/2+kHeight/2, rightGradLayer.bounds.size.height/2);
        rightGradLayer;
    });
    _gradLayer = ({
        CALayer *gradLayer = [CALayer layer];
        gradLayer.bounds = viewRect;
        gradLayer.position = centrePoint;
        gradLayer.backgroundColor = [UIColor clearColor].CGColor;
        gradLayer;
    });
    [_gradLayer addSublayer:_leftGradLayer];
    [_gradLayer addSublayer:_rightGradLayer];
}
- (void)startAnimationValue:(CGFloat)value{
    CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnima.duration = 1.0f;
    pathAnima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    pathAnima.fromValue = [NSNumber numberWithFloat:0.0f];
    pathAnima.toValue = [NSNumber numberWithFloat:value];
    pathAnima.fillMode = kCAFillModeForwards;
    pathAnima.removedOnCompletion = NO;
    [self.frontShapeLayer addAnimation:pathAnima forKey:@"strokeEndAnimation"];
}

- (void)setGradual:(BOOL)gradual{
    _gradual = gradual;
    if (gradual) {
        [self.frontShapeLayer removeFromSuperlayer];
        self.frontShapeLayer = nil;
    }else{
        [_gradLayer removeFromSuperlayer];
        _gradLayer = nil;
        [self.frontShapeLayer removeFromSuperlayer];
        self.frontShapeLayer = nil;
    }
}
- (void)setProgress:(CGFloat)progress{
    NSAssert(progress >= 0 && progress <=1, @"超出范圍");
    _progress = progress;
    [self setNeedsDisplay];
}

@end

三丶代碼地址

https://github.com/k373379320/ZBProgressView