イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。
現実生活のオブジェクトは、即座に動いたり停止したりすることはなく、一定の速度で動くことはほとんどありません。引き出しを開けるとき、私たちは最初にそれをすばやく動かし、出てくるときはゆっくりと動かします。床に何かを落とすと、最初に下に向かって加速し、床に当たった後跳ね返ります。
このページは、適切なイージング関数の選択に役立ちます。
オープンソース
サイトの翻訳にご協力ください
x
t
CSS
CSSでは、transitionプロパティとanimationプロパティでイージング関数を指定できます。
.block { transition: transform 0.6s ; }
cubic-bezier.comで編集できます。
CSSでは、この関数は
@keyframesを使用して実行できます。:サイズ
ローディング...
位置
ローディング...
透明度
ローディング...
PostCSS
PostCSSは、イージング関数の記述がより簡単です。このサイトからtransition情報を取得するプラグインpostcss-easingsがあります。
.block { transition: transform 0.6s ; }
その宣言は上記のものに変換されます。
残念ながら、このイージング関数はPostCSSプラグインでは設定できません。
@keyframesで実行できます。上記を参照してください。グラデーション
postcss-easing-gradientsを使用してグラデーションを描くことができます。
.block { background: linear-gradient( to bottom, #1473e6, , #247b5e ); }
数学関数
以下に、TypeScriptで書かれたイージング関数のコードを示します。変数xはアニメーションの絶対的な進行度を0（アニメーションの開始）と1（アニメーションの終了）の範囲で表します。
function (x: number): number {
}以下に、TypeScriptで書かれたイージング関数のコードを示します。変数xはアニメーションの絶対的な進行度を0（アニメーションの開始）と1（アニメーションの終了）の範囲で表します。
function (x: number): number {
}イージングの確認:
現在の関数:
現在の関数
線形関数:
線形関数