スマートアニメートのイージング（Figma）

今回の記事ではFigmaプロトタイプのスマートアニメートにおける『イージング』部分の設定について記載します。

イージングとは

前提としてイージングとは、アニメーションなどの動きに加減速を加える設定のことです。
下画像の例ではアニメーションの総時間は同一のまま、動きの部分を調整することで差を生じさせています。

イージングはプロトタイプのインタラクション内、下画像の赤枠部分から選択できます。

イージングの設定

Figmaにはイージングの設定として以下の項目があります。

項目の内『カスタムベジエ』と『カスタムスプリング』は自分で数値を設定する項目で、それ以外はプリセットの項目になります。

プリセット項目

• リニア：常時等速で進行

• イーズイン：徐々に加速

• イーズアウト：徐々に減速

• イーズイン/イーズアウト：加速してから減速

• イーズインバック：最初に少し逆方向へ飛び出てから一気に加速

• イーズアウトバック：最後に少し飛び出てから戻る

• イーズインバック/イーズアウトバック：最初に少し逆方向へ飛び出てから一気に加速、最後に少し飛び出てから戻る

• なめらか：イーズアウトバックのような動きで緩やかに進行

• 速い：イーズアウトバックのような動きで一気に戻るように進行

• バウンス：最後に何度か弾む

• 遅い：イーズアウトのような動きでゆっくりと減速

カスタム項目

『カスタムベジエ』と『カスタムスプリング』では数値を入力、もしくはハンドル操作によってイージングを調整できます。
下画像では
左（カスタムベジェ）：途中で一度停止してから再進行
右（カスタムスプリング）：最後に激しく弾む
という動きを設定しています。
カスタム項目ではこのような極端な動きを設定できるほか、プリセット項目の細部を調整することもできます。

まとめ

以上、Figmaプロトタイプのスマートアニメートにおける『イージング』部分の設定でした。