CAShapeLayer LineCap not proper at end of CABasic Animation

Question

I have implemented a basic line drawing animation for a progress bar.The line has a round cap edge.When I animated the line drawing the beginning of line is having a rounded cap but in the end its a square. below is the code I am using am i missing anything??

CAShape Layer Code :

 CAShapeLayer *lineLayer = [[CAShapeLayer alloc] init];

[lineLayer setFrame: CGRectMake(0,
                                0,
                                wifisyncView.popUpView.frame.size.width,
                                wifisyncView.popUpView.frame.size.height)];

[lineLayer setPath: [linePath CGPath]];
lineLayer.lineWidth = 9.0f;
lineLayer.strokeEnd = 9.0f;
lineLayer.fillColor = [[UIColor orangeColor] CGColor];
lineLayer.lineCap = kCALineCapRound;
[lineLayer setStrokeColor:[[UIColor orangeColor] CGColor]];
[lineLayer setMasksToBounds:YES];
lineLayer.cornerRadius = 30.0f;

CABASIC Animation code :

CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
drawAnimation.duration            = 5.0; // "animate over 5 seconds "
drawAnimation.repeatCount         = 1.0;  // Animate only once..
drawAnimation.removedOnCompletion = NO;// Remain stroked after the animation..
drawAnimation.fillMode = kCAFillModeForwards;

// Animate from no part of the stroke being drawn to the entire stroke being drawn
drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
drawAnimation.toValue   = [NSNumber numberWithFloat:1.0f];

// Experiment with timing to get the appearence to look the way you want
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
drawAnimation.delegate = self;
// Add the animation to the circle
[lineLayer addAnimation:drawAnimation forKey:@"drawLineAnimation"];

Image Attached : enter image description here

score 4 · Accepted Answer · answered Jun 28 '13 at 05:18

I dont find any mistakes in your code. I created a new project and pasted your code to viewDidLoad and is working fine. Code for your reference.

UIBezierPath *linePath = [UIBezierPath bezierPath];
[linePath moveToPoint:CGPointMake(100, 100)];
[linePath addLineToPoint:CGPointMake(500, 100)];

CAShapeLayer *lineLayer = [[CAShapeLayer alloc] init];
[lineLayer setFrame:self.view.bounds];
[lineLayer setPath: [linePath CGPath]];
lineLayer.lineWidth = 9.0f;
lineLayer.strokeEnd = 9.0f;
lineLayer.fillColor = [[UIColor orangeColor] CGColor];
lineLayer.lineCap = kCALineCapRound;
[lineLayer setStrokeColor:[[UIColor orangeColor] CGColor]];
[lineLayer setMasksToBounds:YES];
lineLayer.cornerRadius = 30.0f;

[self.view.layer addSublayer:lineLayer];

CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
drawAnimation.duration            = 5.0; // "animate over 5 seconds "
drawAnimation.repeatCount         = 1.0;  // Animate only once..
drawAnimation.removedOnCompletion = NO;// Remain stroked after the animation..
drawAnimation.fillMode = kCAFillModeForwards;

// Animate from no part of the stroke being drawn to the entire stroke being drawn
drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
drawAnimation.toValue   = [NSNumber numberWithFloat:1.0f];

// Experiment with timing to get the appearence to look the way you want
drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
drawAnimation.delegate = self;
// Add the animation to the circle
[lineLayer addAnimation:drawAnimation forKey:@"drawLineAnimation"];

I think you should try changing

[lineLayer setFrame: CGRectMake(0,
                                0,
                                wifisyncView.popUpView.frame.size.width,
                                wifisyncView.popUpView.frame.size.height)];

to

[lineLayer setFrame: CGRectMake(0,
                                0,
                                wifisyncView.popUpView.bounds.size.width,
                                wifisyncView.popUpView.bounds.size.height)];

The above code of mine works good. Just figured out i had close Path statement for UIBezierPath before CAShapeLayer creation. Removed [linePath closePath] and all works good. — Karthik_S, Jun 28 '13 at 05:30
Good call. I had the same issue where I had closed a simple line path because I forgot what "closing" a path actually meant...in my case, it just draw a line straight back to the beginning, so my animations were screwed up. — CIFilter, Oct 12 '17 at 20:35

CAShapeLayer LineCap not proper at end of CABasic Animation

1 Answers1