对使用UIBezierPath创build的弧应用渐变颜色

我想创build一个弧形的进度条。 进度条的颜色必须根据值进行更改。

我使用UIBezierPath bezierPathWithArcCenter创build了一个弧。 我使用了下面的代码：

 - (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％，如何对颜色应用渐变？ 我还创build了一个UIButton，它会生成随机的CGFloat数字，以便将其与进度栏挂钩。 有没有人有一个想法如何解决这个问题？

渐变看起来像这样：

任何帮助，将不胜感激！

非常感谢你。

格兰尼特

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

编辑：简单地说，创build一个自定义的UIView类，通过在增加angular度，例如colour1 = 1度，colour2 = 2度等，一直到360的两种颜色之间迭代添加径向渐变。然后应用一个面包圈面具到那个。 当你改变屏蔽CAShapeLayer的strokeEnd值时，你也旋转底层的径向渐变。 因为它们一起移动，看起来笔画本身有一个渐变。