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

Posted 2023-02-23

【中文标题】使用 CAShapeLayer 创建的动画圆的 CAGradientLayer 问题

【英文标题】：CAGradientLayer issues for animated circle created using CAShapeLayer

【发布时间】：2015-05-12 12:33:48

【问题描述】：

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

如何添加渐变，使其开始（红色）并前进到终点（黑色）。 ?

【问题讨论】：

恐怕我没有答案，但我知道渐变从矩形的一个边缘开始，随着它们靠近另一边缘慢慢改变颜色。这正是这里发生的事情，只是你用圆形路径掩盖了它。我不完全确定这可以通过 CAGradientLayer 实现。虽然如果您将矩形分成象限并为每个象限应用不同的渐变，这可能是可能的。

【参考方案1】：

假设您谈论的是锥形/角度渐变，那么没有系统提供的方法可以通过 CAGradientLayer 实现该目标。有一些库（例如 AngleGradientLayer）试图提供此功能，但是，与任何第 3 方解决方案一样，应谨慎使用它。

您还可以查看here 或here 讨论的方法，但是它们需要您稍微重构您的逻辑。

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