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

Question

我需要绘制一条圆形线并使用 Core Animation 用渐变填充这条线。这不是一个主要问题，因为我使用的是CAGradientLayer 并用CAShapeLayer 掩盖它。问题是渐变应该像this 线程中看到的那样。

已经有很多解决方案，但让我解释一下为什么它们不适合我：

-我无法使用图像，因为我需要为 CAGradientLayer 的位置属性数组设置动画

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

-可用的类here 是一个可能的解决方案，但不是最佳解决方案，因为它需要为我需要绘制的每个圆圈提供一个新视图，这对我来说不是最佳解决方案（如果没有其他解决方案，我可能会使用这个）

-我无法使用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

我建议使用自定义核心图像过滤器来解决问题。

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

如果你写这个“核心图像内核语言”，它应该处理得非常快。您可以使用核心动画对输入值进行动画处理，以对生成的渐变进行动画处理。