こんにちは。新人デザイナーの伊藤です。前回の記事で、AfterEffectsの2Dモーションの作成を行いましたが、今回も引き続きモーションデザインに関する内容です。

今回のテーマは「イージング」です。イージングとは、すごく簡単に言うと、ひとつの動作に対して速度に変化をつけることを言います。
アニメーション、UIの見た目の気持ちよさを作る上で、とても重要な要素です。このイージングの主な４つをまとめていきたいと思います。

まず、こちらのモーションを見てみてください。

この２つは同じ距離、秒数で設定してありますが、全く違った動きをしています。上はイージングをかけず等速で動いているリニアな状態、下は即座に動いてゆっくり止まる、イーズアウトの状態になります。

イーズアウトとは逆に、ゆっくり動き始めてだんだん加速していくものをイーズインといいます。

そして上の2つを合わせた動き。徐々に動き始め、徐々に止まるものをイーズインアウトといいます。(ネーミングがそのままなので非常に覚えやすい！)

動き始めてから動き終わるまでの動作において、イーズインアウトは生き物の動きや、モノの物理的な動きに最も近いと言われています。生き物がリニアのように等速で動くことはほぼありません。
パッと見では気づきにくいかもしれませんが、上のリニアは少し違和感があるように見えるかと思います。また車が急にピタリと止まることもないため、イーズインも違和感のある動きに見えてしまいます。上の図を見た感じだと、イーズインアウトが1番車らしい動きをしているように見えますよね。

このようにイージングは動作にリアリティを持たせる上で欠かせない要素になります。普段意識することはないかもしれませんが、よーく見るとゲームやスマートフォンのUIにもイージングが設定されていています。手で操作するUIのほとんどはイーズアウトになっていて、「操作している感」を体感する助けになっているのです。(ぜひ一度気にして見てみて下さい！)
私もモーション作成に関わることによって、イージングの重要さに気づけたわけなのですが、まさに「神は細部に宿る」を感じた瞬間でした。