3次ベジェ曲線エディタ

3次ベジェ曲線エディタの機能

• 01

  曲線をドラッグしてモーションを見る

  2 つのドラッグ可能なハンドルがベジェの開始と終了を制御します。付随のボール アニメーションは選択した期間で曲線を再生し、ページを離れる前にオーバーシュートとイーズアウト感をプレビューできます。

• 02

  すべての標準プリセット

  CSS の組み込み ease、linear、ease-in、ease-out、ease-in-out から始めて、調整します。ハンドルを移動すると、プリセットが自動的に "custom" に切り替わります。

• 03

  1 クリックで CSS をコピー

  cubic-bezier() 値は小数点以下 2 桁の精度でリアルタイム更新され、transition-timing-function または animation-timing-function にそのまま挿入できます。

3次ベジェ曲線エディタのよくある質問

Y 値が 1 を超えたり 0 未満になったりできるのはなぜですか？

0–1 の範囲外のベジェ コントロール ポイントは、オーバーシュートとアンダーシュート効果を生成します——曲線は終点を超えて定算される前に進みます。これが「バウンシー」イージング曲線の作成方法です。X 軸は 0–1 のままである必要があります。

出力をどのように使用しますか？

cubic-bezier(...) 文字列をコピーして、任意の CSS transition-timing-function または animation-timing-function 値に貼り付けます。すべてのモダン ブラウザで動作します。

プレビューは CSS が実行する処理と同じくらい正確ですか？

はい——プレビューはブラウザがトランジションに使用するのと同じ 3次ベジェ公式を使用して、ボールを 0 から 100% までアニメーション化します。期間スライダーを使用して、コミットする前に遅いカーブと速いカーブを感じられます。

ease-in-out は実際には何を意味していますか？

Ease-in-out は遅く始まり、途中で加速し、最後に再び遅くなります——cubic-bezier(0.42, 0, 0.58, 1) 曲線です。ほとんどの洗練された UI モーションのデフォルトです。実体物体が加速および減速する方法を反映しているためです。