速さのアニメーション:速いと感じる動きを作る

アニメーション
記事内に広告が含まれています。

速い動きは、アニメーションの中でも特に印象的な表現のひとつです。

バトルアニメでキャラクターが一瞬で移動したり、パンチや斬撃がものすごい勢いで飛んできたり。素早い動きは、それだけで「強さ」や「勢い」を感じさせてくれます。

ところが、ここにはひとつの矛盾があります。

速く見せたいのに、速く動かすほど見えなくなる。

「おそろしく速い手刀、俺でなきゃ見逃しちゃうね」みたいなことになってしまいます。せっかくアニメを作ってるので、その速い行動は見てほしいことが多いと思います。

では、どうすれば「速い!」と感じてもらいながら、その動きをちゃんと見せることができるのでしょうか?

アニメーションでは、実際の動きをそのまま描くのではなく、「速く動いている」と感じるための情報を足したり、逆に動きを省略したりすることで、この問題を解決します。

たとえば、あえて表示するフレームを減らしたり、イージングで動きの緩急をつけたり、キャラクターを伸ばして勢いを表現したり。さらに、スミアで軌跡を描いたり、背景を動かしたり、分身を残したりする方法もあります。

つまり、速い動きを見せるためには、必ずしもとにかく速く動かせばいいわけではありません。

むしろ、動きを省略したり、動いていない部分を利用したりすることで、「速い」と感じさせることができます。

今回は、そんな「速さ」を表現するためのアニメーションの工夫を、いくつか紹介していきます。

  • フレームやコマ数を少なくする
  • イージングをつける
  • 伸ばし、つぶしで勢いがあるように見せる
  • スミアで軌跡を見せる
  • 背景を動かす
  • 分身させる

これらは単独で使うだけでなく、いくつか組み合わせることもできます。
「実際にはそれほど動かしていないのに、なぜかものすごく速く見える」。
そんな素早い動きのアニメーションを作るための工夫を紹介していきます。

動画もあります。

スポンサーリンク

キャラクターを動かす工夫

まずはキャラクターが単純に横に移動する(飛ぶ)ときの表現について。

基本的には一定間隔で位置を右に移動させてキーフレームを打っていくと特定のスピードで右に移動していきます。これをもっと早く感じるように動かすにはどうすればいいでしょうか?

フレームを少なくする

これは単純にキーのフレームやコマ数を少なくして文字通りただ速く動かす方法です。
実際速さを感じさせたいとき、エフェクトやキャラの移動でもよく使われる手法ではあります。

しかし、「何が起こったかわからない」となってしまう可能性も高く、工夫なく使うと味気なく感じます。好みと場面にもよりますが、できれば他の工夫と組み合わせて、せめて「速い動きだったな」と思わせる余地は残したいです。

例では中間のフレームを1フレームだけにして速く動かしていますが、これだけではつまらない動きになっています。

イージング

動きの始めと終わりを遅くして、中間部分を速くすると、スピードのメリハリが出て、速くなったと感じます。

潰しと伸ばし(Squash and Stretch)

中間のフレームを左右に伸ばして移動してる勢いを表現し、4コマ見せたあと、左右に潰して、最後に戻しています。(体積を変えないよう気を付けます)

choppy(カクカクした)アニメのような躍動感が出ます。元気さのある動きに適した手法です。

スミア(軌跡)

前後のフレームの軌跡や動いた勢いの線を表現します。

このスミアフレームを多めに表示(例では6コマ)してもスピード感のある動きに見えます。

スミア動き

中間のスミアフレームの線をずらしてシュシュっとすごいスピードで動いているような表現もできます。

距離的には動いてないのですが、細かい線を動かすとスピード感や勢いや凄みを感じます。

スポンサーリンク

スミアに関して追記

スミア表現は、漫画で使われる「勢いの線」などにも近い表現です。

漫画は静止画なのに、キャラクターがものすごい勢いで動いているように感じることがありますよね。これは、動きそのものを描くのではなく、動いた軌跡や勢いを一枚の絵の中にまとめて描くことで、強いスピード感を生み出しているからです。

この考え方は、アニメーションでもそのまま利用できます。

スミアには、たとえば次のような表現があります。

  • ブラーによって動きの軌跡を表現する
  • 勢いの線によって軌跡を表現する
  • 動いた軌跡を一つの形に合体させ、いわゆる「オバケ」のような形として描く

共通しているのは、「速すぎて、動く前・動いた後・その軌跡まですべて同時に見えてしまっている」ように見せることです。

実際の物体が本当にその形になるわけではありません。あくまで、動きを一枚の絵に凝縮することで、視覚的に「ものすごく速く動いた」と感じさせる表現です。

右動画:上記のアニメーションを動画で動かしています。参考に見てみてください。

訂正:右動画内の潰しと伸ばしの部分で体積を保つのを忘れていました。以下のものが正しいです。横方向に伸ばしたら、上下方向に潰す、など体積を変えないようにすると、もっとぴょんっと元気よく動きます。

スポンサーリンク

分身、背景を動かすことによって速く見せる方法

キャラクターや物体を分身させたり、キャラじゃなくて背景の方を動かしたりして、動きが速いと感じさせる方法です。

これらの方法を使うと、スピード感を感じるけれども、同時にキャラクターやメインの物体をあまり動かさずにずっと表示しておけるので、感情描写や表情描写もできて、アニメでもよく使われてる手法です。

分身

動いてる物体を複数配置してまるで分身しているかのように速く感じさせる方法(実際分身させて描いてるんですが…)

部分的に透明度を上げて残像が残っているようにするとさらに効果的だと思います。

3パターンくらい分身を分散させたフレームを作ってランダムor順番にリピートします。

集中線

背景を動かして相対的にキャラクターが動いてるように見せます

背景に集中線を描いて、それを3パターンくらい作成してランダムor順番にリピートさせます。(コマ打ちを1,2コマランダムで動かすと勢いが出ます。)

※進行方向反対に線が動いているように一部線を短めにするとより横方向のスピードが出ます

スピード線を動かす

背景が進行方向反対に動いているように見せるため、スピード線を送っていきます。
3フレームくらいでリピートするように作ります。

1コマ打ちで動かすか、1,2コマをランダムで混ぜて動かします。

スピード線を動かす+キャラを揺らす

背景が動いているときにキャラを小刻みに揺らすと、その速度で動いている振動が感じられて、すごいスピードで動いている感じが出ます。

これもキャラクターの位置をランダムに少しずらしたものを3パターンくらい作って、ランダムor順番にリピートして動かします。

※カメラをランダムで揺らしても同様の効果が出ます。

右動画:上記のアニメーションを動画で動かしています。参考に見てみてください。

スポンサーリンク

だんだん速くなる回転アニメ(速さアニメ複合)

うさぎが回転運動しているアニメで、だんだん速くなっていくにつれて速さアニメーションのパターンを変えて表現するようなものを作ってみました。

  • 基本的な回転
    ただうさぎが角度を変えて回転します
    (2コマから1コマ打ちに変化)
  • 分身
    分身3パターンのリピート
    (2コマから1コマ打ちに変化)
  • 分身+スミア
    うさぎの身体を伸ばして2パターンをリピート
    (2コマから1コマ打ちに変化)
  • スミア+スピード線
    全て溶けあって円になって回転
    (2コマから1コマ打ちに変化)
  • 背景スピード線
    アップにして背景のスピード線を3パターンリピート
    (1コマ打ち)
  • 背景スピード線+キャラクター揺れ+振動線
    キャラクターも小刻みに揺らし、輪郭線に細かい振動線を描いてビリビリ動かす。速度に耐えられず安定を失う感じ
    (1コマ打ち)
  • インパクトフレーム
    何かの臨界点(限界)に達した
  • 形の歪み+発光
    物理法則が乱れて、空間が歪んで、莫大なエネルギーが放出されて見えなくなって全てが消失する

⑧の段階の物理法則の乱れなどは、厳密な物理的事象じゃないけど、アニメ的な表現として、何かすごいことが起こったみたいな感じになると面白いと思います。最近はエフェクトも簡単につけられるようになっているので、コンポジットでグローとかレンズフレアとか色味が変わったり、ナレーションで「全てが終わった」とか入れてもいいし、何か面白いことをしてみるといいと思いました。

右動画:上記のアニメーションを動画で動かしています。参考に見てみてください。

スポンサーリンク

関連記事

グリースペンシルに関する記事をまとめたガイド記事です。

スポンサーリンク

参考

コメント