贝塞尔曲线的动画大小

Question

我想创建贝塞尔曲线的圆弧，然后对其进行动画处理以减小曲线的半径。

当前，我有以下代码在UIView中绘制贝塞尔曲线：

UIView * curveView = [[UIView alloc] initWithFrame:CGRectMake(50, 550, 100, 100)];
curveView.backgroundColor = [UIColor orangeColor];

UIBezierPath * aPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150)
                                                     radius:75
                                                 startAngle:0
                                                   endAngle:2 * M_PI
                                                  clockwise:YES];

CAShapeLayer * shapeLayer = [CAShapeLayer layer];
shapeLayer.path = aPath.CGPath;
shapeLayer.fillColor = [UIColor colorWithRed:.5 green:1 blue:.5 alpha:1].CGColor;
shapeLayer.strokeColor = [UIColor blackColor].CGColor;
shapeLayer.lineWidth = 2;

[curveView.layer addSublayer:shapeLayer];

[self.view addSubview:curveView];

如预期的那样，这将在视图中添加圆形贝塞尔曲线。 我要解决的问题是为曲线设置动画以使其在一定时间内缩小。

如果我使用的是UIViews，则可能会使用约束，但是在这种情况下，我似乎找不到任何资源来帮助我使用它们。

浏览了关于Stackoverflow的不同问题的许多答案之后，似乎我可能需要使用CABasicAnimation，但是这些问题主要是为直线的曲线而不是直线的长度设置动画。

这个问题很难解决，因为绘制直线（起点，一系列路径，终点）所用的方法似乎与绘制圆圈的方法大不相同。 这意味着我不知道我要寻找的过程是相同还是不同。 此处的答案似乎是为线设置动画的一种解决方案，但是我创建圆的代码没有使用起点或终点，这意味着它没有太大帮助。

我考虑过使用单独的弧线创建圆，然后更改其起点和控制点，但是这些弧线似乎并不是完美的圆形，而是更多地用于自定义摆动线。 有这样的例子在这里 ，但它并不适用于iOS。

Answer 1

path是CAShapeLayer上的动画属性。 如果创建第二个较小的圆形路径版本，则可以在这两个路径之间进行动画处理，就像创建任何其他可设置动画的属性一样。

UIBezierPath *smallerPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:25 /* note different radius */ startAngle:0 endAngle:2 * M_PI clockwise:YES];

CABasicAnimation *shrinkAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
shrinkAnimation.fromValue = (id)aPath.CGPath;
shrinkAnimation.toValue = (id)smallerPath.CGPath;
shrinkAnimation.duration = 1;
[shapeLayer addAnimation:shrinkAnimation forKey:@"shrink"];