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

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

图片附加:

最佳答案

我在您的代码中没有发现任何错误。我创建了一个新项目并将您的代码粘贴到 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)];

关于iphone - CAShapeLayer LineCap 在 CABasic 动画结束时不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17357294/