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，但问题主要是为线的曲线设置动画而不是线的长度。

这个问题很难，因为用于绘制直线（起点，一系列路径，终点）的方法看起来与绘制圆形的方法非常不同。这意味着我不知道我正在寻找的过程是相同还是不同。答案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"];

贝塞尔曲线的动画大小

1 个答案: