Áp dụng màu gradient cho cung được tạo bằng UIBezierPath

Question

Tôi muốn tạo thanh tiến trình có dạng vòng cung. Màu của thanh tiến trình phải thay đổi theo các giá trị.

Tôi đã tạo một vòng cung bằng cách sử dụng UIBezierPath bezierPathWithArcCenter. Tôi sử dụng đoạn mã sau:

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

} 

Kết quả trông như thế này:

Câu hỏi của tôi là: Làm thế nào để áp dụng một gradient với màu nếu ví dụ: giá trị là < = 50%? Tôi cũng tạo ra một UIButton tạo ra các số CGFloat ngẫu nhiên để nối nó với thanh tiến trình. Có ai có một ý tưởng làm thế nào để giải quyết điều này?

Gradient sẽ giống như thế này:

Bất kỳ trợ giúp sẽ được đánh giá cao!

Cảm ơn bạn rất nhiều.

Granit

Answer 1

Bạn có thể sử dụng một CAGradientLayer để có được hiệu ứng gradient, và sử dụng CAShapeLayer như một chiếc mặt nạ.

ví dụ:

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

Để vẽ một gradient dọc theo một cơn đột quỵ, xem thi này: https://stackoverflow.com/a/43668420/917802

EDIT: Nói tóm lại, tạo một lớp tùy chỉnh UIView, thêm một hình tròn gradient đến nó bằng cách lặp lại giữa hai màu ở các góc tăng, ví dụ colour1 = 1 độ, colour2 = 2 độ vv, tất cả các con đường lên đến 360. Sau đó áp dụng một mặt nạ bánh rán cho điều đó. Khi bạn thay đổi giá trị strokeEnd của mặt nạ CAShapeLayer, bạn cũng xoay vòng tròn xuyên tâm bên dưới. Bởi vì chúng di chuyển cùng nhau, nó trông giống như đột quỵ chính nó có một gradient.