製作漸變弧線？

Question

我想用這樣一種方式使用CAGradientLayer： -

20％的弧具有相同的單色，其他80％的弧具有兩種顏色的梯度。 我已經試過locations startPointendPointCAGradientLayer的屬性，但無法取得成功，已經從教程中通過，但不知何故無法正確理解這個概念。請用明確的描述來解決我的問題。

// 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屬性應與起點來填充（我知道，字停止使得它聽起來對面）的各顏色的作爲colors屬性指定，從0到1 。這些站點從上到下垂直呈現。

所以，這應該工作：

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

現在，在同一時間，如果你想使梯度水平（或任何其它方向），你可以使用：起點和終點的屬性。

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屬性中指定的比率呈現。

最後，您只能通過修改屬性並使用各種組合來查看呈現的效果才能完全理解這一點。