制作渐变弧？

Question

我想以这种方式使用CAGradientLayer 制作弧线：-

20% 的弧线具有相同的单色，然后其他 80% 的弧线具有两种颜色的渐变。 我已经在locations 上手动尝试过 startPoint endPoint CAGradientLayer 的属性，但无法获得成功，并且已经从教程中完成，但不知何故无法正确理解这个概念。请通过清晰的描述解决我的问题。

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

CAGradientLayer 实例的locations 属性应填充@987654325 中指定的每种颜色的起点（我知道，stop 这个词听起来正好相反） @ 属性，从 0 到 1。这些停靠点是从上到下垂直渲染的。

所以，这应该可行：

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

现在，同时，如果你想让渐变水平（或任何其他方向），你可以利用 startPoint 和 endPoint 属性。

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.

startingPoint 和endingPoint 属性决定了图层中渐变的方向和布局。这些是在单位坐标系中定义的，其中每个点都定义为一组单位坐标，左上角是原点。所以，(0,0) 对应原点，(1,1) 对应右下角。你可以查看这个优秀的answer 以获得更好的解释。

总而言之，渐变按照startPoint 和endPoint 属性指定的方向和区域呈现，颜色按照locations 属性指定的比率呈现。

最后，你只能通过修改属性并使用各种组合来查看渲染的效​​果。