ios - para - Aplicar degradado de color al arco creado con UIBezierPath

correccion de color final cut

Question

Quiero crear una barra de progreso que tenga la forma de un arco. El color de la barra de progreso tiene que cambiar de acuerdo a los valores.

UIBezierPath bezierPathWithArcCenter un arco usando UIBezierPath bezierPathWithArcCenter . Use el siguiente código:

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

}

El resultado se ve así:

Mi pregunta es: ¿Cómo aplicar un degradado al color si, por ejemplo, el valor es <= 50%? También creé un UIButton que genera números aleatorios de CGFloat para conectarlo con la barra de progreso. ¿Alguien tiene una idea de cómo abordar esto?

El gradiente se vería algo así:

¡Cualquier ayuda sería apreciada!

Muchas gracias.

Granito

Answer 1

Puede usar un CAGradientLayer para obtener el efecto de degradado y usar el CAShapeLayer como máscara.

p.ej:

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

Para dibujar un gradiente a lo largo de un trazo, vea esta implementación: https://.com/a/43668420/917802

EDITAR: En resumen, cree una clase UIView personalizada, agregue un degradado radial iterando entre dos colores en ángulos crecientes, por ejemplo, color1 = 1 grado, color2 = 2 grados, etc., hasta 360. Luego, aplique una máscara de rosquilla a ese. A medida que cambia el valor de strokeEnd del enmascaramiento CAShapeLayer, también gira el degradado radial subyacente. Debido a que se mueven juntos, parece que el trazo tiene un gradiente.