2019-05-09

圆形进度条，网上代码一大片，就不多说了

现在要实现的是进度圆弧，设置圆弧的起始点颜色和终点颜色

屏幕快照 2019-05-09 下午5.59.51.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);
        }];

设置颜色起点和终点的代码主要是

gradientLayer.startPoint = [self getPointWithAngle:3.0 * M_PI_4];
        gradientLayer.endPoint = [self getPointWithAngle:3.0 * M_PI_4 + 3.0 * M_PI_2 * allCorrectPercent];

所以根据角度来算

//根据角度来计算进度圆环的起点和终点
-(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 22.jpg