将渐变颜色应用于使用UIBezierPath创建的圆弧

我想创建一个具有圆弧形式的进度栏。进度条的颜色必须根据值更改。将渐变颜色应用于使用UIBezierPath创建的圆弧

我使用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"]; 

}

结果看起来是这样的：

enter image description here

我的问题是：如何将渐变应用到如即值< = 50％的颜色？我还创建了一个UIButton，它会生成随机的CGFloat数字，以便将其与进度栏挂钩。有没有人有一个想法如何解决这个问题？

梯度会是这个样子：

enter image description here

任何帮助，将不胜感激！

非常感谢。

格兰尼特

来源

2013-12-17 Granit

可以使用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; 


}

来源

2013-12-17 10:38:03 djshiow

非常感谢！它像一个魅力:) – Granit

很高兴它帮助:) – djshiow

+25

这看起来不会沿着路径绘制**，而是，它似乎会绘制一个水平渐变，这是通过路径显示。那有意义吗？你如何“弯曲”一个水平渐变以遵循整个圆圈？ – tracicot

沿中风绘制一个渐变，看到这样实现：https://stackoverflow.com/a/43668420/917802

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

来源

2017-04-28 10:59:25

将渐变颜色应用于使用UIBezierPath创建的圆弧

回答

相关问题