Draw CAShapeLayer strokeEnd circle one way

I implemented a basic line drawing animation for a progress bar. The line has a round cap. When I move the slider, the line ending the end line has a rounded cap, but when you start it is square. below is the code I'm using, did I miss something?

Attached Image: Expected Output

expected conclusion

Below code I tried

@interface ViewController ()
{

CGPoint center;
CGFloat radius;

}

 @end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
center = CGPointMake(200.0, 200.0);
self.view.layer.backgroundColor = [[UIColor grayColor] CGColor];


 }
- (IBAction)greenSlider:(UISlider *)sender {
[self.view.layer addSublayer:[self drawArcAtCenter:center startAngle:sender.minimumValue endAngle:sender.value radius:100.0 withColor:[UIColor greenColor]]];
 }
 - (IBAction)blueSlider:(UISlider *)sender {
int value = (int)sender.value;
if (value > 360) {
    value = value % 90;
}
[self.view.layer addSublayer:[self drawArcAtCenter:center startAngle:sender.minimumValue endAngle:(float)value radius:100 withColor:[UIColor blueColor]]];
}


- (CAShapeLayer *) drawArcAtCenter:(CGPoint)newCenter startAngle:(CGFloat)sAngle endAngle:(CGFloat)bAngle radius:(CGFloat) radious withColor:(UIColor*) color
{
CGFloat begAngle = sAngle * 3.1459 / 180.0;
CGFloat endAngle = bAngle * 3.1459 / 180.0;


CAShapeLayer *layer = [CAShapeLayer layer];

UIBezierPath *path = [UIBezierPath bezierPath];
[path addArcWithCenter:newCenter radius:radious startAngle:begAngle endAngle:endAngle clockwise:YES];


layer.path = [path CGPath];
layer.strokeColor = [color CGColor];
layer.fillColor = [[UIColor clearColor] CGColor];;
layer.lineWidth = 50.0;
layer.strokeEnd = 50.0f;
layer.lineCap = kCALineCapRound;
layer.cornerRadius = 30.0f;

return layer;
 }

coming output

+4
source share

Source: https://habr.com/ru/post/1607415/


All Articles