iOS弧形渐变进度条原理实现分析

我们先来看下效果图的展示，下面这个图是根据效果图，其中不好处理的就是颜色的进度渐变
Demo下载地址
下面我们直接开始分析实现思路，

GradientTest.gif

看完上面的图片，我们应该清楚自己要做什么，肯定是要有一个圆弧的路径的，接下来我们来实现这种效果
顺便解决一个小问题，demo中控制台有错误打印输出，是因为我们在drawrect 外部调用了 绘图的方法，也就是
[[UIColor color] setStroke]; 注释掉这句话即可解决，这句话在使用draw 方法时才可调用，系统出错就是因为不知道图形展示使用画布，还是我们自己绘制，所以会提示错误

1. 我们需要先预先定义几个宏定义帮助我们转换

#define degressToRadius(ang) (M_PI*(ang)/180.0f) //把角度转换成PI的方式
#define PROGRESS_WIDTH 80 // 圆直径
#define PROGRESS_LINE_WIDTH 4 //弧线的宽度
#define RYUIColorWithRGB(r,g,b) [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:1]

2. 我们先绘制线的颜色

//1. 添加绘制图层画笔颜色 ，如不添加，可能看不到图形
[[UIColor redColor] setStroke]; // stroke 画线的意思，也就是画笔的笔头颜色

//2.使用UIBezierPath 的类方法绘制圆弧，中心我们选择当前窗口的中心
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2) radius:(frame.size.width-PROGRESS_LINE_WIDTH)/2-5 startAngle:degressToRadius(-240) endAngle:degressToRadius(60) clockwise:YES];

注意几个参数的使用：
  ArcCenter:  视图中心-也就是我们所说的圆心坐标
  radius： 半径大小
  startAng: 圆弧起始弧度
  endAngle: 圆弧结束弧度
  clockwise: 顺时针或者逆时针  YES : 顺时针  NO 表示逆时针绘制
  我们在这里使用顺时针，想一下你就明白了，符合大众的想法
  
//3. 接下来我们要使用一个遮罩图层CAShapeLayer 这个是形状图层
我们在上面声明一个CAShapeLayer * _progressLayer;
    //初始化图层
    _progressLayer = [CAShapeLayer layer];
    //指定frame 大小
    _progressLayer.frame = self.bounds;
    //fillColor  图层填充颜色 
    _progressLayer.fillColor =  [[UIColor clearColor] CGColor];
    //画笔颜色 ，前面我们使用了 UIColor ，是在不使用 形状图层的时候，由 path 和 stroke 就可以绘制
    如果我们使用了这一句，就把 上面的 [[UIColor color] setStroke];注释掉
    _progressLayer.strokeColor=[UIColor redColor].CGColor;   
    /*
        kCALineCapButt  线头连接正常结束
        kCALineCapRound  线头形状以圆弧结束
        kCALineCapSquare  结束时稍微带点圆角， 
        以上方法大家可以自行测试
    */
    _progressLayer.lineCap = kCALineCapRound;
    // 指定线条宽度
    _progressLayer.lineWidth = PROGRESS_LINE_WIDTH+5;
    //到这里我们的弧线已经制作完成
    [self.layer addSublayer:_progressLayer];
 

我们看下效果图如何？

GradientTest2.gif

3. 是不是很关心动画是根据什么进行动画操作的，我们先加入系统为我们提供的CoreAnimation 框架
   实现动态的动画代码如下，我是改变的

CAShapeLayer 一个strokeEnd 属性 改值变化范围是0-1

//增加动画
CABasicAnimation *pathAnimation=[CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 6;
    pathAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    pathAnimation.fromValue=[NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue=[NSNumber numberWithFloat:1.0f];
     pathAnimation.autoreverses=NO;
   pathAnimation.repeatCount = INFINITY;
   _progressLayer.path=path.CGPath;
 [_progressLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"];

4. 我们现在是要运行起来，接下来我们添加渐变图层

 //渐变图层
    CALayer * grain = [CALayer layer];
    我们是两种渐变色，所以我么要用一个grain 对象将两个渐变图层放到一起，
    CAGradientLayer *gradientLayer =  [CAGradientLayer layer];
    
    gradientLayer.frame = CGRectMake(0, 0, self.bounds.size.width/2, self.bounds.size.height);
   
    [gradientLayer setColors:[NSArray arrayWithObjects:(id)[[UIColor blackColor] CGColor],(id)[RYUIColorWithRGB(142, 66, 60) CGColor], nil]];
    
    [gradientLayer setLocations:@[@0.1,@0.9]];
    
    [gradientLayer setStartPoint:CGPointMake(0.05, 1)];

    [gradientLayer setEndPoint:CGPointMake(0.9, 0)];
    [grain addSublayer:gradientLayer];   
     CAGradientLayer * gradientLayer1 = [CAGradientLayer layer];
    gradientLayer1.frame = CGRectMake(self.bounds.size.width/2-10, 0, self.bounds.size.width/2+10, self.bounds.size.height);
    
   [gradientLayer1 setColors:[NSArray arrayWithObjects:(id)[RYUIColorWithRGB(142, 66, 60) CGColor],(id)[[UIColor redColor] CGColor], nil]];
    [gradientLayer1 setLocations:@[@0.3,@1]];
    
    [gradientLayer1 setStartPoint:CGPointMake(0.9, 0.05)];
    
    [gradientLayer1 setEndPoint:CGPointMake(1, 1)];
    [grain addSublayer:gradientLayer1];
     //用progressLayer来截取渐变层 遮罩 
    [grain setMask:_progressLayer]; 
    [self.layer addSublayer:grain];

5. 我们看下注释 setMask 方法会看到什么效果

2x.png

很多人很奇怪，为什么多了一条线，因为我们是将渐变图层分为两个绘制的，因为中间过渡色太大，无法一个图层实现美工想要的渐变图层，再者说是PM要求的，之前使用一种图层渐变不好调节颜色渐变度，最终想了一下用两个渐变趋实现，中间的分割线一定要圆滑的过过渡过去，不然在显示也会出现切割线，
渐变图层的坐标如下图

2x.png

我们左侧的渐变实现的是斜形渐变，右侧采用了垂直渐变，这个要给予我们最后想要的效果，{0，0}- {1，1} 这个渐变是从左上角到右下角的一个渐变， 我们如果要看到渐变效果，需要设置localtions ，这里面是一个数组，比如我们设置 @[0.5],所得到的效果是什么，就是渐变会给予 0.5 的位置看是渐变，同时渐变图层还有两个属性
setStartPoint、setEndPoint设置渐变开始的坐标点和结束的坐标点，同样都是围绕上面的坐标轴进行的

---

6. 接下来我们要说一下这个重要的属性，设置遮罩图层
   [grain setMask:_progressLayer];

我的理解是这样子的，grain 这个图层相当于被遮罩层，我们所创建的_progressLayer 相当于遮罩层，那么两者怎么实现切割效果呢，开始我也不是很懂，所以我就说一个很简答的原理，
我们创建的grain 图层相当于投影仪的桌布，在投影仪和桌布的中间我们放入一个形状是不是就可以在桌布上看到这个投射的影子，具体的原理还要设计到物理方面的成像原理，这里不说那么多没用的，明白意思就行了，其实我们看到的就是 _progressLayer 在投影仪桌布上的垂直方向的投影，这样想必原理已经清楚了，也就没什么了。

最后我们也附上下载的demo地址：环形渐变进度条 很多新手都是希望有demo更直观，在这里都分享一下，
在这里说一下，demo中的控制台错误，看最上面的解决办法，
在iOS学习过程中一起分享学习，这也是我第一次投稿，很多格式不是很懂，大神有什么关于GPU和CPU优化的意见尽管留言，以便大家共同学习，我关注的其实是动画的渲染问题，不是很了解，希望大神给科普一下。
最后留下联系方式：[email protected], 问题QQ群交流也行：375940898