イージング

イージングについて

Startify-UIでは、アニメーションのイージングをデザイントークンの一環として定義しています。イージングは、アニメーションの速度や加速度を調整するための関数であり、アニメーションの挙動をより自然かつ美しいものにするために重要な要素です。

イージングのバリエーション

Startify-UIでは、よく使われる代表的なイージングを提供しています。これらのイージングはCSS変数として定義されており、簡単にイージングを適用することができます。

イージングは直線もしくは曲線のグラフとして表現され、その形状によってlinearやease、ease-inなどの挙動別に分けられます。曲線グラフを元にしたものは同じ挙動の中でも変化率の違いにより、sineやcircle、expoといった曲線タイプに細分化され、どのタイミングで加速・減速が強調されるかが決まります。

加速・減速のタイミングによるイージングの違い

加速・減速のタイミングによるイージングの違いは、以下のようになります。

加速度によるイージングの違い

等速・ステップ以外のイージングについては加速度を表現した曲線の種類により、どれだけ急激に加速・減速するかが変化します。以下は代表的な変化率ごとの特徴です。

イージング一覧

各イージングの変化率を表現した曲線グラフと、そのイージングを適用したアニメーションの挙動を確認することができます。

イージング用CSS変数

Startify-UIで提供されているイージング用のCSS変数は、以下のとおりです。

これらのCSS変数は、プロパティの値で使用したり、スクリプト側で値を参照することができます。

animation-timing-function: var(--su-easing-ease-in-sine);

const easingElement = document.getElementById('easing');
if (easingElement) {
  const easingValue = getComputedStyle(easingElement)
    .getPropertyValue('--su-easing-ease-in-sine')
    .trim();
  easingElement.style.animationTimingFunction = easingValue;
}