需求

需求.png

思路

用貝塞爾曲線來畫圓
淡黃色的一個圓弧，和表示進(jìn)度的一條圓弧分開來畫
漸變色：找到進(jìn)度圓弧的起點(diǎn)坐標(biāo)和終點(diǎn)坐標(biāo)，做顏色的漸變

缺點(diǎn)

缺點(diǎn).png

當(dāng)進(jìn)度超過紅色點(diǎn)時，漸變色會慢慢變淡而不是變深

不知道還有沒有什么更完美的實(shí)現(xiàn)方法， 求大神們指導(dǎo)

代碼

        //圓環(huán)背景View
        UIView *cricleView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
        [self.contentView addSubview:cricleView];
        
        //淡黃色圓環(huán)
        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];
        
        //表示進(jìn)度的圓環(huán)
        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);
        }];

//根據(jù)角度來計(jì)算進(jìn)度圓環(huán)的起點(diǎn)和終點(diǎn)
-(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;
}

實(shí)現(xiàn)效果

效果1.png

效果2.png

效果3.png

效果4.png

效果5.png

參考

參考1.png

參考2.jpg