iOS 动态绘制渐变色圆环

Teun丶
5,808 阅读5分钟

思路

  • 画静态圆的方法有很多,例如UIBezierPath或者UIBezierPath + CAShapeLayer等等,本文也会用到.

  • 动态效果即不断的更新圆环的角度(弧度),然后不断的绘制圆,达到动态效果,使用Quartz2d在drawRect中绘制

  • CGContextDrawLinearGradient画圆,参数CGGradientRef设置渐变色,startPoint和endPoint设置渐变色方向

  • 封装到一个自定义View,快速使用(文章末尾附Demo)

最终效果

手动绘制

手动画圆效果图.gif
手动画圆效果图.gif

使用:

    //1.创建圆环
    TYCircleViewConfigure *configure = [[TYCircleViewConfigure alloc]init];
    
    configure.lineColor = [UIColor lightGrayColor];//圆环背景色
    configure.circleLineWidth = 10;//圆环宽度
    configure.isClockwise = YES;//设置顺时针方向画圆
    
    configure.startPoint = CGPointMake(width / 2, 0);
    configure.endPoint   = CGPointMake(width / 2 , width);//渐变色分布方向
    //渐变色的颜色
    configure.colorArr = @[
                            (id)TYColorFromRGB(0x349CF7).CGColor,//浅蓝色
                            (id)TYColorFromRGB(0xFE5858).CGColor,//深橙色
                            (id)TYColorFromRGB(0x72DC4F).CGColor //浅绿色
                            ];
    //每个颜色区域值
    configure.colorSize = @[@0,@0.3,@0.8];
    
    TYCircleView *circleView = [[TYCircleView alloc]initWithFrame:CGRectMake(x , y, width, width) configure:configure];

    [self.view addSubview:circleView];

自动绘制

  • 自动绘制圆环其实只要把slider的value和圆环中心label的显示数值结合起来就可以,即动态改变圆环中心label的数值
  • 怎么动态改变label的数值呢,推荐轮子:UICountingLabel,具体实现相对简单,不再介绍,结合中有坑不能逾越的,欢迎评论下方留言~

主要过程

1.文件.h中创建需要用到的属性的配置类

//配置属性
/*********************  TYCircleViewConfigure ************************/

@interface TYCircleViewConfigure : NSObject

/** 圆环线条宽度 */
@property (nonatomic, assign) CGFloat circleLineWidth;
/** 圆环的颜色 */
@property (nonatomic, strong) UIColor *lineColor;
/** 是否是顺时针 默认是NO:逆时针 */
@property (nonatomic, assign) BOOL isClockwise;
/** 渐变色方向 起始坐标 */
@property (nonatomic, assign) CGPoint startPoint;
/** 渐变色方向 结束坐标 */
@property (nonatomic, assign) CGPoint endPoint;
/** 渐变色的颜色数组 */
@property (nonatomic, strong) NSArray *colorArr;
/** 每个颜色的起始位置数组 注:每个元素 0 <= item < 1 */
@property (nonatomic, strong) NSArray *colorSize;

//注意: colorArr.count 和 colorSize.count 必须相等
//不相等时,渐变色最终显示出来的样子和期望的会有差异

@end
  1. 绘制灰色的背景圆环
//绘制背景圆
- (void)drawBackCircleView {
    
    //1.UIBezierPath创建一个圆环路径
    //圆心
    CGPoint arcCenter = CGPointMake(self.frame.size.width/2.0, self.frame.size.height/2.0);
    //半径 , circleLineWidth = 圆环线条宽度
    CGFloat radius = (self.frame.size.width - _configure.circleLineWidth)/2.0;
    //开始弧度:-M_PI_2,竖直向上; 结束弧度:-M_PI_2 + M_PI*2,一圈 clockwise:YES逆时针 NO顺时针
    //clockwise = NO时,若结束弧度 = -M_PI_2 + M_PI*2, 则圆环消失归零
    UIBezierPath *circle = [UIBezierPath bezierPathWithArcCenter:arcCenter radius:radius  startAngle:-M_PI_2 endAngle:-M_PI_2 + M_PI*2 clockwise:YES];
    
    //2.创建一个ShapeLayer
    CAShapeLayer *bgLayer = [CAShapeLayer layer];
    bgLayer.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.width);
    bgLayer.fillColor = [UIColor clearColor].CGColor;//圆环路径填充颜色
    bgLayer.lineWidth = _configure.circleLineWidth;//圆环宽度
    bgLayer.strokeColor = _configure.lineColor.CGColor;//路径颜色
    bgLayer.strokeStart = 0.f;//路径开始位置
    bgLayer.strokeEnd = 1.f;//路径结束位置
    bgLayer.path = circle.CGPath;
    
    //3.把路径设置到layer上,换出背景圆环
    [self.layer addSublayer:bgLayer];
    
}
  • 关于弧度的起始位置的弧度值(开始弧度和结束弧度)我们可以用一张图来描述,这个图描述了顺时针方向的弧度值,那么如果是逆时针的话,则-M_PI_2即代表正上方
    angles_location

3.在TYDrawCircleView的实现中,重写drawRect,绘制圆环

- (void)drawRect:(CGRect)rect {
   
    //获取图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    //设置线的宽度
    CGContextSetLineWidth(ctx, _configure.circleLineWidth);
    //设置圆环线条的两个端点做圆滑处理
    CGContextSetLineCap(ctx, kCGLineCapRound);
    //设置画笔颜色
    CGContextSetFillColorWithColor(ctx, [UIColor blackColor].CGColor);
    //设置圆心
    CGFloat originX = rect.size.width / 2;
    CGFloat originY = rect.size.height / 2;
    //计算半径
    CGFloat radius = MIN(originX, originY) - _configure.circleLineWidth/2.0;
    //建立一个最小初始弧度值,避免进度progress为0或1时圆环消失
    CGFloat minAngle = M_PI/90 - self.progress * M_PI/80;
    //逆时针画一个圆弧
    if (self.configure.isClockwise) {

        CGContextAddArc(ctx, rect.size.width / 2, rect.size.height / 2, radius, -M_PI_2, -M_PI_2 + minAngle + (2 * M_PI)*self.progress, NO);
    }else{
        
        CGContextAddArc(ctx, rect.size.width / 2, rect.size.height / 2, radius, -M_PI_2, -M_PI_2 - minAngle + (2 * M_PI)*(1-self.progress), YES);
    }
    
    //2. 创建一个渐变色
    CGFloat locations[_configure.colorSize.count];
    for (NSInteger index = 0; index < _configure.colorSize.count; index++) {
        locations[index] = [_configure.colorSize[index] floatValue];
    }
    
    //创建RGB色彩空间，创建这个以后，context里面用的颜色都是用RGB表示
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace,(__bridge CFArrayRef _Nonnull)_configure.colorArr, _configure.colorSize.count==0?NULL:locations);

    //释放色彩空间
    CGColorSpaceRelease(colorSpace);
    colorSpace = NULL;
    
    //3.画出圆环路径
    CGContextReplacePathWithStrokedPath(ctx);
    //剪裁路径
    CGContextClip(ctx);
    
    //4.用渐变色填充,修改填充色的方向
    CGContextDrawLinearGradient(ctx, gradient, _configure.startPoint, _configure.endPoint, 1);
    
    //释放渐变色
    CGGradientRelease(gradient);
    
}
  1. 动态画圆
  • 利用slider手动改变其value,关联slider的value到progress,当progress改变时:
- (void)setProgress:(CGFloat)progress {
    _progress = progress;
    _circleView.progress = progress;
  
    [_circleView setNeedsDisplay];  //重绘TYDrawCircleView,即调用TYDrawCircleView的DrawRect方法
}

渐变色讲解

  • 渐变色方向

我们在TYDrawCircleView的重DrawRect方法中用CGContextDrawLinearGradient方法来画出圆环,并设置圆环的渐变色gradient和渐变色分布方向, startPoint即渐变色的起始点位置, endPoint即渐变色的终点位置

image.png
在"使用"中:

    //width = 圆的直径
    configure.startPoint = CGPointMake(width / 2, 0);
    configure.endPoint   = CGPointMake(width / 2 , width);//渐变色分布方向

我们设置tartPoint = CGPointMake(width / 2, 0)即点A的位置,configure.endPoint = CGPointMake(width / 2 , width)即点B的位置,其他位置的话大家可以自行尝试

  • 渐变色分布区域

我们在"使用"中,设置了三种渐变色

//渐变色的颜色
    configure.colorArr = @[
                            (id)TYColorFromRGB(0x349CF7).CGColor,//浅蓝色
                            (id)TYColorFromRGB(0xFE5858).CGColor,//深橙色
                            (id)TYColorFromRGB(0x72DC4F).CGColor //浅绿色
                            ];

在不设置configure.colorSize (每个颜色区域值)时,三个颜色根据渐变色方向,依次均等分布 当我们不需要三个颜色均等分布时,可以通过设置configure.colorSize分别给三个颜色设置起始位置和结束位置

    //每个颜色区域值
    configure.colorSize = @[@0,@0.3,@0.8];

颜色分布.png

注意:

1.configure.colorSize数组中元素个数要和configure.colorArr相等,即颜色的个数和颜色区域值要一一对应,否则最终绘制的渐变色效果可能和期望的不同

2.configure.colorSize数组中每个元素代表了对应颜色的从分布方向(本demo中即Y轴方向)的起始位置,整个区域的值为1,颜色的区域值必须介于0和1之间才有效

3.如果configure.colorSize数组中的元素没有按照一定的大小顺序排列,颜色的位置就会出现错乱的现象

结语

1.关于其他解释代码中的注释也比较详细,有不懂的地方可以留言和我交流

2.Demo地址:github.com/TynnPassBy/…

3.码字不易,如果帮助到你得话,请点个赞吧~

表情包.jpeg

avatar
文章
阅读
粉丝
相关推荐
OpenGL 实现 2D 多边形渐变色填充
5.2k阅读
 · 
1点赞
Android 颜色渐变动画效果
1.4k阅读
 · 
24点赞
iOS 渐变：如何在 Swift 中使用 CAGradientLayer
1.4k阅读
 · 
2点赞
如何用css3实现一个动态渐变圆环图
1.5k阅读
 · 
45点赞
CSS渐变色
522阅读
 · 
4点赞
小技巧 | 渐变消失遮罩的多种实现方式
26k阅读
 · 
89点赞
原来 CSS 渐变也可以只用一个颜色~
5.1k阅读
 · 
67点赞
Flutter 与渐变色相关的那些有趣实用的例子
3.2k阅读
 · 
85点赞
新时代，你需要了解一下苹果的 VisionOS 系统
6.3k阅读
 · 
22点赞
不要图片？CSS实现圆角边框渐变色+背景透明
4.3k阅读
 · 
66点赞

友情链接：