アニメーションを始めましょう

キーフレームアニメーションを使って、ロボットのような、さえないアニメーションを作るのは簡単です。このチュートリアルでは、いくつかのアニメーションの原則を紹介していきます。



流れをつける

自然には、物体が動く前には、その予感のようなものがあります。前に動く前には、わずかに後ろに動きます。止まるときには、少し後ろに引っ張られて戻るはずです。もし、アニメーションに凝るなら、このような動きは必須です。

あなたの手を目の高さまで上げて止めてみてください、そして、何気なく足の横に動かしてみてください。その様子を、注意深くみれば、動作の予感と流れがわかるはずです。

ひどい漫画のような動きを作らないためにも、動きの始めと終わりにはコントラスト、つまりイージングが必要です。

Ball#1を動かしてみてください、直線的に動くだけだと思います。全ての行程で同じ速度で動き、終点で止まるだけです。

とても微妙な動きですが、Ball#2は前方に進む前に、一瞬後ろに引っ張られます。そして、止まるときには、少し後方に弾みます。この動きが、自然な動きを演出することになります。

この効果を取り入れるには、まず、モーショントゥイーンを使って、メインの動きを作成します。

[You must be registered and logged in to see this image.]

次に、新しいキーフレーム(F6)を最初のフレームと最後のフレームの2、3後に挿入してください。

[You must be registered and logged in to see this image.]


2つ目のキーフレーム(フレーム3)で、最初の位置から少し後方に動かします。3つめのキーフレーム(フレーム18)で、最終点より前方に動かします。

2つ目と3つ目のキーフレームの間でダブルクリックして、トゥイーンに関してイージングを設定します。

[You must be registered and logged in to see this image.]

これは、自然なアニメーションを作成する基本的な技術です。回転や、拡大などのアニメーションにも適用できます。

物体の収縮、伸張

物体が収縮、伸張するといったことは、柔らかい、弾性力のある材料などに見られます。硬いモノにはこのような動きはありません。

ボールをクリックして動かしてみてください。Ball#1は全く直線的に跳ね返ってくるだけです。

Ball#2は衝突する直前と直後で少しだけ速度が早くなります。縮んだり、伸びたりすることで、ワンランク上のアニメーションが作れます。

少しだけオーバーな動きを加えるだけで、とても興味をそそるアニメーションになります。しかし、過度の演出はリアルさを失わせる原因になってしまいます。

素早く、わずかの演出を加えることで自然に仕上がります。






引用:Web Design Library著者:Anson Vogt翻訳:atuk]