Making a gradient arc?

Question

i wanna make an arc with the use of CAGradientLayer in such a way:-

20% of the arc have same single color then other 80% of arc has a gradient of two colors. I already tried by hand on locations startPoint endPoint property of CAGradientLayer but couldn't get the success and already go through from tutorials but somehow couldn't understand the concept properly.please solve my problem with clear description of it.

// for beizier path
- (UIBezierPath *)samplePath
{
    UIBezierPath *path = [UIBezierPath bezierPath];

   path = [UIBezierPath bezierPath];
    [path addArcWithCenter:CGPointMake(200, 200) radius:30.0f startAngle:(3*M_PI)/4 endAngle:M_PI/4   clockwise:YES];
     path.lineWidth = 30;
    [[UIColor redColor] setStroke];
    // [[UIColor colorWithRed:arc4random() green:arc4random() blue:arc4random() alpha:1.0] setFill];
    [path stroke];

    return path;
}

- (void)startAnimation
{
    CAShapeLayer *shapeLayer;
    if (self.pathLayer == nil)
    {
        shapeLayer = [CAShapeLayer layer];

        shapeLayer.path = [[self samplePath] CGPath];
        shapeLayer.strokeColor = [[UIColor redColor] CGColor];
        shapeLayer.fillColor = nil;
        shapeLayer.lineWidth = 30;
        self.pathLayer = shapeLayer;
    }

    [self animationBasic];
    [self gradientLayer:shapeLayer];


}
-(void)animationBasic
{
    CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 3.0;
    pathAnimation.fromValue = @(0.0f);
    pathAnimation.toValue = @(1.0f);
    [self.pathLayer addAnimation:pathAnimation forKey:@"strokeEnd"];
}

-(void)gradientLayer:(CAShapeLayer *)shapelayer
{

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.frame;
    gradientLayer.colors = @[(__bridge id)[UIColor yellowColor].CGColor,(__bridge id)[UIColor redColor].CGColor ];
    gradientLayer.locations = [NSArray arrayWithObjects:
                               [NSNumber numberWithFloat:0.5f],
                               [NSNumber numberWithFloat:1.0f],
                               nil];
    //    gradientLayer.startPoint = CGPointMake(0,1);
    //    gradientLayer.endPoint = CGPointMake(1,1);
    [self.layer addSublayer:gradientLayer];
    gradientLayer.mask = shapelayer;

}

Answer 1

The locations property of a CAGradientLayer instance should be populated with the starting points (I know, the word stops makes it sound the opposite) of each color as specified in the colors property, from 0 to 1. These stops are rendered vertically from top to bottom.

So, this should work:

gradientLayer.locations = [NSArray arrayWithObjects:
                           [NSNumber numberWithFloat:0.0f],
                           [NSNumber numberWithFloat:0.5f],
                           nil];

Now, at the same time, if you want to make the gradient horizontal (or any other direction), you can make use of the startPoint and endPoint properties.

gradientLayer.startPoint = CGPointMake(0.0, 0.5); //Default is (0.5, 0,0)
gradientLayer.endPoint = CGPointMake(1.0, 0.5);   //Default is (0.5, 1.0)
//The gradientLayer will be rendered horizontally.

The startingPoint and endingPoint properties determine the direction and layout of the gradient in the layer. These are defined in the unit coordinate system, where each point is defined as a set of unit coordinates and the top left corner being the origin. So, (0,0) corresponds to the origin, (1,1) corresponds to the bottom right corner. You can check this excellent answer for a better explanation.

So to summarize, the gradient is rendered in the direction and region as specified by the startPoint and endPoint properties, with the colors rendered in the ratio specified in the locations property.

At the end, you can only understand this fully by tinkering with the properties and using various combinations to see what effect is rendered.