iOS 渐变色实现，渐变色圆环，圆环进度条

CAGradientLayer图层能够经过设置mask来给视图添加渐变效果 CAGradientLayer主要须要设置一下几个参数 colors:传入须要渐变的颜色 例如 self.gradientLayer.colors = @[(__bridge id)[UIColor orangeColor].CGColor,(__bridge id)[UIColor orangeColor].CGColor]; 须要注意的Color格式 startPoint:渐变开始的位置 self.gradientLayer.startPoint = CGPointMake(0, 0); endPoint:渐变结束的位置 self.gradientLayer.endPoint = CGPointMake(1, 1); 我画一个坐标你马上就明白了，中间是0.5

(0，0) -------- (1，0)
           |        |
           |   0.5  |
           |        |
     (0，1) -------- (1，1)

CAShapeLayer 能够传入UIBezierPath曲线，这样咱们能够经过UIBezierPath绘制一个圆环，经过CAGradientLayer来实现渐变效果 fillColor：填充颜色 strokeColor：绘制颜色 lineWidth：线宽 path：绘图路径（CGPath）

关于用UIBezierPath画圆 圆环 UIBezierPath bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width0.5, self.bounds.size.height*0.5) radius:self.bounds.size.width/2 - 20 startAngle:0 endAngle:M_PI clockwise:YES]; 这里须要注意传入的是弧度而不是角度 弧度转角度能够自行查阅资料 弧度在坐标系中的位置我这里大体画一下，方便观察开始角度和结束角度

-M_PI_2(M_PI+M_PI_2)
                    ∧
                    |
                    |
                    |
                    |
       M_PI---------|----------＞  0
                    |
                    |
                    |
                    |
                  M_PI_2

//给圆环添加渐变效果

self.shapeLayer = [[CAShapeLayer alloc] init];
    self.shapeLayer.frame = self.bounds;
    self.shapeLayer.fillColor = [UIColor clearColor].CGColor;
    self.shapeLayer.strokeColor = [UIColor redColor].CGColor;
    self.shapeLayer.lineWidth = 10.f;
    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width*0.5, self.bounds.size.height*0.5) radius:self.bounds.size.width/2 - 20 startAngle:0 endAngle:M_PI clockwise:YES];
    self.shapeLayer.path = bezierPath.CGPath;

    //建立渐变层
    self.gradientLayer = [[CAGradientLayer alloc] init];
    self.gradientLayer.frame = self.bounds;
    self.gradientLayer.colors = @[(__bridge id)[UIColor orangeColor].CGColor,(__bridge id)[UIColor orangeColor].CGColor];
    self.gradientLayer.startPoint = CGPointMake(0, 0);
    self.gradientLayer.endPoint = CGPointMake(1, 1);

    self.gradientLayer.mask = self.shapeLayer;
    [self.layer addSublayer:self.gradientLayer];

更多内容参见demo：https://github.com/qqcc1388/TYGradientRingDemo

转载请标注来源：http://www.cnblogs.com/qqcc1388/p/8670620.html