iOS开发之带有渐变色的进度条

通过上一篇文章，我们绘制了一个简单的不能在简单的环形进度条，下面绘制一个带有渐变色的进度条，主要还有使用了UIBezierPath和CAShapeLayer方法。本文的参考文章

效果展示

主要代码及知识如下。先绘制一个渐变色

// 渐变色
- (void)setupColorLayer {
    self.colorLayer = [CAShapeLayer layer];
    self.colorLayer.frame = self.bounds;
    [self.layer addSublayer:self.colorLayer];
    
    CAGradientLayer *leftLayer = [CAGradientLayer layer];
    leftLayer.frame = CGRectMake(0, 0, self.bounds.size.width / 2, self.bounds.size.height);
    // 分段设置渐变色
    leftLayer.locations = @[@0.3, @0.5, @1];
    leftLayer.colors = @[(id)[UIColor yellowColor].CGColor, (id)[UIColor greenColor].CGColor];
    [self.colorLayer addSublayer:leftLayer];
    
    CAGradientLayer *rightLayer = [CAGradientLayer layer];
    rightLayer.frame = CGRectMake(self.bounds.size.width / 2, 0, self.bounds.size.width / 2, self.bounds.size.height);
    rightLayer.locations = @[@0.3, @0.5, @1];
    rightLayer.colors = @[(id)[UIColor yellowColor].CGColor, (id)[UIColor redColor].CGColor];
    [self.colorLayer addSublayer:rightLayer];
}

在绘制一个圆形遮罩，放在colorLayer渐变色图层上，该圆形遮罩绘制如下：

// 生成遮罩
- (CAShapeLayer *)generateMaskLayer {
    
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.frame = self.bounds;
    
    CGPoint centerPoint = CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height * 0.5);//设置圆心位置
    CGFloat radius = 90;// 设置半径
    CGFloat startA = - M_PI_2;// 设置圆的起始位置
    CGFloat endA = - M_PI_2 + M_PI * 2;// 设置圆的终止位置
    
    // 创建一个圆心为父视图中点的圆，半径为父视图宽的2/5，起始角度是从-240°到60°
//    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2) radius:self.bounds.size.width / 2.5 startAngle:-3 / 4 * M_PI endAngle:1 / 3 * M_PI clockwise:YES];
    
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:centerPoint radius:radius startAngle:startA endAngle:endA clockwise:YES];
    
    layer.lineWidth = 20;
    layer.path = path.CGPath;
    layer.fillColor = [UIColor clearColor].CGColor; // 填充色为透明（不设置为黑色）
    layer.strokeColor = [UIColor blackColor].CGColor; // 随便设置一个边框颜色
    layer.lineCap = kCALineCapRound; // 设置线为圆角
    return layer;
}

// 设置渐变色遮罩
-(void)setupColorMaskLayer {
    
    CAShapeLayer *layer = [self generateMaskLayer];
    layer.lineWidth = 20.5; // 渐变遮罩线宽较大，防止蓝色遮罩有边露出来
    self.colorLayer.mask = layer;
    
    self.colorMaskLayer = [CAShapeLayer layer];
    self.colorMaskLayer = layer;
}

由于还有一个蓝色背景，我们可以创建一个蓝色的view充当，并再将相同的圆形遮罩，放在蓝色view上，

// 设置蓝色view遮罩
- (void)setupBlueMaskLayer {
    
    CAShapeLayer *layer = [self generateMaskLayer];
    self.layer.mask = layer;
    self.blueMaskLayer = layer;
}

拖动滑块，我们就改变渐变色colorMaskLayer的strokeEnd属性即可

self.colorMaskLayer.strokeEnd = strokeEnd;

这样一个带有渐变色的环形进度条就绘制成了。