UIBezierPathで作成した円弧にグラデーションカラーを適用します。

Question

円弧の形をしたプログレスバーを作成します。プログレスバーの色は、値に応じて変更する必要があります。

UIBezierPath bezierPathWithArcCenterを使用して円を作成しました。

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 

    int radius = 100; 

    CAShapeLayer *arc = [CAShapeLayer layer]; 

    arc.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 50) radius:radius startAngle:60.0 endAngle:0.0 clockwise:YES].CGPath; 

    arc.position = CGPointMake(CGRectGetMidX(self.view.frame)-radius, 
            CGRectGetMidY(self.view.frame)-radius); 

    arc.fillColor = [UIColor clearColor].CGColor; 
    arc.strokeColor = [UIColor purpleColor].CGColor; 
    arc.lineWidth = 15; 

    [self.view.layer addSublayer:arc]; 

    CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
    drawAnimation.duration   = 5.0; // "animate over 10 seconds or so.." 
    drawAnimation.repeatCount   = 1.0; // Animate only once.. 
    drawAnimation.removedOnCompletion = NO; // Remain stroked after the animation.. 
    drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f]; 
    drawAnimation.toValue = [NSNumber numberWithFloat:10.0f]; 
    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; 
    [arc addAnimation:drawAnimation forKey:@"drawCircleAnimation"]; 

} 

結果は次のようになります：

私の質問がある：すなわち、値が< = 50％であれば色にグラデーションを適用するにはどうすれば、次のコードを使用しましたか？また、プログレスバーに接続するためにランダムなCGFloat番号を生成するUIButtonを作成しました。誰かがこれにどのように取り組むべきアイデアを持っていますか？

勾配は次のようになります：

任意の助けをいただければ幸いです！

ありがとうございました。

グラニット

Answer 1

あなたはグラデーション効果を得るためにCAGradientLayerを使用し、マスクとしてCAShapeLayerを使用することができます。

例：

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 

    int radius = 100; 

    CAShapeLayer *arc = [CAShapeLayer layer];  
    arc.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 50) radius:radius startAngle:60.0 endAngle:0.0 clockwise:YES].CGPath; 

    arc.position = CGPointMake(CGRectGetMidX(self.view.frame)-radius, 
           CGRectGetMidY(self.view.frame)-radius); 

    arc.fillColor = [UIColor clearColor].CGColor; 
    arc.strokeColor = [UIColor purpleColor].CGColor; 
    arc.lineWidth = 15; 
    CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
    drawAnimation.duration   = 5.0; // "animate over 10 seconds or so.." 
    drawAnimation.repeatCount   = 1.0; // Animate only once.. 
    drawAnimation.removedOnCompletion = NO; // Remain stroked after the animation.. 
    drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f]; 
    drawAnimation.toValue = [NSNumber numberWithFloat:10.0f]; 
    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; 
    [arc addAnimation:drawAnimation forKey:@"drawCircleAnimation"]; 

    CAGradientLayer *gradientLayer = [CAGradientLayer layer]; 
    gradientLayer.frame = self.view.frame; 
    gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor blueColor].CGColor ]; 
    gradientLayer.startPoint = CGPointMake(0,0.5); 
    gradientLayer.endPoint = CGPointMake(1,0.5); 

    [self.view.layer addSublayer:gradientLayer]; 
    //Using arc as a mask instead of adding it as a sublayer. 
    //[self.view.layer addSublayer:arc]; 
    gradientLayer.mask = arc; 


} 

Answer 2

、ストロークに沿ってグラデーションを描き、この実装を参照してください：https://stackoverflow.com/a/43668420/917802

EDIT：要するに を、カスタムUIViewクラスを作成し、ラジアルを追加増加する角度で2つの色の間で反復することによって、それに勾配を付けます。 colour1 = 1度、colour2 = 2度など、360度までです。その後、ドーナツマスクを適用します。マスキングするCAShapeLayerのstrokeEnd値を変更すると、その下にある放射状のグラデーションも回転します。一緒に動くので、ストローク自体にグラデーションがあるように見えます。