6

形状を (楕円形から四角形に、またはその逆に) アニメーション化する方法は?

汚いコード:

UIBezierPath *roundedRectBezierPath = [UIBezierPath bezierPathWithRoundedRect:newRect cornerRadius:10];
UIBezierPath *ovalBezierPath = [UIBezierPath bezierPathWithOvalInRect:newRect];

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
animation.duration = 3;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

if (isRect) {

    self.shapeLayer.path = roundedRectBezierPath.CGPath;
    animation.fromValue = (__bridge id)(ovalBezierPath.CGPath);
    animation.toValue = (__bridge id)(roundedRectBezierPath.CGPath);

} else {

    self.shapeLayer.path = ovalBezierPath.CGPath;
    animation.fromValue = (__bridge id)(roundedRectBezierPath.CGPath);
    animation.toValue = (__bridge id)(ovalBezierPath.CGPath);

}    

[self.shapeLayer addAnimation:animation forKey:@"animatePath"];

結果は奇妙です：

悪いアニメーション

奇妙な再描画ではなく、形状が縮小/拡大することを期待しています。

4

1 に答える 1

12

ドキュメントを見ると、これはまさに期待どおりの動作です。ドキュメントから：

2 つのパスのコントロール ポイントまたはセグメントの数が異なる場合、結果は未定義です。

これは 2 つの方法で回避できます。

  • 両方が同じ数のパスを持つことを保証できる方法で、自分でパスを作成します
  • パス遷移のカスタム アニメーションを自分で作成します。

セグメントとコントロール ポイントの数が同じパスを作成する

最初のオプションではaddArcWithCenter:radius:startAngle:endAngle:clockwise:、丸みを帯びた四角形を構成するために 4 回使用します。(パスに直線が自動的に追加されます)。ベジエ パスの構築については、 「ベジエ パスのように考える」 (私が執筆)で詳しく読むことができます。円弧をパスに追加する方法を理解するのに役立つインタラクティブな要素がいくつかあります。      

カスタム パス アニメーションを作成する

もう 1 つのオプションは、さまざまな数のコントロール ポイントやセグメントを使用して任意の方法でパスを作成し、自分でアニメーションを作成することです。これは、シェイプ レイヤーを使用して独自のパス アニメーションを作成する方法の優れた説明です。

于 2013-07-03T11:14:55.187 に答える