Cubic bezierエディタ

カーブ上の2つのコントロールポイントをドラッグしてイージングを自由に作れます。ease-in-outなどのプリセットから始めて調整することもできます。4つの数値入力はハンドルと連動しているので、手入力でも目で見ながらでも微調整できます。プレビューアニメーションはイージングとリニア(等速)の動きを並べて再生するので、通常のペースと比べてどれだけ速く、あるいはゆっくり動くかが一目でわかります。

カーブエディタはどういう仕組みですか?

CSSのcubic-bezier()イージングは、2つのコントロールポイント(x1, y1)と(x2, y2)で定義され、カーブの始点と終点は(0,0)と(1,1)に固定されています。x座標は時間を表し、CSSの仕様どおり常に0〜1の範囲に収まりますが、進捗を表すy座標はこのエディタでは範囲を超えて動かせます(おおよそ-1〜2)。これにより、組み込みのease-in-backやease-out-backプリセットのように、目標を一度通り越してから収まるオーバーシュート効果もデザインできます。内部的には、ブラウザが行うのと同じ方法でカーブを評価しています。ある時刻に対応するカーブ上の点を、ニュートン法を数回繰り返して求め、カーブが平坦すぎてニュートン法がすぐ収束しない場合は二分法にフォールバックします。

cubic-bezier(...)の値を数値入力欄に直接貼り付けることもでき、x座標が有効な0〜1の範囲に収まっていれば、ドラッグ可能なハンドルとして再現されます。

描いた内容はどこかにアップロードされますか?

されません。カーブエディタ、その計算処理、プレビューアニメーションはすべてブラウザ内で完結します。描いた内容がどこかにアップロードされることはなく、サーバーとのやり取りも一切発生しません。

ボタンを押したときの小気味よいease-out、モーダルが登場するときの弾むようなオーバーシュート、デザインツールのモーション仕様に合わせたカーブなど、CSSのトランジションやアニメーションの調整に使えます。できあがったcubic-bezier()の値はそのままスタイルシートにコピーできます。transition-timing-functionやanimation-timing-functionとの関係についてはMDNのeasing-functionリファレンスを、正確な構文はcubic-bezier()関数リファレンスを参照してください。