Anwenden von Verlaufsfarbe auf Bogen, der mit UIBezierPath erstellt wurde

Question

Ich möchte einen Fortschrittsbalken erstellen, der die Form eines Bogens hat. Die Farbe des Fortschrittsbalkens muss sich entsprechend den Werten ändern.

Ich erstellte einen Bogen mit UIBezierPath bezierPathWithArcCenter. Ich habe den folgenden Code:

- (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"]; 

} 

Das Ergebnis sieht wie folgt aus:

Meine Frage ist: Wie eine Steigung auf die Farbe anzuwenden, wenn das heißt der Wert < = 50% ist? Ich habe auch ein UIButton erstellt, das zufällige CGFloat-Nummern generiert, um es mit dem Fortschrittsbalken zu verbinden. Hat jemand eine Idee, wie man das anpackt?

Der Gradient würde wie folgt aussehen:

Jede mögliche Hilfe würde geschätzt!

Vielen Dank.

Granit

Answer 1

können Sie einen CAGradientLayer verwenden den Gradienten-Effekt zu erhalten, und die CAShapeLayer als Maske verwenden.

zB:

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

Um einen Gradienten entlang eines Schlaganfalls zu ziehen, sehen diese Implementierung: https://stackoverflow.com/a/43668420/917802

EDIT: Kurz gesagt, erstellen Sie eine Klasse benutzerdefinierte UIView, fügen Sie eine radiale Gradienten dazu durch Iterieren zwischen zwei Farben mit zunehmenden Winkeln, z colour1 = 1 Grad, colour2 = 2 Grad usw. bis zu 360. Tragen Sie dann eine Donut-Maske auf. Wenn Sie den strokeEnd-Wert des maskierenden CAShapeLayers ändern, rotieren Sie auch den zugrunde liegenden radialen Farbverlauf. Da sie sich zusammen bewegen, sieht es so aus, als hätte der Strich selbst einen Gradienten.