Easing Visualizer

使い方

1. リストからイージングを選びます。Basic、4 つの CSS キーワード、9 つのファミリ（sine から bounce）の in / out / inOut、3 種類のスプリングに分かれています。
2. キャンバスを読みます。実線が選択中のイージング、破線の対角線が等速の参照、動くドットが現在時刻の進行度です。
3. Play で動作プレビューを実行します。塗りつぶしたボールがイージングに従い、白抜きのボールが等速で進みます。
4. 実際に使う再生時間を入力し、出力形式を選びます。
5. 生成されたコードをコピーします。CSS 形式は transition-timing-function、JavaScript 形式は t を受け取る独立した関数を出力します。

よくある用途

• コードを書く前にカーブを選ぶ —— easeOutCubic と easeOutQuint を同じキャンバスで比較でき、名前からの推測に頼らずに済みます。
• デザイナーにカーブを渡す —— cubic-bezier の値をデザイントークンにコピーすれば、CSS とアニメーションライブラリが同じカーブを使えます。
• 既存のモーション仕様に合わせる —— GSAP の power2.out のような指定は、ここでは easeOutCubic に対応します。
• スプリングの感触を調整する —— 3 種類のプリセットで減衰と周波数がオーバーシュートにどう効くかを確かめてから数値を決められます。
• イージングの意味を説明する —— 等速の参照ボールを並べると、加速と減速が目で見て分かります。

よくある質問

Q: cubic-bezier の出力はどのイージングでも正確ですか？ A: linear と 4 つの CSS キーワードだけが正確です。これらは元々 cubic-bezier です。バウンド・エラスティック・スプリング系は最小二乗法による近似です。これらのカーブは繰り返しオーバーシュートするため、1 本の cubic-bezier では形を近似するしかありません。

Q: JavaScript の出力が t を制限するのはなぜですか？ A: 生成される関数は入力を 0 から 1 に制限します。1 フレーム遅れても進行度が終端値を超えないようにするためです。範囲外のオーバーシュートが必要なら、この行を削除してください。

Q: Anime.js と GSAP の文字列はそのまま使えますか？ A: Anime.js v3 と GSAP 3 の命名に従っています。古いバージョンは名前が異なり、スプリング系のイージングは完全一致ではなく最も近い組み込みパラメータに対応付けられます。