iOS 知识点1--环形颜色渐变进度条3

在iOS 知识点1--环形颜色渐变进度条2中讲解了如何给进度条添加动画。
这一篇中讲一下环形进度条的进度条的渐变色处理处理。版本为v1.1.1进度条demo别下错了。
老规矩，先来段视频看看效果，自己做的gif,有点不是很清晰。

注：视频中添加了动画效果

effect.gif

之前已经进过的这里就不讲了

第一步 渐变色原理（获取两个颜色之间的渐变色）

原理：利用UIColor的方法,分解一个颜色的RGBA即即红、绿、蓝、透明度四个要素之后。再按比例组合两个颜色的四个要素组成一个新的颜色。

- (BOOL)getRed:(nullable CGFloat *)red green:(nullable CGFloat *)green blue:(nullable CGFloat *)blue alpha:(nullable CGFloat *)alpha NS_AVAILABLE_IOS(5_0);
    //用这个方法就能获取一个颜色的4个要素。也就是下方的1，2步。
     //等你获取了开始，结束颜色的这4个要素后，我们就可以进行第3步，用系统的方法：
     + (UIColor *)colorWithRed:(CGFloat)red green:(CGFloat)green blue:(CGFloat)blue alpha:(CGFloat)alpha;

第二步 CircleProgressView中渐变色效果相关属性与方法讲解

/**
 是否开启渐变色模式
 默认为NO
 */
//assign
@property (assign, nonatomic) BOOL isGradientStyle;

/**
 线条(进度条)开始颜色。
 进度条的颜色，默认为白色，可更改。
 */
@property (nonatomic, strong) UIColor *startColor;

/**
 线条(进度条)结束颜色。
 进度条的颜色，默认为蓝色（我喜欢蓝色），可更改。
 */
@property (nonatomic, strong) UIColor *endColor;

这里是相关的初始设置，好吧，实然发现又没什么好讲的了，因为demo注释相当清楚。

/*
     选择了渐变色后，线条颜色就不用管了
     */
    //是否开启渐变色模式
    _isGradientStyle = YES;
    //开始颜色
    _startColor = [UIColor whiteColor];
    //结束颜色
    _endColor   = [UIColor blueColor];

这里只贴部分核心代码，demo里很详细，可以自己下着看

//1
    CGFloat c1[4];
    CGFloat c2[4];
    //2
    [_startColor getRed:&c1[0] green:&c1[1] blue:&c1[2] alpha:&c1[3]];
    [_endColor getRed:&c2[0] green:&c2[1] blue:&c2[2] alpha:&c2[3]];

//当前颜色
    UIColor *currentColor;
    for (NSInteger i = 0; i<self.subdivCount; i++) {
        if (self.isGradientStyle) {
            //获取当前渐变色
            currentColor = [self getGradientColor:i*1.0/self.subdivCount];
            //设置线条颜色
            CGContextSetStrokeColorWithColor(ctx, currentColor.CGColor);
        }
  ……
}

//获取当前颜色
- (UIColor *)getGradientColor:(CGFloat)current{
    /*
     此处讲解一下，线性颜色获取原理
     一个颜色是由R\G\B\A四个要素组成，即由红、绿、蓝、透明度四个元素组成，掌控了这4个要素，你就掌控了这个颜色，所以定义2个float型的4位数组c1,c2用来存储这2个颜色的4个要素。
     然后该如何获取开始与结束颜色的这4个要素呢，不用急，系统已经给我们准备好了方法：
     - (BOOL)getRed:(nullable CGFloat *)red green:(nullable CGFloat *)green blue:(nullable CGFloat *)blue alpha:(nullable CGFloat *)alpha NS_AVAILABLE_IOS(5_0);
     用这个方法就能获取一个颜色的4个要素。也就是下方的1，2步。
     等你获取了开始，结束颜色的这4个要素后，我们就可以进行第3步，用系统的方法：
     + (UIColor *)colorWithRed:(CGFloat)red green:(CGFloat)green blue:(CGFloat)blue alpha:(CGFloat)alpha;
     制造一个在当前进度的开始结束之间的相应颜色出来。哦，什么是当前进度啊，就是方法参数current（0～1）之间。为0时是开始颜色，为1时是结束颜色。
     */
    
    //1
    CGFloat c1[4];
    CGFloat c2[4];
    //2
    [_startColor getRed:&c1[0] green:&c1[1] blue:&c1[2] alpha:&c1[3]];
    [_endColor getRed:&c2[0] green:&c2[1] blue:&c2[2] alpha:&c2[3]];
    
    //3
    return [UIColor colorWithRed:current*c2[0]+(1-current)*c1[0] green:current*c2[1]+(1-current)*c1[1] blue:current*c2[2]+(1-current)*c1[2] alpha:current*c2[3]+(1-current)*c1[3]];
}

结语：

类似加渐变色啊，加文字啊之类的都是小功能，想加的话自己加吧。在这里提醒一下大家，在做这种UIView的时候如果能够不用画图的部分就不要用画图的部分，因为这是很耗资源的。还有类似的代码啊demo什么的，网上一大堆，还是自己找些感兴趣的，需要的尝试写一写，更有利于学习吸收。