Wiz テックブログ

Wizは、最新のIoTやICTサービスをお客様に届ける「ITの総合商社」です。

イージングでスムーズなアニメーションを作ろう

こんにちは、フロントエンドの高野です。
皆さんはアニメーションは好きですか?
私は大好きです。

今日はド派手なアニメーションからUIのモーションまで、幅広く応用できるイージングについての記事を執筆しようと思います。

イージングとは?

アニメーションの速度に緩急をつけることで、物体の動きを滑らかに見せることをイージングと言います。 実際に動きをみてみましょう。

See the Pen easing-demo by iricocco3 (@iricocco3) on CodePen.

青い要素は常に動きの緩急が変わりませんが、灰色の要素は緩急があるので滑らかに見えます。

現実の物理法則に近い形でアニメーションのイージングを設定することで、よりリアルで直感的な動きとなります。
通常、上記青色の要素のような常に一定の速度を保つ動き、というのは現実世界ではレアなケースです。

こちらのイージングに関するUIアニメーション考察の記事が非常に面白かったので、
興味のある方は是非合わせてご確認ください。 note.com

CSSで実装できるイージング

イージングを語る上で欠かせない要素はベジェ曲線です。
...ですが、数学的な部分を正確に説明できる自信がないので、 ベジェ曲線という曲線でアニメーションの緩急を調整します、と軽い説明に留めて起き、参照のみを紹介します! 逃(・_・;

ja.javascript.info

CSSのアニメーションでイージングを設定するには、
animation-timing-function プロパティで指定します。
developer.mozilla.org

ここで指定できるいくつかの値は3次ベジェ曲線を指定するプロパティの糖衣構文になっています。 (cubic-bezier)

  • ease // cubic-bezier(0.25, 0.1, 0.25, 1.0)
  • ease-in // cubic-bezier(0.42, 0, 1.0, 1.0)
  • ease-out // cubic-bezier(0, 0, 0.58, 1.0)
  • ease-in-out // cubic-bezier(0.42, 0, 0.58, 1.0)
  • linear // cubic-bezier(0.0, 0.0, 1.0, 1.0)

それぞれの動きのサンプルと、グラフを用意しました。

See the Pen css-timing-demo by iricocco3 (@iricocco3) on CodePen.

f:id:iricocco:20210330164516p:plain
ease // cubic-bezier(.25,.1,.22,1)

easeは始まりは早く、終わりは遅いですね。

f:id:iricocco:20210330165310p:plain
ease-in // cubic-bezier(.42,0,1,1)

ease-inは始まりは遅く、終わりはゆっくり追い上げます。

f:id:iricocco:20210331095515p:plain
ease-out // cubic-bezier(0,0,.58,1)

ease-outゆっくり加速し、ゆっくり減速します。

f:id:iricocco:20210331095720p:plain
ease-in-out // cubic-bezier(.42,.01,.58,1)

ease-in-outease-inease-outの組み合わせです。

f:id:iricocco:20210330165537p:plain
linear // cubic-bezier(0,0,1,1)

linearは名前の通り直線的です。増加量が常に同じです。

上記のグラフは下記のベジェ曲線ジェネレーターのサイトで作成しました。 実際に手で動かしてシミュレートもできる優れものです。

cubic-bezier.com

anime.jsで実装できるイージング

CSS標準のもの以外にも、アニメーション系ライブラリを使用すればものが跳ねる動きやがたつく動きなど、色々なイージングを簡単に実現することができます。
次は、anime.jsで実装できるイージングを一部紹介していきます。

Robert Penner's Easing Functions

よく使うEasingのサンプルをまとめた素敵なサイトがあります。 便利なチートシートもあるので紹介します。

easings.net

f:id:iricocco:20210331110915p:plain
easing cheet sheet

このように色々なイージングを一括でサンプル付きで確認することができます。 ここで出てくるグラフの細かい計算式を確認したい場合は、GitHubにコードが載っているのですぐに確認できます。

github.com

なお、anime.jsでは上記のイージングを元にイージングの設定を調節することが可能です。

animejs.com

spring

重さ/剛性/減衰/速度などを指定して、物質の跳ねる動きをシミュレートできます。

See the Pen VwPmEJX by iricocco3 (@iricocco3) on CodePen.

最後に

物質の動きを完璧にシミュレートしようとすると物理学・数学が絡んで難しい!という印象があるかもしれませんが、特にそれらに詳しくなくても イージングを簡単に実装できる糖衣構文やライブラリの機能、チートシート・ジェネレーターが用意されていましたね。
是非みなさんもお気軽にイージングを楽しんでみましょう!

Wizではエンジニアを募集中です。

興味のある方は是非覗いてみてください!↓

【フロントエンドエンジニア】 場所にとらわれず自社メディア成長に貢献したいフロントエンドエンジニア募集! - 株式会社WizのWebエンジニアの求人 - Wantedly

【バックエンドエンジニア】 勤務地自宅を叶える!バックエンドエンジニアとして事業を成長させたい方募集 - 株式会社WizのWebエンジニアの求人 - Wantedly