CSS キュービックベジェ ジェネレーター

イージング関数は、アニメーションがどのように加速し、減速するかを決めます。CSS（そしてWeb Animations APIや多くのゲームエンジン）では cubic-bezier(x1, y1, x2, y2) と書きます。(0, 0)から(1, 1)までの曲線を2つのハンドルで整えて動きを作る方法です。このジェネレーターは、CSSのキーワード、easings.netの人気の曲線（easeOutCubic、easeInOutQuart、easeOutBackなど）、自作のハンドルを用意し、曲線をグラフにし、その曲線でボールを動かし、継続時間の10%ごとの進行率を表にします。

使い方

1. プリセットを選ぶか、「カスタム」を選んでx1、y1、x2、y2を入力します。
2. 継続時間とアニメーションさせるプロパティを設定します。
3. プレビューのボールを見て、進行率の表を読みます。
4. transition、animation、またはJavaScriptのコードをコピーします。

計算式

x(u) = 3(1−u)²u·x1 + 3(1−u)u²·x2 + u³ · y(u) = 3(1−u)²u·y1 + 3(1−u)u²·y2 + u³

時間の割合tに対して、曲線のパラメーターuをx(u) = tで解き（ニュートン・ラフソン法、うまくいかない場合は二分法）、y(u)を進行率として返します。x1とx2は0〜1の範囲に、yの値が0〜1の外にあると行き過ぎが起こります。

計算例

キーワード ease は cubic-bezier(0.25, 0.1, 0.25, 1) です。継続時間の半分の時点で、要素はすでに距離の 80.24% を進んでおり、easeが最初は速く最後はゆるやかに感じられる理由です。ease-in（0.42, 0, 1, 1）は同じ時点で31.54%しか進んでいません。easeOutBackは行き過ぎます。半分の時点で 108.74% に達してから戻ります。