CAShapeLayer LineCap在CABasic动画结束时不合适

Question

我已经为进度条实现了一个基本的线条绘制动画。该线条有一个圆形边缘。当我为线条绘制动画时，线条的开头是一个圆形的帽子，但最后它是一个正方形。下面是我正在使用的代码我错过了什么？

CAShape图层代码：

 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动画代码：

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

附加图片：

Answer 1

我在代码中没有发现任何错误。我创建了一个新项目并将您的代码粘贴到viewDidLoad并且工作正常。代码供您参考。

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

我认为你应该尝试改变

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

到

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