貝塞爾曲線的動畫大小

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"];