1

ポイント y1 からポイント y2 までスプライトを何らかの減速でアニメーション化したいと考えています。点 y2 に達すると、オブジェクトの速度は 0 になるため、完全に停止します。

私は 2 つのポイントを知っており、オブジェクトの開始速度も知っています。アニメーションの時間は私にとってそれほど重要ではありません。必要に応じて決定できます。

例: y1 = 0, y2 = 400, v0 = 2501 秒あたりのピクセル数 (= 開始速度)

イージング関数について読みましたが、更新ループで実際に実装する方法がわかりませんでした。これは、イージング関数を何らかの方法で実装する必要がある場所を含む私の更新ループ コードです。

-(void)onTimerTick{
   double currentTime =  CFAbsoluteTimeGetCurrent() ;
   float timeDelta = self.lastUpdateTime - currentTime;
   self.lastUpdateTime = currentTime;

   float *pixelsToMove = ???? // here needs to be some formula using v0, timeDelta, y2, y1

   sprite.y +=  pixelsToMove;
}
4

1 に答える 1

7

タイミングはベジエ曲線として機能します

イージングのタイミング関数は、基本的に横軸に「時間」、縦軸に「変化量」(0,0)をとったベジエ曲線です。(1,1)ベジエ曲線は数学的には

start*(1-t)^3 + c1*t(1-t)^2 + c2*t^2(1-t) + end*t^3

任意の時間値を挿入して、適用する必要がある変更量を取得できます。時間と変化の両方が正規化されていることに注意してください (0 から 1 の範囲)。

変数 t は時間の値ではないことに注意してください。tは曲線に沿ってどのくらい進んだかです。時間値は、曲線に沿った点の x 値です。

下の曲線はサンプルの「イーズ」曲線で、ゆっくりと始まり、速くなり、最後には遅くなります。

たとえば、時間の 3 分の 1 が経過した場合、アニメーション化されたプロパティの値を次のように更新することに対応する変化量を計算します。

currentValue = beginValue + amountOfChange*(endValue-beginValue)

のベジエ曲線

例

から までの位置をアニメートし、と に制御点があり、持続時間が 4 秒の曲線を使用する(50, 50)とします (制御点は上の画像の制御点に近づけようとしています)。(200, 150)(0.6, 0.0)(0.5, 0.9)

アニメーションの 1 秒が経過すると (合計時間の 25%) 、曲線に沿った値は次のようになります。

(0.25,y) = (0,0)*(1-t)^3 + (0.6,0)*t(1-t)^2 + (0.5,0.9)*t^2(1-t) + (1,1)*t^3

これは、次のように計算できることを意味しますt。

0.25 = 0.6*t(1-t)^2 + 0.5*t^2(1-t) + t^3

Wolfram Alpha は私にこう言っていますt = 0.482359

入力するtと

y = 0.9*t^2*(1-t) + t^3

デュレーションの1秒が経過したときの「変化量」を取得します。

繰り返しになりますが、 Wolfram Alpha はy = 0.220626、25% の時間の後に 22% の値が変化したことを意味します。これは、曲線の開始が遅いためです (画像では、最初はほとんど平坦であることがわかります)。

最後に: アニメーションの 1 秒後の位置は

(x, y) = (50, 50) + 0.220626 * (200-50, 150-50)
(x, y) = (50, 50) + 0.220626 * (150, 100)
(x, y) = (50, 50) + (33.0939, 22.0626)
(x, y) = (50+33.0939, 50+22.0626)
(x, y) = (83.0939, 72.0626)

この例が、タイミング関数の使用方法を理解するのに役立つことを願っています。

于 2013-03-19T17:41:02.213 に答える