iOS创建渐变色圆环

需求

需求.png

思路

用贝塞尔曲线来画圆
淡黄色的一个圆弧，和表示进度的一条圆弧分开来画
渐变色：找到进度圆弧的起点坐标和终点坐标，做颜色的渐变

缺点

缺点.png

当进度超过红色点时，渐变色会慢慢变淡而不是变深

不知道还有没有什么更完美的实现方法，求大神们指导

代码

        //圆环背景View
        UIView *cricleView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
        [self.contentView addSubview:cricleView];
        
        //淡黄色圆环
        CAShapeLayer *fullCricleLayer = [[CAShapeLayer alloc] init];
        fullCricleLayer.strokeColor = UIColorFromRGB(0xFFF3C3).CGColor;
        fullCricleLayer.fillColor = [UIColor clearColor].CGColor;
        fullCricleLayer.lineWidth = 4;
        fullCricleLayer.lineCap = kCALineCapRound;
        UIBezierPath *fullPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 50) radius:45 startAngle:3.0 * M_PI_4 endAngle:M_PI_4 clockwise:YES];
        fullCricleLayer.path = fullPath.CGPath;
        [cricleView.layer addSublayer:fullCricleLayer];
        
        //表示进度的圆环
        CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
        maskLayer.strokeColor = [UIColor redColor].CGColor;
        maskLayer.fillColor = [UIColor clearColor].CGColor;
        maskLayer.lineWidth = 5;
        maskLayer.lineCap = kCALineCapRound;
        CGFloat allCorrectPercent = 0.8;
        UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 50) radius:45 startAngle:3.0 * M_PI_4 endAngle:3.0 * M_PI_4 + 3.0 * M_PI_2 * allCorrectPercent clockwise:YES];
        maskLayer.path = path.CGPath;
        
        //渐变颜色
        CAGradientLayer *gradientLayer =  [CAGradientLayer layer];
        gradientLayer.frame = cricleView.bounds;
        [gradientLayer setColors:[NSArray arrayWithObjects:(id)UIColorFromRGB(0xFEB705).CGColor,(id)UIColorFromRGB(0xFF4040).CGColor, nil]];
        gradientLayer.startPoint = [self getPointWithAngle:3.0 * M_PI_4];
        gradientLayer.endPoint = [self getPointWithAngle:3.0 * M_PI_4 + 3.0 * M_PI_2 * allCorrectPercent];
        
        [cricleView.layer addSublayer:gradientLayer];
        [gradientLayer setMask:maskLayer];
        [cricleView mas_makeConstraints:^(MASConstraintMaker *make) {
            make.size.equalTo(CGSizeMake(100.0, 100.0));
            make.top.equalTo(cuiContainer.bottom).offset(50.0);
            make.centerX.equalTo(self.contentView.centerX);
        }];

//根据角度来计算进度圆环的起点和终点
-(CGPoint)getPointWithAngle:(CGFloat)angle
{
    CGFloat radius = 45;//半径
    int index = (angle) / M_PI_2;
    CGFloat needAngle = angle - index * M_PI_2;
    CGFloat x = 0, y = 0;
    
    if (angle >= 3 * M_PI_2) {//第一象限
        x = radius + sinf(needAngle) * radius;
        y = radius - cosf(needAngle) * radius;
    } else if (angle >= 0 && angle < M_PI_2) {//第二象限
        x = radius + cosf(needAngle) * radius;
        y = radius + sinf(needAngle) * radius;
    } else if (angle >= M_PI_2 && angle < M_PI) {//第三象限
        x = radius - sinf(needAngle) * radius;
        y = radius + cosf(needAngle) * radius;
    } else if (angle >= M_PI && angle < 3 * M_PI_2) {//第四象限
        x = radius - cosf(needAngle) * radius;
        y = radius - sinf(needAngle) * radius;
    }

    CGPoint point = CGPointMake(x/100.0, y/100.0);
    return  point;
}

实现效果

效果1.png

效果2.png

效果3.png

效果4.png

效果5.png

参考

参考1.png

参考2.jpg

最后编辑于：2018.05.10 19:32:41