189 8069 5689
iOS 绘制颜色渐变圆环
成都创新互联长期为上1000+客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为彭泽企业提供专业的成都网站制作、成都网站设计，彭泽网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。
本文主要介绍一种绘制颜色渐变的进度圆环. 先上效果图:
实现思路:
CAShapeLayer+UIBezierPath+CAGradientLayer
UIBezierPath 用来绘制圆环路径;
CAShapeLayer 根据UIBezierPath绘制的曲线路径渲染出图形, 利用GPU渲染节省内存,提高性能;
CAGradientLayer 用来绘制颜色渐变的图层, 最后添加到view的layer用来展示;
步骤:
先创建一个UIView, 在其内部实现圆环的绘制.
@property (strong, nonatomic)UIView *bgview;
_bgview = [[UIView alloc]initWithFrame:CGRectMake(50, 50, 250, 250)];
_bgview.backgroundColor = [UIColor grayColor];
[self.view addSubview:_bgview];
Paste_Image.png
2.绘制背景圆环, 并将其添加到view的layer层上.
//创建背景圆环
CAShapeLayer*trackLayer = [CAShapeLayerlayer];
trackLayer.frame=self.bounds;
//清空填充色
trackLayer.fillColor= [UIColorclearColor].CGColor;
//设置画笔颜色 即圆环背景色
trackLayer.strokeColor= [UIColorcolorWithRed:170/255.0green:210/255.0blue:254/255.0alpha:1].CGColor;trackLayer.lineWidth=20;
//设置画笔路径
UIBezierPath*path = [UIBezierPathbezierPathWithArcCenter:CGPointMake(self.frame.size.width/2.0,self.frame.size.height/2.0) radius:self.frame.size.width/2.0-10startAngle:- M_PI_2 endAngle:-M_PI_2 + M_PI *2clockwise:YES];
//path 决定layer将被渲染成何种形状
trackLayer.path= path.CGPath;
[self.layeraddSublayer:trackLayer];
Paste_Image.png
3. 使用CAGradientLayer 绘制渐变的背景色
由于CAShapeLayer不能顺着弧线进行渐变只能指定两个点之间进行渐变, 所以四种颜色的渐变只能是将view分成四个小的部分, 分别实现两种颜色间的渐变. 最后在组合在一起, 形成四种颜色的渐变.
CGFloat width = _bgview.frame.size.width;
CGFloat height = _bgview.frame.size.height;
CALayer *gradientLayer = [CALayer layer];
gradientLayer.frame = self.bgview.bounds;
CAGradientLayer *gradientLayer1 = [CAGradientLayer layer];
gradientLayer1.frame = CGRectMake(width/2.0, 0, width/2.0, height/2.0);
gradientLayer1.colors = @[(__bridge id)[UIColor redColor].CGColor, (__bridge id)[UIColor orangeColor].CGColor];
//startPoint和endPoint属性，他们决定了渐变的方向。这两个参数是以单位坐标系进行的定义，所以左上角坐标是{0, 0}，右下角坐标是{1, 1}
//startPoint和pointEnd 分别指定颜色变换的起始位置和结束位置.
//当开始和结束的点的x值相同时, 颜色渐变的方向为纵向变化
//当开始和结束的点的y值相同时, 颜色渐变的方向为横向变化
//其余的 颜色沿着对角线方向变化
gradientLayer1.startPoint = CGPointMake(0.2, 0);
gradientLayer1.endPoint = CGPointMake(0.8, 1);
[gradientLayer addSublayer:gradientLayer1];
CAGradientLayer *gradientLayer2 = [CAGradientLayer layer];
gradientLayer2.frame = CGRectMake(width/2.0, width/2.0, width/2.0, height/2.0);
gradientLayer2.colors = @[(__bridge id)[UIColor orangeColor].CGColor, (__bridge id)[UIColor yellowColor].CGColor];
[gradientLayer2 setLocations:@[@0.3, @0.8,@1]];
gradientLayer2.startPoint = CGPointMake(0, 0);
gradientLayer2.endPoint = CGPointMake(0, 1);
[gradientLayer addSublayer:gradientLayer2];
CAGradientLayer *gradientLayer3 = [CAGradientLayer layer];
gradientLayer3.frame = CGRectMake(0, width/2.0, width/2.0, height/2.0);
gradientLayer3.colors = @[(__bridge id)[UIColor yellowColor].CGColor, (__bridge id)[UIColor greenColor].CGColor];
gradientLayer3.startPoint = CGPointMake(0.5, 1);
gradientLayer3.endPoint = CGPointMake(0.5, 0);
[gradientLayer addSublayer:gradientLayer3];
CAGradientLayer *gradientLayer4 = [CAGradientLayer layer];
gradientLayer4.frame = CGRectMake(0, 0, width/2.0, height/2.0);
gradientLayer4.colors = @[(__bridge id)[UIColor greenColor].CGColor, (__bridge id)[UIColor blueColor].CGColor];
gradientLayer4.startPoint = CGPointMake(0.5, 1);
gradientLayer4.endPoint = CGPointMake(0.5, 0);
[gradientLayer addSublayer:gradientLayer4];
[self.bgview.layer addSublayer:gradientLayer];
4. 将颜色图层切成圆环
@property (nonatomic, strong) CAShapeLayer *progressLayer;
_progressLayer = [CAShapeLayer layer];
_progressLayer.frame = self.bounds;
_progressLayer.fillColor = [UIColor clearColor].CGColor;
_progressLayer.strokeColor = [UIColor colorWithRed:170/255.0 green:210/255.0 blue:254/255.0 alpha:1].CGColor;
_progressLayer.lineWidth = 20;
_progressLayer.path = path.CGPath;
gradientLayer.mask = _progressLayer;
Paste_Image.png
5. 利用locations 属性调整颜色空间
根据上面的运行结果可以看出底部的颜色交接的地方有颜色的断层. 主要是第三部分底部的黄色区域较小导致的. 可以利用locations数组进行微调.
默认情况下，这些颜色在空间上均匀地被渲染，但是我们可以用locations属性来调整空间。locations属性是一个浮点数值的数组(以NSNumber包装)。这些浮点数定义了colors属性中每个不同颜色的位置，同样的，也是以单位坐标系进行标定。0.0代表着渐变的开始，1.0代表着结束。
[gradientLayer2 setLocations:@[@0.3, @0.8]];
Paste_Image.png
你可以考虑分层,上面时一层蒙板,把下面的圆环盖住,下面的圆环是完整的圆环,有渐变效果.
然后,根据数据,蒙版层变短即可.
快捷键c,就可以画了，然后藻用同样的方式画个圆，按s（打开捕捉）移动位置就可以叠加上了。