8

CAShapeLayerのパスの値を楕円から長方形に変更する明示的なアニメーションを作成すると、問題が発生します。

キャンバスコントローラーで、基本的なCAShapeLayerをセットアップし、ルートビューのレイヤーに追加します。

CAShapeLayer *aLayer;
aLayer = [CAShapeLayer layer];
aLayer.frame = CGRectMake(100, 100, 100, 100);
aLayer.path = CGPathCreateWithEllipseInRect(aLayer.frame, nil);
aLayer.lineWidth = 10.0f;
aLayer.strokeColor = [UIColor blackColor].CGColor;
aLayer.fillColor = [UIColor clearColor].CGColor;
[self.view.layer addSublayer:aLayer];

次に、パスをアニメーション化すると、アニメーションの最後の数フレームでシェイプが長方形になり、最初の数フレームで図形が長方形から離れてアニメーション化すると、奇妙なグリッチ/ちらつきが発生します。アニメーションは次のように設定されています。

CGPathRef newPath = CGPathCreateWithRect(aLayer.frame, nil);
[CATransaction lock];
[CATransaction begin];
[CATransaction setAnimationDuration:5.0f];
CABasicAnimation *ba = [CABasicAnimation animationWithKeyPath:@"path"];
ba.autoreverses = YES;
ba.fillMode = kCAFillModeForwards;
ba.repeatCount = HUGE_VALF;
ba.fromValue = (id)aLayer.path;
ba.toValue = (__bridge id)newPath;
[aLayer addAnimation:ba forKey:@"animatePath"];
[CATransaction commit];
[CATransaction unlock];

CATransactionのロック/ロック解除、さまざまな塗りつぶしモードでの再生など、さまざまなことを試しました...

グリッチの画像は次のとおりです： http ：//www.postfl.com/outgoing/renderingglitch.png

私が経験していることのビデオはここで見つけることができます：http： //vimeo.com/37720876

4

2 に答える 2

8

私はquartz-devリストからこのフィードバックを受け取りました：

デビッドダンカンは書いた：

シェイプレイヤーのパスのアニメーション化は、好きなものから好きなものへとアニメーション化する場合にのみ機能することが保証されています。長方形は一連の線であり、楕円は一連の円弧であり（CGPathApplyを使用して生成されたシーケンスを確認できます）、そのため、それらの間のアニメーションが非常に見栄えがよく、まったくうまく機能することは保証されません。

これを行うには、基本的に、楕円の作成に使用するのと同じ曲線を使用して長方形のアナログを作成する必要がありますが、レンダリングを長方形のように見せるためのパラメーターを使用します。これはそれほど難しいことではありませんが（また、CGPathAddEllipseInRectで作成されたパスでCGPathApplyから取得したものをガイドとして使用できます）、正しく行うには多少の調整が必要になる可能性があります。

于 2012-03-01T19:40:10.723 に答える
5

残念ながら、これはCAShapeLayersのアニメーション化可能なパスプロパティの制限です。

基本的に、2つのパス間を補間しようとします。デスティネーションパスとスタートパスのコントロールポイントの数が異なると問題が発生します。カーブとストレートエッジではこの問題が発生します。

楕円を単一の楕円ではなく4つの曲線として描画することで、影響を最小限に抑えることができますが、それでも完全には正しくありません。カーブからポリゴンにスムーズに移行する方法が見つかりませんでした。

そこまでほとんど到達してから、最後の部分のフェードアニメーションに移行できる場合がありますが、これは見栄えがよくありません。

于 2012-03-01T08:50:47.997 に答える