Apply gradient on UIBezierPath with different colors

Question

I am developing a circular progress bar using UIBezierPath and want to change the colour of the fill according to a certain value.

The colour of the fill is a gradient that starts at red and continues to a shade of purple like the following:

I created the arc and filled it this way:

// 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"];

In order to display the gradient i used CAGradientLayer with the following implementation:

// 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;

However after running the code i only get an arc filled with shades starting at the forth purple colour from the left. Is there a way to start a gradient at red and finish at the last type of purple?

Any help would be greatly appreciated!

Thank you very much.

Granit

Answer 1

I solved the issue by changing the start and endpoints of the gradientLayer like the following:

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