使用 CALayer 的 mask 画一个渐变三彩圆弧

要实现上面这个三彩圆弧环，可以用三个步骤实现：

1. 使用UIBezierPath画出圆弧上的每个小矩形
2. 新建一个形状图层CAShaperLayer，其路径设置为上个步骤的路径
3. 新建一个渐变图层CAGradientLayer，其mask设置为上个步骤的形状图层

首先，初始化一个UIView

#define DEGREES_TO_RADIANS(x) (M_PI * (x) / 180.0)
static CGFloat const kCircleDiameter = 230;

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        _startDegree = -130;
        _endDegree = 130;
        _totalSteps = 31;
               
        self.backgroundColor = [UIColor colorWithRed:44.0/255.0 green:62.0/255.0 blue:80.0/255.0 alpha:1.0];//[UIColor whiteColor];
    }
    
    return self;
}

画圆弧的路径，每次先画一个固定位置上的圆角小矩形，然后进行旋转变换得到不同位置上的矩形：

- (void)drawRect:(CGRect)rect {
    
    CGRect circleRect;
    if (rect.size.width > kCircleDiameter) {
        circleRect = CGRectInset(rect, (rect.size.width-kCircleDiameter)/2, 20);
    } else {
        circleRect = CGRectInset(rect, 20, 20);
    }
    
    // 初始化圆弧路径，每个小矩形都添加到这个路径中
    UIBezierPath *path = [[UIBezierPath alloc] init];
    
    CGFloat radius = MIN(circleRect.size.width, circleRect.size.height)/2;
    CGPoint center = CGPointMake(rect.size.width/2, rect.size.height/2);

    CGFloat stepDegree = (self.endDegree-self.startDegree)/(self.totalSteps-1);
    CGFloat squareWidth = 4;
    CGRect squareRect = CGRectMake((rect.size.width-squareWidth)/2, 20, squareWidth, 13);// CGRectInset(rect, rect.size.width*0.45, rect.size.height*.05);
    for (int i=0; i

得到的图形如下：

如何将渐变色填充到每个小矩形？CAGradientLayer是连续的渐变图层，但由于小矩形并不连续，所以可以使用图层的蒙板mask。将圆弧路径赋值给一个 CAShaperLayer，勾画出圆弧的路径形状，然后用这个形状图层作渐变层的蒙板，从而得到我们需要的效果图：

//  在上面的代码中注释掉以下两行代码
//    [[UIColor redColor] setFill];
//    [path fill];

    // 添加以下行  
    CAGradientLayer* grad = [[CAGradientLayer alloc] init];
    grad.frame = rect;
    grad.colors = @[(id)[UIColor colorWithRed:246.0/255.0 green:71.0/255.0 blue:71.0/255.0 alpha:1.0].CGColor,
                    (id)[UIColor colorWithRed:253.0/255.0 green:188.0/255.0 blue:51.0/255.0 alpha:1.0].CGColor,
                    (id)[UIColor colorWithRed:32.0/255.0 green:197.0/255.0 blue:102.0/255.0 alpha:1.0].CGColor];

    // 渐变的起始点为左上角
    grad.startPoint = CGPointMake(0, 0);
    // 渐变的终点为右上角，从左向右水平渐变
    grad.endPoint = CGPointMake(1, 0);
    // 渐变位置在0.15，0.55，0.8，渐变位置个数和colors的颜色个数保持一致
    grad.locations = @[@0.15, @0.55, @0.8];
   
   // 初始化 CAShapeLayer 为蒙板层
    CAShapeLayer* mask = [[CAShapeLayer alloc] init];
    mask.frame = rect;
    // mask路径设置为上面的路径
    mask.path = path.CGPath;
    mask.fillColor = [UIColor blackColor].CGColor;
    // 设置渐变层的 mask
    grad.mask = mask;
    
    [self.layer addSublayer:grad];

最终效果图：

苹果文档中关于蒙板的解释：

An optional layer whose alpha channel is used to mask the layer’s content. The layer’s alpha channel determines how much of the layer’s content and background shows through. Fully or partially opaque pixels allow the underlying content to show through but fully transparent pixels block that content.

蒙板也是一个图层，蒙板图层的alpha值决定了content图层的显示区域。alpha为1时显示content，alpha为0时不显示content。

知道如何使用图层的蒙板，这篇如何用 Core Graphics 绘制一个漂亮的三彩圆弧提到的方法可以简化成以下代码，这里加了一个小改动，让圆弧的边缘有弧度:

CGFloat radius = rect.size.width/2;
    CGPoint center = CGPointMake(radius, radius);
    CGFloat startAngle = 0.9*M_PI;
    CGFloat endAngle = 0.1*M_PI;
    
    CAShapeLayer *arc = [CAShapeLayer layer];
    arc.frame = rect;
    arc.path = [UIBezierPath bezierPathWithArcCenter:center radius:radius-20 startAngle:startAngle endAngle:endAngle clockwise:YES].CGPath;
    // 设置 fillColor 为 [UIColor clearColor]，让`alpha`为0
    arc.fillColor = [UIColor clearColor].CGColor;
    // 设置线条颜色为黑色，`alpha`为1，这个线条是我们需要显示的区域
    arc.strokeColor = [UIColor blackColor].CGColor;
    arc.lineWidth = 15;
    // 圆弧的边缘设为有弧度
    arc.lineCap = kCALineCapRound;
       
    CAGradientLayer* grad = [[CAGradientLayer alloc] init];
    grad.frame = rect;
    grad.colors = @[(id)[UIColor colorWithRed:246.0/255.0 green:71.0/255.0 blue:71.0/255.0 alpha:1.0].CGColor,
                    (id)[UIColor colorWithRed:253.0/255.0 green:188.0/255.0 blue:51.0/255.0 alpha:1.0].CGColor,
                    (id)[UIColor colorWithRed:32.0/255.0 green:197.0/255.0 blue:102.0/255.0 alpha:1.0].CGColor];
    grad.startPoint = CGPointMake(0, 1);
    grad.endPoint = CGPointMake(1, 0);
    grad.mask = arc;
    
    [self.layer addSublayer:grad];

效果如图