『魅せる』アニメの動かし方
※このページのは「Opera」「Safari」「Firefox」等、
元のGIFと再生フレームが同じブラウザによる閲覧を推奨します。
かっこいい動きの描き方がわからなくてどうもパッとしない感じになってるアナタ！
ここでは初心者講座からちょっと進んで「勢い」あふれる動きの作り方について順を追って説明していきましょう。
お手本として、棒が円周に沿って進むようなアニメーションを用意してみました。
人やモノの動きはこの棒のように基点を中心とした線の動きと、
ジェットコースターのように基線に沿った点の動きで大方表現することが出来ます。
今回は前者の動きで説明しますが、考え方はどちらにも応用可能です。
この時計もどきの状態は「等速運動」です。弾いてしばらくした後のミニカーとかそんな感じで
速さを増やす力も減らす力もなく慣性だけで動いている状態です…急に物理っぽいですね（笑）
速さが変わらないので勢いもへったくれもありません。ではこの時計もどきに勢いをつけていきましょう。
CASE1：コマの速さを変えてみる
「勢いがないならコマを早送りすれば良いじゃない」
という訳で全部のコマのフレーム数（F）を10/100秒から5/100秒にしてみました。
あ、次の話に進む前に「コマ」について簡単に話しておきましょう。
セルアニメーションにせよGIFアニメーションにせよ、動画は複数枚の静止画の集まりで出来ています。
アニメーションを再生する場合、1秒という区切りの中にいくつの静止画を入れるかによって規格が異なります。
100FPS、つまり1秒＝100Fの場合、1秒間に100枚の枠に収められた静止画をブラウン管が高速で切り換えてる訳です。
F数が5の場合、100枚のうちの5枚を同じ静止画が占有しています。
一般的なgifアニメ作成ツールの場合は100FPSですが、mugenの規格は60FPSなので注意しましょう。
話は戻りまして…果たしてこの画像に「勢い」はあるでしょうか？
そもそも「勢い」はある対象と比較してある決まった間隔の中で移動した量（＝速さ）の差なので、
このgifの中で移動量に差がなければ勢いは生まれないんですねー…物理っぽいですねー（笑）
同様にコマを削ることで一度の移動量を増やして速く見えるようにしてみましたが、これも「勢い」はないですね。
CASE2：コマ毎に速さを変えてみる
前項を踏まえてコマ毎の速さに変化をつけてみましょう。
一般的には初めに力が加わることで勢いがついて、何かしらの抵抗で勢いがなくなっていき最後に動きが止まります。
アニメーション的に言えば、初めはF数を少なめに取って徐々にF数を多くしていく感じです。
という訳で初めを3F、終盤は10Fで最後のコマを25Fにしてみました。とても滑らかに動くし勢いもあります。
… た だ し も の す ご く 手 間 が か か り ま す ！ ！ ！
格ゲーのドットに用いるという観点からも、あまりフレーム数を多くすると攻撃動作に支障が出ます。
作り手の労力はかかるわ、キャラクターが小足を振っても遅い・当たらない・反確、では死に技どころか死にキャラです。
素人にはオススメできない諸刃の剣です。それなら…
CASE3：コマを抜いてみる
勢いのある動作の時には表示させるコマ数を少なめに、逆に勢いを殺す動作ではコマ数を増やします。
滑らかに見えるように徐々にコマ数を変化させるのがいいアニメーションを作るコツです。
コマ数節約で制作サイドにも優しい、まあ単純に考えれば誰でもこの結論に達しますね（汗
ただ、これだけでは力学法則を無視した、非常に理想的な動作になってしまっているので「モノの動き」たりえません。
次の項で詳しく説明します。
CASE4：移動前後の動作を意識してみる
さっきのアニメーションは何故モノの動きっぽくないのでしょうか…？答えは「しなり」です。
柔らかな関節で支持されてる棒ならば動作の初めと終わりに勢い余って若干慣性がつきます。
大剣を持った屈強なおっさんだったしても関節に筋肉はつかないので、
持った剣を振ったら止めようとする部分より若干下がってから止めようとした位置へ腕が動きます。
また、振る前にも勢いを付けるために若干振りかぶる動きが大きくなります。
こういったことを踏まえてアニメーションを組みなおすとこうなります。
どうでしょうか？ 若干オーバーアクションですがこれ位の方が見栄えがいいと思います。
武器であれば勿論武器の質量にあった振りの速さ、使い手の筋肉の量も関係してくるのでその辺もイメージしながら作業しましょう。
[実際の使用例]
「Marvel VS SF」スパイダーマンのパンチです。
★印で示したインパクトの瞬間だけ、数F分若干腕の関節が伸びているのが分かると思います。
この伸び縮みのコマを取り去るとあっさりした動きになっていますね。
さて、このままでも充分「勢い」のある動作が描けますが
ここからはよりよい動き作りのために、通常表現出来ないフレームとフレームの間を補填する技法を紹介します。
CASE5：軌跡を付けてみる
まずは軌跡（仮）による表現からお教えします。
皆さんも夏休みに花火で遊んだ経験があると思いますけど、手持ち花火を左右に振ると（人に近づけてはいけないよ！）
光っている花火の先端が振った動きに合わせて線を描く様子を見たと思います。
そんな感じの技法なのでここでは仮に軌跡と称させてもらいます。我流で見つけた技法なので詳しいことは分かりません。
やり方ですが、軌跡を描く際にフレームとフレームの間を補填するため「前のフレームとの間にはここにいた」という印に
半透明の棒を現在のコマの軌道上に載せておきます。半透明の棒は実体のある棒から離れるほど透過率を上げるとらしくみえます。
ストZEROのオリコンなどにもこういう残像が用いられていますね。
ここからが本題です。上の並んだ球の図を画面から離れて見ると、透過率が高いほど球が小さく見えて「＞」の様に見えると思います。
これを応用して、先端部分を並んだ球の頭と見なしてそこからくさび形に伸びるように軌跡を描くとより勢いのあるアニメーションになります。
勢いが落ちていくに連れてくさびの角度も大きく、軌跡を短くしていくと減衰している感じが出せると思います。
軌跡の大きさ・色や長さで与える印象も変わってくるので巧く使い分けましょう。
CASE6：残像を付けてみる
次に残像、もしくはオバケと呼ばれる表現について紹介します。一般的には軌跡もオバケの部類に入るのでしょうが、ここでは区別しています。
上の図の様な『流し撮り』の技法は、動いている被写体を撮影する際に撮影当時のスピード感を写真に残すための手法です。
被写体であるF1カーを固定して背景が高速で動いているため露光中にカメラが動いた分だけ看板の文字がブレているのが分かると思います。
このようなブレ・揺らぎを画像に取り入れます。軌跡（仮）と違い効果線のように棒の前後で波打つ感じに作るのがコツです。
[実際の使用例]
「Marvel VS SF」スパイダーマンのサマーソルトキックです。キック中に白で軌跡が、立ち動作に戻る際にオバケが使われてます。
この様に場面に応じて使い分けるのが大切です。勿論先に載せたパンチのように必要のない動作もあります。
意外と適当に描いても何とかなるので難しく考えることはないです。
巧く使いこなしてよりスタイリッシュな動作にしていきましょう！