I am drawing an animated circle using the UIBezierPath and CAShapeLayer. Now while adding the gradient effect the problem occurring is - CAGradientLayer adds it's gradient effect from upside down. But I want gradient effect from the starting point of the circle to the end point of the circle.
我正在使用UIBezierPath和CAShapeLayer绘制动画圆圈。现在,在添加渐变效果时,出现的问题是 - CAGradientLayer从上下颠倒添加渐变效果。但我想要从圆的起点到圆的终点的渐变效果。
What I am getting is -
我得到的是 -
My code is - (it's a function)
我的代码是 - (这是一个函数)
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"];
How do I add gradient so that it starts(with red) and goes forward to finish point(with black). ?
如何添加渐变以使其开始(带红色)并前进到终点(带黑色)。 ?
1 个解决方案
#1
Assuming you are talking about a conical/angle gradient, then there is no system provided method for achieving that with CAGradientLayer. There are libraries such as AngleGradientLayer that try to provide this functionality, however, as with any 3rd party solution, it should be used with caution.
假设您正在谈论圆锥/角度梯度,那么没有系统提供的方法来实现CAGradientLayer。有一些像AngleGradientLayer这样的库试图提供这种功能,但是,与任何第三方解决方案一样,它应该谨慎使用。
You can also look at approaches like ones discussed here or here, however they would require you to slightly refactor your logic.
您还可以查看此处或此处讨论的方法,但是它们需要您稍微重构一下您的逻辑。
Note that this suggestions would only work in a circular case.
请注意,此建议仅适用于圆形案例。
#1
Assuming you are talking about a conical/angle gradient, then there is no system provided method for achieving that with CAGradientLayer. There are libraries such as AngleGradientLayer that try to provide this functionality, however, as with any 3rd party solution, it should be used with caution.
假设您正在谈论圆锥/角度梯度,那么没有系统提供的方法来实现CAGradientLayer。有一些像AngleGradientLayer这样的库试图提供这种功能,但是,与任何第三方解决方案一样,它应该谨慎使用。
You can also look at approaches like ones discussed here or here, however they would require you to slightly refactor your logic.
您还可以查看此处或此处讨论的方法,但是它们需要您稍微重构一下您的逻辑。
Note that this suggestions would only work in a circular case.
请注意,此建议仅适用于圆形案例。