デザインの話題「イージングアニメーション」


最近ではWebページでコンテンツを表示する際にアニメーションを使うことは珍しくありません。ページをスクロールすることに連動して次々と新しいコンテンツがスライドやフェードで出てきます。こういったアニメーションはリッチであり愉しいですが、分かりやすさも演出することができます。例えばiPhoneやAndoroidの設定などの標準アプリでは、同一機能での画面の切り替わりと異なる機能への画面の切り替わりを分類し、両者を異なるアニメーションで表現することで、ユーザが画面遷移によって混乱することを軽減させています。

では具体的にどのようなアニメーションが使われているのでしょうか。今はイージングという手法がよく使われています。従来のアニメーションは時間に比例して一定の量だけ位置が動くリニアと呼ばれるものでした。対してイージングは時間に比例せず、徐々に早くなったり、徐々に遅くなったりします。イージングをまとめたサイトがこちらです。(http://easings.net/ja


自然界ではリニアな動きはまずありえません。必ず加速があり、また加速が変化します。イージングはリニアより私たちが目にする動きに近いため不自然さが少なく心地よく感じるのです。

(Betonacox Design)