在UIBezierPath上应用不同颜色的渐变

Question

我正在使用UIBezierPath开发循环进度条，并希望根据特定值更改填充的颜色。

填充的颜色是一个以红色开始的渐变，并继续呈现紫色，如下所示：

我创建了弧并以这种方式填充：

// Draw the arc with bezier path
    int radius = 100;

    arc = [CAShapeLayer layer];
    arc.path = [UIBezierPath bezierPathWithArcCenter:__optimizePoint(100, 110) radius:radius startAngle:M_PI endAngle:M_PI/150 clockwise:YES].CGPath;
    if (__isScreenR4) {
        arc.position = __optimizePoint(60, 182);
    } else{
        arc.position = __optimizePoint(60, 205);
    }
    arc.fillColor = [UIColor clearColor].CGColor;
    arc.strokeColor = __colorApp.CGColor;
    arc.lineCap = kCALineCapRound;
    arc.lineWidth = 6;

    [self.view.layer addSublayer:arc];

    // Animation of the progress bar
    drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    drawAnimation.duration            = 5.0; // "animate over 10 seconds or so.."
    drawAnimation.repeatCount         = 1.0;  // Animate only once..
    drawAnimation.removedOnCompletion = YES;   // Remain stroked after the animation..
    drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    drawAnimation.toValue   = [NSNumber numberWithFloat:1.0f];
    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    [arc addAnimation:drawAnimation forKey:@"drawCircleAnimation"];

为了显示我使用CAGradientLayer的渐变，并使用以下实现：

// Gradient of progress bar
    gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.view.frame;
    gradientLayer.colors = @[(__bridge id)[UIColor colorWithRed:193.0/255.0 green:13.0/255.0 blue:13.0/255.0 alpha:1.0].CGColor,(__bridge id)[UIColor colorWithRed:247.0/255.0 green:166.0/255.0 blue:0.0/255.0 alpha:1.0].CGColor,(__bridge id)[UIColor colorWithRed:255.0/255.0 green:204.0/255.0 blue:0.0/255.0 alpha:1.0].CGColor, (__bridge id)[UIColor colorWithRed:194.0/255.0 green:157.0/255.0 blue:206.0/255.0 alpha:1.0].CGColor, (__bridge id)[UIColor colorWithRed:188.0/255.0 green:154.0/255.0 blue:199.0/255.0 alpha:1.0].CGColor, (__bridge id)[UIColor colorWithRed:167.0/255.0 green:129.0/255.0 blue:185.0/255.0 alpha:1.0].CGColor, (__bridge id)[UIColor colorWithRed:158.0/255.0 green:107.0/255.0 blue:171.0/255.0 alpha:1.0].CGColor, (__bridge id)[UIColor colorWithRed:149.0/255.0 green:86.0/255.0 blue:174.0/255.0 alpha:1.0].CGColor, (__bridge id)[UIColor colorWithRed:139.0/255.0 green:74.0/255.0 blue:151.0/255.0 alpha:1.0].CGColor, (__bridge id)[UIColor colorWithRed:129.0/255.0 green:38.0/255.0 blue:140.0/255.0 alpha:1.0].CGColor ];
    gradientLayer.startPoint = CGPointMake(0,0.1);
    gradientLayer.endPoint = CGPointMake(0.5,0.2);
    [self.view.layer addSublayer:gradientLayer];
    gradientLayer.mask = arc;

然而，在运行代码之后，我只得到一个弧形填充阴影，从左边的第四个紫色开始。有没有办法以红色开始渐变并完成最后一种紫色？

非常感谢任何帮助！

非常感谢。

花岗岩

Answer 1

我通过更改gradientLayer的起点和终点解决了这个问题，如下所示：

gradientLayer.startPoint = CGPointMake(0.155,0.1);
gradientLayer.endPoint = CGPointMake(1.0,0.1);