动画CAShapeLayer遵循UIBezierPath的行

Question

我试图动画UIBezierPath的笔画，就好像用铅笔绘图一样。

然而，我发现这个图层似乎是通过连接曲线上的第一个和最后一个点来创建整个形状 - 这不是我想要的。我只是想要一行描边2.0来制作动画。这是我的代码：

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(20.0f, 20.f)];
[path addLineToPoint:CGPointMake(20.f, 200.f)];

CGFloat radius = 6.f;
[path addArcWithCenter:CGPointMake(20.f + radius, 200.f) radius:radius startAngle:M_PI endAngle:M_PI/2 clockwise:NO];
[path addLineToPoint:CGPointMake(240, 200.f+radius)];
[path addLineToPoint:CGPointMake(240.f, 480.f)];
[path stroke];

CAShapeLayer *shapeLayer = [CAShapeLayer layer];

shapeLayer.path = [path CGPath];
shapeLayer.strokeColor = [[UIColor redColor] CGColor];
shapeLayer.lineWidth = 2.0;

[self.scrollView.layer addSublayer:shapeLayer];

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 4.f;
pathAnimation.fromValue = @(0.0f);
pathAnimation.toValue = @(1.0f);
pathAnimation.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.6 :0.3 :0.8 :0.45];
[shapeLayer addAnimation:pathAnimation forKey:@"strokeEnd"];

以下是它的样子：