IOS ::我们如何实现这个[Curved Progress Bar]

Question

我需要实现这个功能。请建议我。 它不能正常工作意味着它采用填充颜色的结束角度，但这里提到了＆＃34; fromValue＆＃34;和＆＃34; toValue＆＃34;但它不会通过fromValue和toValue。 请任何人都可以编辑我的代码。 提前谢谢。

 CAShapeLayer *circle=[CAShapeLayer layer];
       circle.path=[UIBezierPath bezierPathWithArcCenter:CGPointMake(self.img_View.frame.origin.x, self.img_View.frame.origin.y) radius:50 startAngle:0 endAngle:90 clockwise:YES].CGPath;
    circle.fillColor=[UIColor clearColor].CGColor;
    circle.strokeColor=[UIColor greenColor].CGColor;
    circle.lineWidth=16;
    CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration=10;
    animation.removedOnCompletion=NO;
   // animation.fromValue=@(0);
    animation.fromValue=[NSNumber numberWithInt:0];
    animation.toValue=[NSNumber numberWithInt:20];
    animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    [circle addAnimation:animation forKey:@"drawCircleAnimation"];
    [img_View.layer.sublayers makeObjectsPerformSelector:@selector(removeFromSuperlayer)];
    [img_View.layer addSublayer:circle];

Answer 1

你可以使用UIBezierPath来绘制形状非常有效。 您用作剪辑的bezier路径似乎只是圆的一小部分，而在您显示的图像中，路径更复杂：圆的2个分数，由2条线连接，整个路径具有“环”形状

这种方法应该可行，我用它来制作具有相同外观的计时器。虽然我没有直接使用AngleGradientLayer，但我修改了它的 - （CGImageRef）newImageGradientInRect：（CGRect）rect方法来返回一个UIImage。但我不得不将此图像旋转+ PI / 2，因为Pavlov渐变角度渐变水平开始。

我使用UIImage，因为它是一个不会改变的背景，所以我在我的图层中保存了这个UIImage的实例，并在每次更新剪切路径时绘制它

- (void)drawInContext:(CGContextRef)ctx {

   UIBezierPath *currentPath = [self timerPath];
   // other drawing code for glow (shadow) and white stroke)
   CGContextAddPath(ctx, currentPath.CGPath);

   // clip !
   CGContextClip(ctx);
   CGContextDrawImage(ctx, self.bounds, _circularGradientImage.CGImage);

   //_circularGradientImage from modified newImageGradientInRect method.

}