重要なポイント
- 012つの制御点ハンドルをカーブにドラッグして、数値を推測するのではなく視覚的にイージングカーブを形成します。
- 02ライブボールアニメーションが確定する前にタイミングをプレビューするため、動きを感じることができます。
- 03すべての5つの CSS 組み込みプリセット(ease、linear、ease-in、ease-out、ease-in-out)が開始ポイントとして利用可能です。
- 04cubic-bezier() 値が 2小数位で即座に更新され、任意の CSS プロパティに貼り付けるのに対応します。
なぜ UI モーションの場合カスタムイージングカーブが重要か
CSS の組み込みタイミング関数 - ease、ease-in-out、linear - は大きな地面をカバーしますが、すべての UI はデフォルトが少し間違って感じるモーメントがあります。スナップするように見えるツールチップ、開いて行き過ぎるモーダル、機械的に感じるプログレスバー。Cubic-Bezier カーブでは、機械的ではなく自然に感じるようにモーションを調整できますが、cubic-bezier(0.4, 0, 0.2, 1) の4つの数字はほぼ直接推測するのは不可能です。
Handytool の cubic-bezier エディタはそれらの数字を2つのドラッグ可能なハンドル付きの視覚的なカーブに変えます。ハンドルを動かし、ボールアニメーションが即座に再生されるため、モーションがあなたの意図に一致するまで感覚で反復できます。次に値をコピーし、CSS にドロップします - 完了。
CSS イージングカーブを設計する方法
- 01
プリセットで開始
ease、linear、ease-in、ease-out、または ease-in-out をベースラインとして選択します。ハンドルは各プリセットの正しい位置にスナップします。
- 02
制御点ハンドルをドラッグ
各ハンドルはカーブの1つの終わりを制御します - 開始ハンドルは初期加速を形成し、終了ハンドルは最後の減速を形成します。ハンドルを移動するとプリセットが「カスタム」に自動的に切り替わります。
- 03
ボールアニメーションを見る
ボールはあなたのカーブを使用して左から右にアニメーション化されます。期間スライダーを調整してスロー対高速トランジションをプレビューします。
- 04
オーバーシュートを使用して実験
Y軸ハンドルを1より上またはより下にドラッグして、オーバーシュートとアンダーシュートを作成します - メニューがエネルギッシュに開くスナップこと「バウンシー」効果。
- 05
CSS 値をコピー
コピーをクリックして cubic-bezier() 文字列を取得し、スタイルシートの transition-timing-function または animation-timing-function に貼り付けます。
ブラウザで完全に実行
エディタは自動完結型ブラウザツールです - ページを開いた後、フォント、スクリプト、データは読み込まれません。ハンドルをドラッグしてアニメーションをプレビューすることはオフラインで機能します。プレビューボール用に使用されます cubic-bezier フォーミュラは、CSS トランジションにブラウザが使用するものと同じなので、エディタで確認されるのは、あなたのスタイルシートが確実に生成するのと全く同じです。
インストールするものはなく、登録するものはありません。出力は単一 CSS 値です - 貼り付けて完了。
Cubic-Bezier エディタ FAQ
cubic-bezier イージングカーブとは?
CSS トランジション・アニメーションが時間とともに加速する方法を決定する2つの制御点で定義された数学的カーブです。cubic-bezier(x1, y1, x2, y2) の4つの数字はこれら制御点の位置を設定します。
なぜ Y 値は1より上または0より下に行くことができますか?
0-1 の外の Y 値がオーバーシュートとアンダーシュートを生成します - カーブはその終点を超えてその後落ち着きます。これは「バウンシー」イージングカーブを作成します。X 値は 0-1 の範囲内にとどまる必要があります。
出力をどのように使用しますか?
cubic-bezier(...) 文字列をコピーし、任意の CSS transition-timing-function または animation-timing-function 値に貼り付けます。すべてのモダンブラウザで機能します。
ease-in-out は実際に何を意味しますか?
ゆっくり開始、中央で加速、終了時に遅くなります - cubic-bezier(0.42, 0, 0.58, 1)。実際のオブジェクトが加速・減速する方法を反映し、ほとんどのポーランド UI モーションの既定の選択です。
ボールアニメーションプレビューは CSS に正確ですか?
はい - プレビューは同じ cubic Bezier フォーミュラを使用して CSS トランジションにブラウザが適用します。期間スライダーでは、確定する前に遅いカーブ対高速を感じることができます。