iOS快速实现环形渐变进度条

2020-01-18 16:34:12王冬梅

这个渐变层只是一个中间变量,是不能显示出来的,我这里只是演示一下,现在我们已经拿到了渐变层gradientLayer。

第二步

我们需要制作一个环形路径

先看一下效果:

ios,圆形进度条,环形进度条动画,环形渐变色进度条

代码实现:


CGPoint center = CGPointMake(100, 100);
  CGFloat radius = 90;
  CGFloat startA = - M_PI_2; //设置进度条起点位置
  CGFloat endA = -M_PI_2 + M_PI * 2 * _progress; //设置进度条终点位置

  //获取环形路径(画一个圆形,填充色透明,设置线框宽度为10,这样就获得了一个环形)
  _progressLayer = [CAShapeLayer layer];//创建一个track shape layer
  _progressLayer.frame = self.bounds;
  _progressLayer.fillColor = [[UIColor clearColor] CGColor]; //填充色为无色
  _progressLayer.strokeColor = [[UIColor redColor] CGColor]; //指定path的渲染颜色,这里可以设置任意不透明颜色
  _progressLayer.opacity = 1; //背景颜色的透明度
  _progressLayer.lineCap = kCALineCapRound;//指定线的边缘是圆的
  _progressLayer.lineWidth = 10;//线的宽度
  UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];//上面说明过了用来构建圆形
  _progressLayer.path =[path CGPath]; //把path传递給layer,然后layer会处理相应的渲染,整个逻辑和CoreGraph是一致的。
  [self.layer addSublayer:_progressLayer];

第三步,也是最后一步了

用我们在第二步生成的环形路径去截取第一步生成的渐变层


[gradientLayer setMask:_progressLayer]; //用progressLayer来截取渐变层
self.layer addSublayer:gradientLayer];

截取的layer层就是我们最后需要的,看一看我们最后截取后得到的

ios,圆形进度条,环形进度条动画,环形渐变色进度条

到这里,我们已经完成了99%了,最后一步,根据自己的需要让它显示多少的比例就完成了。比例的控制在第二部的progress属性,比例在0-1之间,看一看最后的效果。

ios,圆形进度条,环形进度条动画,环形渐变色进度条

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习和工作能带来一定的帮助,如果有疑问大家可以留言交流。


注:相关教程知识阅读请移步到IOS开发频道。