cubic-bezier イージング
曲線を、読める形で。
例を読み込むと入力と設定が一時的に変わります。元の内容に戻せます。
0文字
- カーブ
- 0
出力
0.42, 0, 0.58, 1 のように4つの数値を入力するか、曲線を選んでください。
ファイルは端末の外に出ません
このツールはすべてブラウザ内で動作します。貼り付けた内容は端末内で処理され、サーバーには送信されないため、トークンや鍵、未公開の文章でも安心して使えます。
使用例
使用例 — cubic-bezier イージング
名前付きの曲線を選ぶか、4つの数値を入れます。 次の入力と設定で実行します。 その他はページの初期設定のままにします。
| 項目 | 値 |
|---|---|
| 入力 | 0.25, 0.1, 0.25, 1 |
| 出力 1 | cubic-bezier(0.25, 0.1, 0.25, 1) |
| 出力 2 | 300 ms → 80.2% |
| 出力 3 | 600 ms → 100% |
この 4 値は ease を表します。600 ms のアニメーションでは 300 ms 時点で約 80.2% 進みます。
使い方
- 名前付きの曲線を選ぶか、4つの数値を入れます。
- 表を読みます。各時点で動きがどこまで進んでいるかが出ます。
- 実際にアニメーションさせる時間を指定すると、ミリ秒に意味が出ます。
- タイミング関数をコピーします。
よくある質問
- 曲線を描かずに表にするのはなぜですか？
- 知りたいのはたいてい「出だしが遅すぎないか」「終わりが唐突でないか」で、時間に対する進み具合の表はそれに直接答えるからです。描かれた曲線はきれいですが、結局は目で読み取ることになります。
- 4つの数値の意味は？
- 制御点2つ、x1・y1・x2・y2です。xは時間で0〜1の範囲に収める必要があります。yは進み具合で、範囲の外に出しても構いません——行き過ぎて戻る動きはそれで作ります。
- どれを使えばよいですか？
- 画面に入ってくるものはease-out（出だしが速く、終わりで落ち着く）。出ていくものはease-in。2点間の移動はease-in-out。linearはスピナー以外ではほぼ使いません。
- backの曲線とは？
- 目的地を少し行き過ぎて戻るものです。ダイアログなどに物理的な感じを与えます。小さく速い動きに向き、大きな動きに使うと誤作動に見えます。
- サーバーに送信されますか？
- いいえ。ブラウザの中だけで動くので、入力した内容はお使いのパソコンから出ません。