アニメーション制作の基本

最近、コンテンツと言えば「動画」が主体になりつつあります。

イラストが動くモノから実写のものまでたくさんの動画があふれるようになりました。

そういった動画に、効果的なエフェクトとして利用されているのが「アニメーション」です。

この「アニメーション」という手法は私たちが日ごろ業務で取り組んでいるUIデザインやUXデザインにおいても活用されます。

そこで、アニメーションってどういうことなのか？

今回はアニメーション素材を作ったりする際の参考になればと思い、基本的な部分をまとめてみました。

概念を理解することで、より効果的なマイクロアニメーションが作れるようになります。

１．アニメーションの基本原理と「フレーム」の概念

基本的にアニメーションというのは「残像」という人間の視覚を利用しています。

一連の静止画を連続して高速で見ると、脳はそれを連続した動きとして捉えてしまうのです。

この静止画と静止画のつなぎ部分を動きとして錯覚するのが残像です
要するにパラパラ漫画ですね

１枚１枚の静止画をフレームと言います。

動画関連の用語で「fps（フレーム・パー・セカンド）」という言葉がありますが、これは１秒間に切り替わるフレーム数を指します。

30fpsだと、１秒間に30フレームということになります。

アニメーションの内容にもよりますが、まずはアニメーションの基本である24fpsのフレームレートで作ると違和感ない動きを表現することができると思います。

映画でも24fpsのフレームレートが一般的です。

まずは、試しに24fpsで作ってみてはいかがでしょうか？

２．絵コンテとキーフレーム

では、どうやってアニメーションの構成を考えるかというと少し工夫が必要になります。

なにせ30fpsのアニメーションと言えども、１分間となると1800枚もの静止画が必要になるわけですから

ずらーっと並べるわけにもいきません。

なので、シーンの重要な構成部分（シーンの最初、続くかどうかのつなぎ、シーンの最後など）をキーフレームとして切り出して

マンガのように絵コンテとして構成することでアニメーションの全体を俯瞰できるようになります。

映画製作などでも同様に絵コンテという手法が使われますね。

３．基本的なアニメーションの要素

前述の通り、連続する静止画を並べることでアニメーションを作ることができます。

そのアニメーションの動きの表現として基本的な要素が以下の４つになります。

・スケール
・回転
・位置
・不透明度

スケールとは大きさの事です。動きとしては拡大したり縮小したりします。

回転は２Dだけでなく３Dの回転も含まれます。

位置は場所が変わる動き＝移動です。

不透明度は点滅などの動きの表現になります。

実際にはそれぞれ以下のような動きになります。

４．モーションルール（加速度と変形）

加えて、動きの表現をもっと滑らかにするために重要な要素があります。

それは

・運動曲線（加速度）
・加速による変形

です。

運動曲線とは？
運動曲線とは、物が動くとき、動きの軌跡が曲線を描いていることを指します。機械のように一定の速度で動くような物でなければ、重力や摩擦によって加速したり減速したりしていて、物体にかかる力とその速度の合計が同じ方向ではないので、物体は曲線運動をしていることになります。

下のアニメーションを見ていただきたいのですが、一定のスピードで動き続けるのが左で、運動曲線を考慮しているのが右になります。

いかがでしょうか？

運動曲線を考慮すると動きが滑らかに、自然に見えると思いませんか？

運動曲線を丁寧に作っていくことで、更に品質が高いものを作ることができ、アニメーションがより生き生きとしたものになり、アニメーションを見る人に意図が伝わりやすくなります。それはアニメーションの非常に重要なリズムです。

運動曲線の組み合わせは沢山ありますので、まずは豊かな優れた作品を研究して、実際に作ってみることで引き出しを増やしていきましょう。

参考までに、最も使われる３つの曲線をご紹介します。

1) ease-in 
スピードがどんどん速くなる曲線。要素がページから離れるときによく使われます。

2) ease-out
ピードがどんどん遅くなる曲線。要素がページに入るときによく使われる。

3) ease-in-out
最初と最後にスピードがなく、加速し、次に減速する曲線。 要素がA地点からB地点までを移動する場合に適しています。

また、物質というのは加速度に応じて変形します。

野球アニメなどで投げられたボールが楕円形に見えたりするアレです。

落下したときの潰れなども同様ですね。

このようにただ動くだけでなく、滑らかに見せることでアニメーションはすごく自然なものになっていきます。

５．これらを組み合わせて出来ること

ここまでの基本的なアニメーション要素の組み合わせで以下のようなことができます。

これは動画というほどの長さではありませんが、例えばスマートフォンアプリやWebサイトなどでもこのようにアニメーション要素が組み込まれた素材が使われていたりします。

どうでしょう？

こういうパーツを見かけたことがある方も多いのではないでしょうか。

まとめ

アニメーションは基本的な要素を押さえておくだけでも、身近な素材・コンテンツとして使われています。

私たちは普段UIやUXを考えるうえでも、これらの考え方を積極的に取り入れていく必要があると考えています。

アニメーションがあることで「ただのアイコン」も「意味のあるアイコン」にすることができるからです。