イージング

イージングについて

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;
}

非単調イージング

Startify-UIでは、単一の三次ベジェ曲線では実現できない複数関数の合成による非単調イージングも提供しています。非単調イージングは、速度が一方向に単調増減せず、途中で加速と減速が反転したり、行き過ぎや跳ね返りを伴うような挙動を表現します。

非単調イージングを採用することで、オーバーシュートや跳ね返りなど表情のある動きを自然に加え、演出の幅を広げることができます。

非単調イージングのバリエーション

Startify-UIでは下記の非単調イージングを提供しています。他のイージング同様に、加減速のタイミングが異なるin・out・inoutの3種類のバリエーションが提供されています。

非単調イージングの変化率を表現した曲線グラフと、そのイージングを適用したアニメーションの挙動イメージです。

非単調イージングのユーティリティクラス・CSS変数

Startify-UIで提供されている非単調イージング用のユーティリティクラスならびにCSS変数は、以下のとおりです。

非単調イージングは実装の特性上、ユーティリティクラスを付与したうえで、変化させたいプロパティの値にCSS変数の値を直接指定する必要があります。

<!-- 非単調イージングを適用する対象要素にユーティリティクラス（.su-easing-*****）を付与 -->
<div 
  class="example-element su-easing-ease-out-elastic"
>...</div>

/* 非単調イージングを適用する対象要素のプロパティにCSS変数（--su-easing-****）の値を直接指定 */
.example-element {
  transform: scale(var(--su-easing-ease-out-elastic)));
  /* animation-duration や animation-iteration-count は必要に応じて指定します */
  animation-duration: 10s;
  animation-iteration-count: infinite;
}