iOS 实现一个颜色渐变的弧形进度条 CAShapeLayer CAGradientLayer UIBezierPath
渐变色圆弧形进度条,本文用 CAShapeLayer CAGradientLayer UIBezierPath来实现。不过过程中需要注意mask这个概念,这个后面会详细说到。
1:首先创建CAGradientLayer,一个你需要的渐变的颜色的layer,并且加到父view上。
/**
创建彩色layer 并把layer添加到view的layer上
*/
- (void)setMuchColor
{
CAGradientLayer *layer = [CAGradientLayer layer];
layer.frame = CGRectMake(0, 0, SELF_WIDTH, SELF_HEIGHT);
layer.colors = @[(id)[HXLoopProgressView startColor].CGColor,
(id)[HXLoopProgressView endColor].CGColor];
layer.startPoint = CGPointMake(0, 0);
layer.endPoint = CGPointMake(1, 0); // 这个决定了你的颜色是横着放还是竖着放。
layer.locations = @[@0.1, @0.6];
self.muchColorLayer = layer;
[self.layer addSublayer:layer];
}
这个location是颜色的位置
比方说有三种颜色是红色 绿色 蓝色。分割线是
(__bridge id)[UIColor redColor].CGColor,
(__bridge id)[UIColor greenColor].CGColor,
(__bridge id)[UIColor blueColor].CGColor];
/ 颜色分割线
colorLayer.locations = @[@(0.25), @(0.5), @(0.75)];
这个locations并不是表示颜色值所在位置,它表示的是颜色在Layer坐标系相对位置处要开始进行渐变颜色了.
2:紧接着,为这个彩色的layer加一个蒙层mask。
/**
为彩色layer添加蒙层mask。这个mask有点讲究,有不清楚的可以看一下我页面的详细解说
*/
- (void)setMuchColoMask
{
CAShapeLayer *mashLayer = [self generateMaskLayer];
self.muchColorMashLayer = mashLayer;
self.muchColorLayer.mask = mashLayer;
}
这个蒙层的layer的创建是下面这个
/**
创建圆环,适合做蒙层,也适合画纯色图形
@return CAShapeLayer
*/
- (CAShapeLayer *)generateMaskLayer
{
CAShapeLayer *layer = [CAShapeLayer layer];
layer.frame = self.bounds;
UIBezierPath *paths = nil;
paths = [UIBezierPath bezierPathWithArcCenter:CGPointMake(SELF_WIDTH / 2, SELF_HEIGHT / 2) radius:SELF_WIDTH / 2.5 startAngle:[HXLoopProgressView startAngle] endAngle:[HXLoopProgressView endAngle] clockwise:YES];
layer.lineWidth = [HXLoopProgressView lineWidth];
layer.fillColor = [UIColor clearColor].CGColor; // 这里一定要是透明色。跟mask有关,下面会详细说
layer.strokeColor = [UIColor blackColor].CGColor;
layer.lineCap = kCALineCapRound;
layer.path = paths.CGPath;
return layer;
}
3:为view的layer再加一层蒙层
/**
为view的layer添加蒙层mask。
*/
- (void)settUI
{
CAShapeLayer *layer = [self generateMaskLayer];
[self.layer addSublayer:layer];
self.layer.mask = layer;
}
看结果
这里如果对mask不太熟悉的人就可能会有很多疑惑。下面给大家梳理一下mask的特性。
mask是蒙层,对mask而言有两个影响因素,一个是backgroundcolor的alpha 一个contents里面图片的alpha。
mask中backgroudcolor的alpha比contents的图片alpha要强。
☆ 能看见底部 0 : 不能看见底部 0-1 :混合
1:backgroudcolor中alpha 为1 ,则 不论contents中图片alpha是否透明,均可看见图层。
2:backgroudcolor中alpha 为0
a:contents图片alpha 为 0 :不能看见图层。
b:contents图片alpha 为 1 :能看见图片中为1的图片轮廓下的图层。
c:contents图片alpha 为 0-1:能看到图片轮廓下图片和图层混合的图层。
3:backgroudcolor中alpha 为 0-1:
a:contents图片alpha 为 0 :能看到蒙层的图层:全部
b:contents图片alpha 为 1 :则看到图片轮廓是是实得,其余是虚的图像。
c:contents图片alpha 为 0-1:图片和图层混合的图层。
如果还不明白 则下面讲一个例子
左边是正常的图,右边是加了蒙层的图。
第一行:
_firstLayer.backgroundColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:0.5].CGColor;
_firstLayer.contents = (id)[UIImage imageNamed:@"bgTransparent"].CGImage; 这个图片半透明
所以是蒙层和底下图混合显示
第二行:
_topLayer.backgroundColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:1].CGColor;
_topLayer.contents = (id)[UIImage imageNamed:@"bgTransparent"].CGImage; 图片半透明
只要backgroudecolor的alpha为1 ,蒙层什么透明度都不好使了。
第三行:
_middleLayer.backgroundColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:0.5].CGColor;
_middleLayer.contents = (id)[UIImage imageNamed:@"bgNonTransparent"].CGImage; 图片不透明了。
则图片轮廓处显示为实的,其余是backgroudcolor的半透明。
第四行 : 牵扯子layer。
- (void)configureUndefinedMaskLayer{
//add gradient layer to imageview layer
_gradientLayer = [CAGradientLayer layer];
_gradientLayer.frame = _bottomImageview.bounds;
[self setupGradientlayer:_gradientLayer];
[_bottomImageview.layer addSublayer:_gradientLayer];
//init mask layer
_btmLayer = [CALayer layer];
_btmLayer.frame = CGRectMake(30, 30, _bottomImageview.bounds.size.width - 30 * 2, _bottomImageview.bounds.size.height - 30 * 2);
_btmLayer.contents = (id)[UIImage imageNamed:@"bgTransparent"].CGImage;
_btmLayer.contentsGravity = kCAGravityResizeAspect;
_btmLayer.backgroundColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:0.5].CGColor;
_gradientLayer.mask = _btmLayer;
}
好,总结以上
看上面彩色的进度圆环,加在彩色layer上的蒙层是为了只显示出彩色的layer的轮廓,同样layer加载到view上,因为没有加到view的layer上,所以view的背景颜色和彩色的layer的圆弧 一同显示。
接着加一个maks 加到view的layer上,这个时候就显示的是有彩色的也有没有进度的灰色。这个灰色是背景色。
想看源码 可以下载https://github.com/Khaidetiankong1661/HXLoopProgress