こんにちは、ユアサです。
前回の記事ではキーフレームの話と、フレーム・キーフレームとトゥイーンを使って工夫した動作のアニメーションを作成しました。今回は予告していた通り、アニメーションを作成する上での基本原則となる『アニメーションの12の原則』についてまとめ、原則を参考にして試しにアニメーションを作成してみます。
↓前回の記事はこちら
tech.arms-soft.co.jp
12の原則ってなに？
アニメーションの12の原則（以下「12の原則」）の話は調べると専門の詳しい方々が記事にして詳細をまとめてくださっているので、各原則についてそれぞれ深掘りして紹介することは省いてどのようなものであるかの話だけしていきたいと思います。
12の原則は、ウォルト・ディズニー・スタジオの初期の作品の中でも制作の中心を担っていたアニメーターの内の2人であるFrank Thomas、Ollie Johnstonの共著書『Disney Animation / The Illusion of Life』の中で紹介されたことによって世間に広まった、アニメーション制作における基本原則です。
この基本原則が記された著書は1981年発行とずいぶん昔のものですが、現代でも変わらず様々なアニメーション制作に携わる方々に影響を与えているそうです！それだけ完成された内容の原則ということみたいですね。
12の原則の内容は以下の通りです。
SQUASH&STRETCH（潰しと伸ばし）
物体の落下時は伸び、着地時に潰れる動作をする。アニメーション対象の物体の質量・重量感を際立たせる効果がある。
ANTICIPATION（予備動作）
振りかぶりの動作をする。視聴者側には次に起こる動作を予期・連想させる効果がある。
STAGING（演出）
レイアウトや動き、効果線やカメラなどの手法で物体に集中を集めるために演出する。視聴者側に感情移入をさせたり心を動かす効果がある。
STRAIGHT AHEAD & POSE TO POSE（逐次・原画の描画）
STRAIGHT AHEAD（逐次の描画）はフレーム一枚一枚全てに動きを与える（パラパラ漫画など）。POSE TO POSE（原画の描画）はポイントとなるフレームをいくつか用意し、その後にフレーム間を補完する（AfterEffects、Animateのシェイプトゥイーンなど）。
FOLLOW THROUGH & OVERLAPPING（追従・重なる動き）
物体の動き出し・停止時などに発生する揺れや反動などの動作。物理法則性をより際立たせ、その物体の弾力やスピード感などを演出できる効果がある。
SLOW IN & SLOW OUT（ゆっくり動く・ゆっくり止まる）
動作を徐々に開始・終了させる。動作自体によりリアリティを与えることができる。
ARCS（運動曲線）
物体の運動曲線を意識させる動作。手足の動きやボールバウンスなど、自然な運動を演出できる効果がある。
SECONDARY ACTION（副次アクション）
他の物体がメインの物体の動きを自然に演出する動作。メインの物体の動作により躍動感を与えるなどの効果がある。
TIMING（タイミング）
ある動作が必要とする時間と速度。同じ時間・速度のアニメーションでも、大きく動作させるタイミングや経過時間を調整することでダイナミックに演出できる効果がある。
EXAGGERATION（誇張）
現実離れしたような誇張した動作（驚いた際に目が飛び出る、辛いものを食べて火を吹くなど）。表現を大袈裟にするほどコミカル感が増し、印象づけを強くする効果がある。
SOLID DRAWINGS（立体感・実在感）
遠近感や重さの表現に使用される。制作工数は上がるが質の底上げに繋がる。
APPEAL（アピール）
アピールするような動作。視聴者側の視線を対象の物体に向けて釘付けにする効果がある。
原則に倣ってアニメーションを作成してみよう
最後に12の原則を参考にし、前回までのAnimateの連載記事内で紹介した機能を使ってアニメーション作成をしていきます。
比較的簡単に再現できる『SLOW IN & SLOW OUT（ゆっくり動く・ゆっくり止まる）』の原則を取り入れたものを作成していきましょう。
まずオブジェクトを作成し、アニメーションの大体の時間を決めてフレームを作成します。
フレーム作成後、モーショントゥイーンを挿入して終了位置を決めます。
丸型オブジェクトが等速移動するアニメーションができました。ここからモーショントゥイーンのパスを操作して原則通り緩急のある動きにしていきますが、これを再現するには
- 開始・終了位置付近のパスの間隔を狭める
- 中心付近のパスの間隔を広げる
といった上記二点の条件を満たす必要があります。簡単に再現することを第一にしたいので、この記事ではパスの間隔の精密性は無視してフリーハンドで調整することにします。
ではパスの間隔を調整していきます。この記事の場合3秒間（72フレーム）のアニメーションなので、中央付近（36・37フレーム目周辺）を広げて、開始・終了位置付近（1フレーム目、72フレーム目周辺）を狭める作業をしていきます。
モーショントゥイーンのパスを手動で調整する際、キーフレームのある箇所から見てどれくらい広げる・狭めるかという仕様なので、作業しやすいように36フレーム目にキーフレームを一つ作成してから中央付近のパスの間隔調整をします。
間隔を調整してみました。やり方自体は簡単ですがパスの数が多いので少し骨が折れますね・・・・（よりスマートなやり方はあると思います）。
では再生して確認してみます。
開始・終了は遅く、中心付近では早く動作させることができました。SLOW IN & SLOW OUTは何となくですが再現できたかなと思います。
まとめ
今回まででAdobe Animateの基本的な機能・使い方や原則の紹介をしてきました。自分もまだまだ触りたてなので、これから使い倒して慣れていくつもりです！
これでAdobe Animateを使ったアニメーション作成の連載は一旦終了となります。また面白い機能のアップデートや作成方法など見つけたら記事にしていきたいと思います。
