cubic-bezier イージング

使い方

1. 名前付きの曲線を選ぶか、4つの数値を入れます。
2. 表を読みます。各時点で動きがどこまで進んでいるかが出ます。
3. 実際にアニメーションさせる時間を指定すると、ミリ秒に意味が出ます。
4. タイミング関数をコピーします。

よくある質問

曲線を描かずに表にするのはなぜですか？

知りたいのはたいてい「出だしが遅すぎないか」「終わりが唐突でないか」で、時間に対する進み具合の表はそれに直接答えるからです。描かれた曲線はきれいですが、結局は目で読み取ることになります。

4つの数値の意味は？

制御点2つ、x1・y1・x2・y2です。xは時間で0〜1の範囲に収める必要があります。yは進み具合で、範囲の外に出しても構いません——行き過ぎて戻る動きはそれで作ります。

どれを使えばよいですか？

画面に入ってくるものはease-out（出だしが速く、終わりで落ち着く）。出ていくものはease-in。2点間の移動はease-in-out。linearはスピナー以外ではほぼ使いません。

backの曲線とは？

目的地を少し行き過ぎて戻るものです。ダイアログなどに物理的な感じを与えます。小さく速い動きに向き、大きな動きに使うと誤作動に見えます。

サーバーに送信されますか？

いいえ。ブラウザの中だけで動くので、入力した内容はお使いのパソコンから出ません。