ios - 使用 CAShapeLayer 创建的动画圆的 CAGradientLayer 问题

Question

我正在使用 UIBezierPath 和 CAShapeLayer 绘制动画圆。现在在添加渐变效果时出现的问题是 - CAGradientLayer 从倒置添加它的渐变效果。但是我想要从圆的起点到圆的终点的渐变效果。

我得到的是 -

我的代码是 - (这是一个函数)

 circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(radius+6,radius+6)  radius:radius startAngle:DEGREES_TO_RADIANS(startAngle) endAngle:DEGREES_TO_RADIANS(endAngle) clockwise:isClockWise].CGPath;

    //circle.position = CGPointMake(CGRectGetMidX(self.frame)-radius, CGRectGetMidY(self.frame)-radius);

    circle.fillColor = fillColor.CGColor;
    circle.strokeColor = strokeColor.CGColor;
    circle.lineWidth = lineWidth;
    circle.strokeEnd = percentToDraw/100;
    circle.lineCap = kCALineCapRound;

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.startPoint = CGPointMake(0.5,1.0);
    gradientLayer.endPoint = CGPointMake(0.5,0.0);
    gradientLayer.frame = CGRectMake(0, 0, self.frame.size.width , self.frame.size.height);
    NSMutableArray *colors = [NSMutableArray array];
    [colors addObject:(id)[UIColor blackColor].CGColor];
    [colors addObject:(id)strokeColor.CGColor];

    gradientLayer.colors = colors;
    [gradientLayer setMask:circle];

    [self.layer addSublayer:gradientLayer];

    CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    drawAnimation.duration            = duration;
    drawAnimation.repeatCount         = 1.0;

    drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    drawAnimation.toValue   = [NSNumber numberWithFloat:percentToDraw/100];

    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

    [circle addAnimation:drawAnimation forKey:@"drawCircleAnimation"];

如何添加渐变，使其开始(红色)并前进到终点(黑色)。 ？

Answer 1

假设您正在谈论圆锥形/角度渐变，那么没有系统提供的方法可以使用 CAGradientLayer 实现它。有图书馆，如AngleGradientLayer尝试提供此功能，但是，与任何第 3 方解决方案一样，应谨慎使用。

您还可以查看类似讨论的方法 here或 here ，但是他们会要求您稍微重构您的逻辑。

请注意，此建议仅适用于循环情况。