贝塞尔曲线的动画大小

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，我可能会使用约束，但我似乎无法找到任何资源来帮助我在这种情况下使用它们。

查看了 Whosebug 上不同问题的许多答案后，我似乎可能需要使用 CABasicAnimation，但问题主要是为直线的曲线而不是直线的长度设置动画。

这个问题比较难，因为画线的方法（起点，一系列路径，终点）和画圆的方法好像很不一样。这意味着我不知道我正在寻找的过程是否相同或不同。一个答案 here 似乎有一个动画线的解决方案，但我创建圆的代码没有使用起点或终点，这意味着它没有太大帮助。

我考虑过使用单独的圆弧来创建圆，然后更改它们的起点和控制点，但这些圆弧似乎不是完美的圆形，更多用于自定义波浪线。 here 有一个例子，但它不适用于 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"];

贝塞尔曲线的动画大小

Animate size of a bezier curve

objective-c

uibezierpath

bezier