ios - 使用 Core Animation 图层绘制圆锥形或弧形渐变

Question

我需要绘制一条圆形线并使用 Core Animation 用渐变填充这条线。这不是主要问题，因为我使用的是 CAGradientLayer 并使用 CAShapeLayer 对其进行屏蔽。问题是梯度应该像 this 中看到的那样线。

已经有很多解决方案，但让我解释一下为什么它们对我不起作用:

-我不能使用图像，因为我需要为 CAGradientLayer

的位置属性数组设置动画

-我没有使用 Core Graphics 来绘制所有内容，因为正如我所说，我尝试绘制的这个圈子中的几乎所有内容都应该是可动画的。

-类(class)可用here是一个可能的解决方案，但不是最优的，因为它需要为我需要绘制的每个圆圈创建一个新 View ，这对我来说不是最优的(如果没有其他解决方案，我可能会使用这个)

-我无法使用 this 中的解决方案问题，因为它只适用于简单的双色渐变

这是我用来画圆的代码:

int radius = 100;
CAShapeLayer *circle = [CAShapeLayer layer];
circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 60, 2.0*radius,    2.0*radius)cornerRadius:radius].CGPath;

circle.lineWidth = 10;
circle.fillColor = [UIColor clearColor].CGColor;
circle.strokeColor = [UIColor blackColor].CGColor;



CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = CGRectMake(50, 60, 300, 300);
gradientLayer.startPoint = CGPointMake(0.5,1.0);
gradientLayer.endPoint = CGPointMake(0.5,0.0);
gradientLayer.frame = CGRectMake(0, 0, 300, 300);
NSMutableArray *colors = [NSMutableArray array];
NSMutableArray *locations = [NSMutableArray array];
[colors addObject:(id)[[UIColor colorWithRed:134.0/255.0 green: 234.0/255.0   blue:63.0/255.0 alpha:1.0] CGColor]];
[colors addObject:(id)[[UIColor colorWithRed:215.0/255.0 green: 82.0/255.0 blue:76.0/255.0 alpha:1.0] CGColor]];
[colors addObject:(id)[[UIColor colorWithRed:28.0/255.0 green:28.0/255.0 blue:28.0/255.0 alpha:1.0] CGColor]];
[locations addObject:(id)[NSNumber numberWithFloat:0.2]];
[locations addObject:(id)[NSNumber numberWithFloat:0.5]];
[locations addObject:(id)[NSNumber numberWithFloat:0.8]];
gradientLayer.colors = colors;
gradientLayer.locations = locations;
[gradientLayer setMask:circle];

[sender.layer addSublayer:gradientLayer];

Answer 1

我建议使用自定义 Core Image 过滤器来解决问题。

对于每个像素，您可以计算与过滤图像中心的角度。将此角度转换为 0.0 到 1.0 之间的值。使用这些值，您可以将颜色值映射到计算出的像素。

如果您编写这个“Core Image Kernel Language”，它应该处理得非常快。您可以使用核心动画对输入值进行动画处理，从而对生成的渐变进行动画处理。