アニメチームのKです！
今回はアニメーションの12原則とグラフアニメーションの話の第二回。
前回は前提知識のご紹介をさせていただきました。
Live2D・Spineのアニメーションの12原則の話 ①概要
今回はアニメーションの12原則を押さえつつ、目指す表現を行うためのカーブの制作例をご紹介します。
各見出しはアニメーションの12原則を一つずつピックアップしています。
本記事はグラフアニメーションに掛け合わせた部分に特化して解説しているため、
他の視点からの知識を得たい方は検索して調べてみてください。
実際にお手元で作ってみながら知っていっていただけたらと思います！
目次
ポーズトゥポーズ
作画アニメーションにおいてのポーズトゥポーズは、
重要なポーズの絵を先にいくつか用意し、間の絵を中割りでつなぐ手法の事です。
実はこれ、グラフアニメーションを制作する際は必ず使用しています。
タイムライン上にキーフレームを作成するだけで間をシームレスに補完してくれるのが、2DCGアニメーションの特徴ですね。
作画のアニメーションではキーポーズを原画と呼びます。
グラフアニメーションの「キーフレーム」と「原画」が同じ役割と思うと、
作画アニメーションの知見もCGアニメーションに転用できそうですよね。
予備動作
（使用ツール：Spine 4.2.43）
予備動作とは、動きの直前にとる準備動作のことです。
もう少し具体的にすると、正面に向かってパンチするモーションを作るとします。
顔の正面にこぶしがあるポーズと、こぶしを前に突き出す2枚の絵があればパンチしているようには見えると思います。
この2枚の絵の間に、一瞬腕を引く絵を一枚足すと、より力を込めてパンチを繰り出して見えるようになる…
この一瞬引いたポーズの事を予備動作と呼んでいます。
動画では予備動作が有る物と無い物で並べているため、それぞれの印象の違いを見比べて見てください。
さらに言えば、キャラクターが動く時は必ずと言っていいほど予備動作が入るので、
取り入れるだけで自然な「生き物の動き」に見えるようになります。
予備動作が大きければ大きい程、動き終わった後の力の込め具合は大きく見えます。
小さい場合はその逆ですね。
予備動作一つで動きの自然さ、力の入り方が表現できるので色々なパターンを試してみてください。
実際にSpineで動かしたパンチモーションがこちらの動画です。
また、グラフアニメーションでは予備動作の動きは特徴的な形をしています。
キーポーズ①からキーポーズ②をまっすぐ繋ぐと直線になりますが、一度反対方向に動いてからキーポーズ②に向かうグラフになっています。
予備動作を作った時のグラフは必ずと言っていい程U字を描くので、グラフを見るだけで作れているかどうかがチェックできます。
フォロースルー・オーバーラップ
フォロースルー・オーバーラップは髪やスカートなどの揺れる表現や、人の動きを柔らかく表現するために用いられます。
Live2DやSpineでは物理演算で揺らした際の動きが一番なじみのある動きですね。
揺らしはじめに追従する動きがオーバーラップ、
本体の動きが止まっても揺れ続ける動きがフォロースルーです。
グラフアニメーションにおいては、そのものの揺れやすさや質感によりグラフの形が大きく変わります。
例えば「太くて曲がりにくいロープ」と「柔らかくて揺れやすい紐」とではこれくらいグラフの形に差異が出ます。
（使用ツール：Live2D Cubism Editor 5.2）
赤いグラフ(紐)と緑のグラフ(ロープ)を見比べて見ると、
赤いグラフ(紐)の方が同じ時間でも波打つ回数が多いのが見て取れます。
「揺れやすいもの」は左右に「揺れる回数が多くなる」と覚えておくと、質感の差異がつけやすくなります。
カーブの形の違いによる表現
ここまででグラフの形がアニメーションに与える影響が伝わったと思います。
グラフの形は様々あり、波型・ジグザグ・弧・ステップなど…
それぞれ適した使いどころがありますので、この章では作例とグラフを合わせてご紹介します！
待機モーションは波型を基本に
（使用ツール：Spine 4.2.43）
キャラクターの待機モーションや呼吸、スチルアニメーションの揺れなど、
一定の波型のグラフを繰り返して動かすケースが多いです。
軸になる波型を作った上で、それぞれのパーツの質感に合わせて細かい揺れグラフをずらしていくと、
全体が連動して動いている様子が伝わると思います。
エフェクトはリニアカーブで動かす！
（使用ツール：Spine 4.2.43）
パーティクルとも呼ばれるエフェクトアニメーションはリニアカーブが適しています。
一定の速度で回転する動きや、放射状に移動する動きなどは一定の速度で動くリニアカーブの使いどころですね。
一方でリニアカーブが「適していない」ケースもあります。
動画の例以外ではキラキラの明滅や、ハートの揺れなど…
丸みのある動きが求められる場合はベジェカーブが適しているので是非使い分けてみてください。
跳ねる動きはグラフが弧を描く！
（使用ツール：Spine 4.2.43）
ジャンプなど跳ねる動きが入る場合は、グラフに弧を描かせると表現できます。
動画では走る際の体の上下の動きを弧を描くように動かしています。
滑らかな波形状の時はスムーズな走りになりますが、弧を描かせるとややポップな印象になりますね。
ステップカーブだから出来る事
（使用ツール：Spine 4.2.43）
滑らかな動きを得意とするベジェカーブに対して、ステップカーブはコマ送り再生をしたような見た目になるのが特徴です。
「すべてベジェカーブ」の場合と「パンチの瞬間のみステップカーブ」を見比べて見ると、
ほんの一瞬ではありますが、腕を突き出す瞬間のフレームが飛ぶことで右の方が力強く見えます。
ステップカーブの動きの特性を見るために「すべてステップカーブ」のモーションも並べています。
揺れはベジェカーブのまま、パンチの動きだけをステップカーブにするなど、部分的に取り入れる事でさらに表現を強調出来る事が伝わったでしょうか。
また素材の表示切替を活用する例ですが、コマ送りアニメーションを部分的に取り入れる事も可能です。
グラフアニメーションでは表現が難しい表現も、
作画のアニメーションの力を使って魅力的に見せていくことも有効な手段だと思います。
活用できるタイミングがあれば試してみてください。
まとめ
今回はグラフの形状と実例を合わせてご紹介しましたがいかがでしたでしょうか？
アニメーションの12原則として紹介されているアニメーションの表現手法と、
実際にグラフを扱う際のカーブの作り方を繋げられていれば幸いです。
次回は今回ご紹介しきれなかった原則も取り上げていきます。
グラフとの関連性は薄いですが、アニメーション作品を作ること全般に大切なトピックです。
2DCGを扱う皆さんが知っておいてプラスになる原則なので次回もまた見ていただけたらと思います！
アニメーションの12原則シリーズ
一緒に働きませんか？
2DCGプラネットスタジオ アニメーションチームでは、現在仲間を募集中です！
募集要項や応募方法については、以下のリンクからご確認ください。
