iphone - パラボリックに変換するにはどうすればよいですか?

Question

簡単なアニメーションを使った iPhone アプリを作成しています。

翻訳したいビューがありますが、線に沿っていません。パラボリックに翻訳したい。カーブした道路を走る車をアニメートしていると想像してください。

トランスフォームを CGAffineTransform のインスタンスに適切に設定できることはわかっています

問題は、変換を作成する方法がわからないことです。縮尺、平行移動などの方法は知っていますが、放物線状に平行移動するにはどうすればよいですか? それは可能ですか？

Answer 1

滑らかな曲線に沿ってアニメーション化するには、CAKeyframeAnimation を使用する必要があります。この回答では、サイズを変更してフェードアウトしながら、画像ビューを曲線に沿って移動する結合アニメーションのコードを提供します。そのコードの関連部分は次のとおりです。

// Set up path movement
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;

CGPoint endPoint = CGPointMake(480.0f - 30.0f, 40.0f);
CGMutablePathRef curvedPath = CGPathCreateMutable();
CGPathMoveToPoint(curvedPath, NULL, viewOrigin.x, viewOrigin.y);
CGPathAddCurveToPoint(curvedPath, NULL, endPoint.x, viewOrigin.y, endPoint.x, viewOrigin.y, endPoint.x, endPoint.y);
pathAnimation.path = curvedPath;
CGPathRelease(curvedPath);

これにより、2 つの制御点を持つ曲線が作成されます。1 つはビューの原点にあり、もう 1 つはディスプレイの右上隅にあります (ランドスケープ モード)。パスの構築の詳細については、Quartz 2D プログラミング ガイドまたはアニメーション タイプおよびタイミング プログラミング ガイドを参照してください。

このアニメーションを使用するには、次のような方法でビューのレイヤーに追加する必要があります。

[imageViewForAnimation.layer addAnimation:pathAnimation forKey:@"curveAnimation"];

Answer 2

曲線に沿ってアニメーション化する審美的な方法は、スプラインを使用することです。これらは数学的に単純で、計算効率が良いです。放物線アーチを解決する最小次数スプラインは 2 次スプラインです。

Answer 3

パスに沿った画像の回転を含めるには、次を追加するだけです

pathAnimation.rotationMode = @"auto";

タイミング機能を追加して、イーズイン/アウト効果を作成することもできます

pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

Answer 4

変換プロパティを、放物線に沿って選択された x、y パラメータで作成されたものに定期的に設定する必要があるようですCGAffineTransformTranslate(Russell が提案したことを実行して、y から x を取得するか、その逆を行います)。

放物線に沿ってカーブしながら車を回転させたい (よりリアルに見える) 場合は、 が必要CGAffineTransormRotateです。現在描いている点の放物線の傾きに基づいて角度を決定します。勾配から角度を計算するには、atan() 関数が必要です。面倒くさそうですが、もっと簡単な方法があるといいのですが。

何について話しているのか本当にわかりません。このブログ エントリを読んだだけです: Demystifying CGAffineTransform .