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;

}

You need to use the locations property... Post the code you've tried with that and we'll help you get it right. — ZeMoon, Sep 10 '15 at 09:49
@ZeMoon hake a look on it, and please make me understand this concept precisely. — Anurag Bhakuni, Sep 10 '15 at 10:01

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

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.

what i understand by locations(correct me if i am wrong ), its saying fill the half part by first color and fill other half by second color but couldn't get the concept of s.p and e.p — Anurag Bhakuni, Sep 10 '15 at 10:25
The startPoint and endPoint properties specify where the whole gradient layer should start and end in the layer. It can be from any relative point to another in the layer. If you still can't understand, please tell what exactly you are not being able to comprehend. — ZeMoon, Sep 10 '15 at 10:27
look @zemoon the locations clearly saying if i give the gradientLayer frame equals to view frame then it will fill the color yellow to 0.0 to 0.5 part of the frame and rest is for red but i could,t understand the concept of staring and ending point. — Anurag Bhakuni, Sep 10 '15 at 10:55
yes but by this mean i couldn't give the radial gradient and thts wht i need i.e latter on i want to fill the 40% of arc with a color and rest with other — Anurag Bhakuni, Sep 11 '15 at 06:15
Have you tried searching for radial gradient specifically? http://stackoverflow.com/questions/26907352/how-to-draw-radial-gradients-in-a-calayer — ZeMoon, Sep 11 '15 at 06:16

Making a gradient arc?

1 Answers1

Linked