Drawing a conical or arc gradient using Core Animation layers

Question

I need to draw a circular line and fill this line with a gradient using Core Animation. This is not a serious problem since I am using CAGradientLayer and masking it with CAShapeLayer . The problem is that the gradient should be similar to the one that is displayed in this stream.

There are already many solutions, but let me explain why they do not work for me:

-I cannot use the image because I need to animate an array of CAGradientLayer location CAGradientLayer

-I don’t use Core Graphics to draw everything, because, as I said, almost everything in this circle that I'm trying to do should be animated.

- The accessible class here is a possible solution, but not optimal, since it requires a new view for each circle. I need to draw, which is not optimal for me (if there is no other solution, I will probably use this)

-I cannot use the solution in this question, because it only works with a simple two-color gradient

Here is the code I use to draw a circle:

 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

I would suggest using a special Core Image filter to solve the problem.

For each pixel, you can calculate the angle from the center of the filtered image. Convert this angle to a value between 0.0 and 1.0. Using these values, you can match the color value with the calculated pixel.

If you write this "Kernel Kernel", it should be processed very quickly. You can animate input values ​​using kernel animations to animate the resulting gradient.