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