贝塞尔曲线的动画大小答案

【问题标题】：Animate size of a bezier curve贝塞尔曲线的动画大小
【发布时间】：2016-01-14 03:32:19
【问题描述】：

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

目前我有以下代码在 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，但问题主要是为线条的曲线而不是线条的长度制作动画。

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

我曾考虑使用单独的弧线来创建圆，然后更改它们的起点和控制点，但这些弧线似乎不是完美的圆形，更多用于自定义摆动线。 here 有一个例子，但它不适用于 iOS。

【问题讨论】：

标签： objective-c uibezierpath bezier

【解决方案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"];

【讨论】：