こんにちは、フロントエンドの高野です。
皆さんはアニメーションは好きですか？
私は大好きです。
今日はド派手なアニメーションからUIのモーションまで、幅広く応用できるイージングについての記事を執筆しようと思います。
イージングとは？
アニメーションの速度に緩急をつけることで、物体の動きを滑らかに見せることをイージングと言います。 実際に動きをみてみましょう。
See the Pen easing-demo by iricocco3 (@iricocco3) on CodePen.
青い要素は常に動きの緩急が変わりませんが、灰色の要素は緩急があるので滑らかに見えます。
現実の物理法則に近い形でアニメーションのイージングを設定することで、よりリアルで直感的な動きとなります。
通常、上記青色の要素のような常に一定の速度を保つ動き、というのは現実世界ではレアなケースです。
こちらのイージングに関するUIアニメーション考察の記事が非常に面白かったので、
興味のある方は是非合わせてご確認ください。
note.com
CSSで実装できるイージング
イージングを語る上で欠かせない要素はベジェ曲線です。
...ですが、数学的な部分を正確に説明できる自信がないので、
ベジェ曲線という曲線でアニメーションの緩急を調整します、と軽い説明に留めて起き、参照のみを紹介します! 逃(･_･;
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.
easeは始まりは早く、終わりは遅いですね。
ease-inは始まりは遅く、終わりはゆっくり追い上げます。
ease-outゆっくり加速し、ゆっくり減速します。
ease-in-outはease-inとease-outの組み合わせです。
linearは名前の通り直線的です。増加量が常に同じです。
上記のグラフは下記のベジェ曲線ジェネレーターのサイトで作成しました。 実際に手で動かしてシミュレートもできる優れものです。
anime.jsで実装できるイージング
CSS標準のもの以外にも、アニメーション系ライブラリを使用すればものが跳ねる動きやがたつく動きなど、色々なイージングを簡単に実現することができます。
次は、anime.jsで実装できるイージングを一部紹介していきます。
Robert Penner's Easing Functions
よく使うEasingのサンプルをまとめた素敵なサイトがあります。 便利なチートシートもあるので紹介します。
このように色々なイージングを一括でサンプル付きで確認することができます。 ここで出てくるグラフの細かい計算式を確認したい場合は、GitHubにコードが載っているのですぐに確認できます。
なお、anime.jsでは上記のイージングを元にイージングの設定を調節することが可能です。
spring
重さ/剛性/減衰/速度などを指定して、物質の跳ねる動きをシミュレートできます。
See the Pen VwPmEJX by iricocco3 (@iricocco3) on CodePen.
最後に
物質の動きを完璧にシミュレートしようとすると物理学・数学が絡んで難しい!という印象があるかもしれませんが、特にそれらに詳しくなくても
イージングを簡単に実装できる糖衣構文やライブラリの機能、チートシート・ジェネレーターが用意されていましたね。
是非みなさんもお気軽にイージングを楽しんでみましょう!
Wizではエンジニアを募集中です。
興味のある方は是非覗いてみてください!↓
