IOS::How we can implement this [Curved Progress Bar]

Question

I need to implement this functionality.Please suggest me. It's not working properly means it is taking the end angle for the filling colour but here mentioned the "fromValue" and "toValue" but its not going through the fromValue and toValue. Please anyone can edit my code. Thanks in advance.

 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];

enter image description here

http://stackoverflow.com/questions/28534678/cashapelayer-shadow-with-uibezierpath ? — Larme, Mar 04 '15 at 12:07

score 0 · Answer 1 · edited May 10 '19 at 15:30

you can do it with UIBezierPath it is very efficient to draw shapes. The bezier path you use as a clip seems to be just a fraction of a circle, while in the image you show, the path is more complex : 2 fractions of a circle, linked by 2 lines, the whole path having a 'ring' shape.

This approach should work, I used it for a timer with the same kind of look. Although I didn't used directly AngleGradientLayer, I modified its - (CGImageRef)newImageGradientInRect:(CGRect)rect method to return a UIImage. But I had to rotate this image by + PI/2, as Pavlov gradient angular gradient starts horizontally.

I use a UIImage, because it's a background that DOESN'T change, so I saved an instance of this UIImage in my layer, and draw it whenever I update the clipping path

- (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.

}

Thanks for giving the response.Can you give the sample code.Please — Ravikumar, Mar 04 '15 at 13:40
i hope this will help you http://stackoverflow.com/questions/13573676/circular-progress-bars-in-ios — bLacK hoLE, Mar 04 '15 at 14:03
Please help me. just i want only same as the above image.Can you edit my code. — Ravikumar, Mar 04 '15 at 14:26

IOS::How we can implement this [Curved Progress Bar]

1 Answers1