0

アニメーションは次のタイミング関数に従います: cube-bezier(0.25, 0.1, 0.25, 1.0)

この関数を変更したいので、最後の 40% を取得します。簡単にするために、関数の 50% を終了させたいとだけ言っておきましょう。これどうやってするの。

グラフィカルに、これはそれが何であるかです: https://developer.mozilla.org/files/3429/cubic-bezier,ease.png

そして、グラフィカルに上部のみが表示されるようなパラメーターを使用してキュービックベジエを作成したいので、このグラフの 0.5 から 1 (yaxist の) 部分に見えるものは、同じ線を作成したいのですが、0 から1に。

この機能の作り方を教えてください。

4

1 に答える 1

3

t0 から 1 までの 3 次曲線のセクションのみが必要な場合は、新しい座標が必要なものを決定するための「単純な」式があります。実装が非常に簡単なので簡単だと言いますが、実装が実際に機能する理由も知りたい場合は、一般的に数学に飛び込む必要があり、一部の人々はそれを怖いと考えています。

(行列分割に関するセクションの最終結果は、それが機能する理由の説明を読む必要なく、任意の分割点の新しい座標をほぼ提供します)

曲線の例を見てみましょう。まず、曲線の元の座標が何であるかを把握する必要があります。(0,0)-(0.4,0.25)-(0.2,1)-(1,1) と推測します。次に、その曲線を で分割したいt=0.4ので、新しい座標を導き出す方法を示す最後のビットを除いて、セクション 7 をすべて無視します。任意の分割点t=z(z は 0 と 1 の間のどこか) に対して、2 つの新しい座標セットを用意します。1 つは分割点の「前」の曲線用で、もう 1 つは分割点の「後」用です。後者が必要です。だから私たちは選ぶ：

分割後の曲線の座標導出

0.4 を差し込むだけzです。新しい最初のポイントは0.064 * P4 - 3 * 0.096 * P3 + 3 * 0.144 * P2 + 0.216 * P1 = 0.2944(2 回評価する必要があります。x 値に対して 1 回、y 値に対して 1 回) です。P2、P3、P4 についても同じことを行います (ただし、4 番目のポイントはもちろん同じなので気にする必要はありません。(1,1) であり、分割後も (1,1) のままです)。

それでは、それを javascript で実装しましょう。

function split(options) {

  var z = options.z,
      cz = z-1,
      z2 = z*z,
      cz2 = cz*cz,
      z3 = z2*z,
      cz3 = cz2*cz,
      x = options.x,
      y = options.y;

  var left = [
    x[0],
    y[0],
    z*x[1] - cz*x[0], 
    z*y[1] - cz*y[0], 
    z2*x[2] - 2*z*cz*x[1] + cz2*x[0],
    z2*y[2] - 2*z*cz*y[1] + cz2*y[0],
    z3*x[3] - 3*z2*cz*x[2] + 3*z*cz2*x[1] - cz3*x[0],
    z3*y[3] - 3*z2*cz*y[2] + 3*z*cz2*y[1] - cz3*y[0]];

  var right = [
    z3*x[3] - 3*z2*cz*x[2] + 3*z*cz2*x[1] - cz3*x[0],
    z3*y[3] - 3*z2*cz*y[2] + 3*z*cz2*y[1] - cz3*y[0],
                    z2*x[3] - 2*z*cz*x[2] + cz2*x[1],
                    z2*y[3] - 2*z*cz*y[2] + cz2*y[1],
                                    z*x[3] - cz*x[2], 
                                    z*y[3] - cz*y[2], 
                                                x[3],
                                                y[3]];
  return { left: left, right: right};
}

取引完了。この関数は、2 つの新しい間隔としてモデル化されていることを除いて、一緒に取られた場合、元の曲線と数学的に同一leftである 2 つのサブ曲線 (および と呼ばれるright、両方とも x1/y1/x2/y2/... 順序の Number[8] 配列) を提供します。 z が 0 と 1 の間の任意の分割点。作業は永遠に行われます。t=[0,1]t=z

于 2014-05-04T04:25:55.367 に答える