2

私の3次ベジェ関数は、次の式で定義され[0.1,0.8,0.2,1]ます[x1,y1,x2,y2]。

私は1200msの持続時間で要素を720度回転させています。t60度ごとに計算する方法は？60, 120, 180, 240, 300, 360, 420, 480, 540, 600, 660, 720つまり、オブジェクトが度を変えたときにJavaScriptイベントをトリガーする必要があります。

間違えない限り、yが存在するすべてのx値を取得してから、(60/720), (60/720)*2, (60/720)*3, (60/720)*4, (60/720)*5, (60/720)*6, (60/720)*7, (60/720)*8, (60/720)*9, (60/720)*10, (60/720)*11, (60/720)*12x * duration（1200ms）を乗算する必要があります。

http://blog.greweb.fr/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/とhttps://github.com/arianを見てきました/cubic-bezierの実装。

これまでのすべてが正しい場合、yのx値を取得するにはどうすればよいですか？

4

1 に答える 1

1

まず、あなたが持っているのはベジェスプラインではなく、緩和曲線です。アニメーションの作成に使用される開始点（0.0,0.0）と終了点（1.0,1.0）を持つ3次ベジェスプラインの特殊なケースです。

次に、等しい角度の回転間隔ではなく、等しい時間間隔を使用すると、アニメーションの見栄えが良くなります。tは本質的に時間パラメータであるため、曲線は次の式で与えられます。

y(t) = 3*(1-t)^2*t*y1 + 3*(1-t)*t^2*y2 + t^3.

ここで、区間にt属します[0.0,1.0]。

その場合、実際の角度は次のようになります

α(t) = 720 * y(T/1200)
     = 720 * (2.4*(1-T/1200)^2*(T/1200) + 3*(1-T/1200)*(T/1200)^2 + (/1200)^3)

ここで、Tはミリ秒単位の時間です。

于 2013-02-08T21:40:00.810 に答える