Timing & Principles

ポーズを2〜3フレームごとにしか更新しないため、毎フレーム動かす1コマ打ちよりカクついた、手描きらしいリズムになります。

モーショングラフィックス動画で使います。[シーン]を2コマ打ち(Animating on Twos)でアニメーションさせてください。オンツーズ(on twos)、ホールドフレーム(held frames)とも呼ばれ、各ポーズを2フレームずつホールドするので、絵が更新される頻度は、動画のフレームレートの半分になります。
モーションは軌道と全体の速度を保ったまま、手描きやコマ撮りのアニメーションのように、小さく均等なカクつきで進むようにしてください。長く止まって大きく飛ぶ動きが数回あるだけでは、ステップのイーズになってしまいます。
[長さ]のあいだ続け、さらにカクついた感じにしたい場合は、各ポーズをもう1フレーム長くホールドして3コマ打ち(on threes)にしてください。

メインの動きの前に、振りかぶるように逆方向へ小さく動きます。オーバーシュートと対になる、動き出し側の表現です。

モーショングラフィックス動画で使います。[シーン]の動きを予備動作(Anticipation)から始めてください。ワインドアップ(wind-up)、バックイン(back in)とも呼ばれ、オブジェクトがまず逆方向へ少し引いてから、メインの動きへ飛び出します。
引きの動きは、オブジェクトが動き出す前、つまり始まりの側に入れてください。終わりで目標位置を行き過ぎるオーバーシュートを、ちょうど裏返したものです。
予備動作とメインの動きを[長さ]に収め、引きは小さくゆったりとさせて、続く飛び出しが速く感じられるようにしてください。

オブジェクトが直線ではなく曲線の軌道をたどります。AからBへまっすぐ進む動きと比べると、違いがわかります。

モーショングラフィックス動画で使います。[シーン]のオブジェクトをアーク(Arcs)に沿って動かしてください。アークモーション(arc motion)、カーブドパス(curved path)とも呼ばれ、ある位置から次の位置へ、直線ではなく曲線の軌道で移動します。
始点と終点はそのままにして、その間の軌道だけを曲げてください。投げたボールや振った腕の動き方です。AからBへまっすぐ進む動きは機械的に見えます。
動きを[長さ]に収め、カーブは途中で折れのない、ひと続きのなめらかな弧にしてください。

オブジェクトが床に当たるボールのように目標位置にぶつかり、だんだん小さく跳ね返って止まります。接触のたびにぴたりと止まる点がエラスティックと違います。

モーショングラフィックス動画で使います。[シーン]の動きをバウンス(Bounce)で終えてください。バウンスイーズ(bounce ease)、バウンスアウト(bounce out)とも呼ばれ、オブジェクトが床に当たるボールのように目標位置にぶつかり、跳ね返りがだんだん小さくなって止まります。
目標位置を突き抜けることは決してないようにしてください。接触のたびにぴたりと止まり、そのまま跳ね返ります。目標位置の両側へ振れるエラスティックのイーズとは、そこが違います。
動きと跳ね返りを[長さ]に収め、一回ごとの跳ねを、前の跳ねよりはっきり小さくしてください。

モーションが最初から繰り返されます。シームレスループでは終わりの状態が始まりと一致するため、やり直しのつなぎ目が見えません。

モーショングラフィックス動画で使います。[シーン]のモーションをサイクルループ(Cycle Loop)で繰り返してください。ループ(loop)、リピート(repeat)とも呼ばれ、最後まで来るたびに、最初からやり直します。
逆再生で戻るのではなく、最初へ飛んで戻るようにしてください。逆再生で戻るとピンポンループになります。シームレスループにする場合は、最後のフレームを最初のフレームと一致させて、やり直しが見えないようにしてください。
[長さ]のあいだループさせてください。繰り返すたびに最初へ戻るのではなく、前回の終わりから続けたい場合は、オフセットループにしてください。

ゆっくり始まって終わりに向かって加速するため、オブジェクトは最高速で去っていきます。イーズアウトの逆です。

モーショングラフィックス動画で使います。[シーン]の動きにイーズイン(Ease In)をかけてください。スローイン(slow in)や、加速(accelerating)とも呼ばれ、ゆっくり始まって加速し続けるので、動きが終わる時点でオブジェクトは最高速になっています。
終わりは緩めないでください。それでは逆のカーブであるイーズアウトになります。イーズアウトは速く始まって穏やかに収まります。
動きを[長さ]に収めてください。止まるところが見えないので、フレームから出ていくオブジェクトに向いています。

ゆっくり始まり、中間が速く、ゆっくり止まります。動き出しでも穏やかに加速する点がイーズアウトと違います。

モーショングラフィックス動画で使います。[シーン]の動きにイーズインアウト(Ease In-Out)をかけてください。イージーイーズ(easy ease)や、スローイン・スローアウト(slow in and slow out)とも呼ばれ、ゆっくり始まり、中間でもっとも速くなり、減速してやわらかく止まります。
始まりと終わりの両方を穏やかにしてください。最高速で始まり、止まり際だけを緩めるイーズアウトとは、そこが違います。
動きを[長さ]に収め、中間を二つの静止の間の素早いスナップのように感じさせたい場合は、より強いカーブを選んでください。

速く始まり、減速してやわらかく止まります。オブジェクトはすでに動いている状態で現れ、穏やかに収まります。イーズインの逆です。

モーショングラフィックス動画で使います。[シーン]の動きにイーズアウト(Ease Out)をかけてください。スローアウト(slow out)や、減速(decelerating)とも呼ばれ、最高速で始まり、着実に減速してやわらかく止まります。
始まりは緩めないでください。オブジェクトは現れた時点ですでに動いているようにします。動き出しでも穏やかに加速するイーズインアウトとは、そこが違います。
動きを[長さ]に収めてください。フレームに入ってきて定位置に収まる要素に向いています。

特定の見た目ではなく、動きの中で速度が変化するという考え方です。リニアと比べると、イーズをかけたモーションが機械的ではなく自然に感じられることがわかります。

モーショングラフィックス動画で使います。[シーン]のすべての動きにイージング(Easing)をかけてください。タイミングカーブ(timing curve)、スピードカーブ(speed curve)とも呼ばれ、速度を一定にせず、それぞれの動きの中で変化させます。
速度が一定の(リニアな)モーションは機械的に見えます。イーズをかけたモーションは、現実の物と同じように加速し、減速します。入ってくるものにはイーズアウト、出ていくものにはイーズイン、画面内にとどまる動きにはイーズインアウトを使ってください。
それぞれの動きを[長さ]以内に収め、全編で同じ系統のカーブを使って、作品に統一感を出してください。

引っ張ったゴムを放したときのように、振幅を小さくしながら目標位置の前後で何度か振動します。オーバーシュートより揺れの回数が多くなります。

モーショングラフィックス動画で使います。[シーン]の動きにエラスティック(Elastic)のイージングをかけてください。エラスティックイーズ(elastic ease)、エラスティックアウト(elastic out)とも呼ばれ、オブジェクトが目標位置へ一気に飛びつき、引っ張ったゴムを放したときのように、振れ幅を小さくしながらその前後で揺れます。
目標位置を何度か行き来するようにしてください。オーバーシュートは一度しか行き過ぎず、バウンスは一度も行き過ぎません。
動きと揺れを[長さ]に収め、終わるまでに揺れが完全に収まるようにしてください。

現実の動きを、リアルな表現よりも極端な大きさやタイミングにまで押し広げます。リアルなバージョンと比べたときの、強さの違いとしてだけ見えてきます。

モーショングラフィックス動画で使います。[シーン]に誇張(Exaggeration)をつけてアニメーションさせてください。実際に起こるとおりの動きをもとに、より大きな予備動作、より長い伸び、より強い止まりというように、さらに押し広げます。
別のアクションにするのではなく、同じアクションの強さを上げたものです。軌道と出来事の順序は保ち、それぞれがどこまで、どれだけ鋭く動くかを大きくしてください。
全体を[長さ]に収め、オブジェクトが何だかわからなくなる一歩手前で止めてください。壊れて見えるのではなく、カートゥーン調で遊び心のある感じにします。

ゆるくつながったパーツは、本体が止まったあとも動き続け、本体が動き出したあとは遅れてついていくため、すべてのパーツが同時に動いて同時に止まることはありません。

モーショングラフィックス動画で使います。[シーン]をフォロースルーとオーバーラップ(Follow Through and Overlapping Action)でアニメーションさせてください。ドラッグ(drag)、ラグ(lag)とも呼ばれ、ゆるくつながったパーツは、本体が動き出すと遅れてついていき、本体が止まったあとも動き続け、行き過ぎてから収まります。
パーツがすべて同時に動いて同時に止まることのないようにしてください。パーツは受け身で、本体に引っ張られて動きます。メインの動きと並行して起こる、独立した小さな仕草であるセカンダリーアクションとは、そこが違います。
動きと収まるまでを[長さ]に収め、長いパーツや軽いパーツほど大きく遅らせ、止まるまでの時間も長くしてください。

輪郭線が毎回描き直されたかのようにフレームごとにわずかに震え、形が止まっていても、生き生きとした手作りのルックになります。

モーショングラフィックス動画で使います。[シーン]の輪郭線にラインボイル(Line Boil)をつけてください。ボイリングライン(boiling lines)、ウィグリーライン(wiggly lines)とも呼ばれ、すべての線を数フレームごとに少しずつ違えて描き直すので、形そのものが止まっていても、線はその場で震えます。
手でトレースした絵をパラパラめくるように、低いフレームレートで、小さく不連続に変化するようにしてください。なめらかに流れると液体のように見えますし、形全体を動かしてしまうとウィグルになります。
[長さ]のあいだ続け、震えは形が読み取りやすいままでいられる程度に小さく抑えてください。

オブジェクトが目標位置をわずかに行き過ぎてから戻ります。床に当たることなく、一度行き過ぎて収まる点がバウンスと違います。

モーショングラフィックス動画で使います。[シーン]の動きをオーバーシュート(Overshoot)で終えてください。バックイーズ(back ease)、バックアウト(back out)とも呼ばれ、オブジェクトが目標位置をわずかに行き過ぎてから戻り、そこに収まります。
目標位置を行き過ぎるのは一度だけにし、そのあとは揺らさないでください。バウンスは目標位置に当たって、行き過ぎることなく跳ね返り、エラスティックのイーズは何度も行き過ぎます。
動きを[長さ]に収め、行き過ぎは小さく抑えて、ミスではなく勢いとして見えるようにしてください。

モーションが順再生と逆再生を繰り返します。最初へ飛んで戻らない点がサイクルループと違います。

モーショングラフィックス動画で使います。[シーン]のモーションをピンポンループ(Ping-Pong Loop)で繰り返してください。ヨーヨー(yoyo)、ブーメラン(boomerang)とも呼ばれ、最後まで順再生したあと、逆再生で最初まで戻り、その往復を続けます。
飛んで戻ることは決してないようにしてください。サイクルループは最初のフレームへ一気に戻ってやり直しますが、こちらは自分の軌道をそのまま引き返します。
[長さ]のあいだ続け、両端ではやわらかく折り返して、向きの切り替わりが壁にぶつかるのではなく、呼吸のように感じられるようにしてください。

メインのモーションと並行して、それを支える小さなモーションが起こり、注目を奪うことなく生き生きとした印象を加えます。

モーショングラフィックス動画で使います。[シーン]のメインのモーションにセカンダリーアクション(Secondary Action)を加えてください。小さなアクセント、まばたき、ひと振りといった、メインと並行して起こる小さな補助的な動きで、生き生きとした印象を加えます。
それ自体が独立した小さな仕草であって、本体に引きずられてついていく、ゆるくつながったパーツではありません(そちらはフォロースルーです)。メインのアクションから注目を奪うことは決してないようにしてください。
両方を[長さ]に収め、小さな動きはメインの動きの中で始まって終わるようにしてください。

非常に速い動きの途中で、1〜2フレームの中割りだけ被写体を軌道に沿ってゆがめたり複製したりして、モーションブラーを擬似的に表現します。

モーショングラフィックス動画で使います。[シーン]の速い動きにスミアフレーム(Smear Frame)を使ってください。スミア(smear)、エロンゲイテッド・インビトウィーン(elongated in-between)とも呼ばれ、動きの途中のほんの1〜2フレームだけ、被写体を軌道に沿って引き伸ばし、二つの位置の間をつなぎます。
カメラのブラーのようにぼかすのではなく、引き伸ばす、いくつも繰り返して描く、スピード線を引くといった形で、形そのものを描き直してください。前後のフレームはシャープで、ゆがみのないままにします。
動き全体を[長さ]以内に収めてごく素早くし、スミアが形として気づかれるのではなく、スピードとして感じられるようにしてください。

物理シミュレーションによるモーションで、目標位置を行き過ぎ、その前後で振動してから止まります。挙動は固定のカーブではなく、剛性、減衰、質量で決まります。

モーショングラフィックス動画で使います。[シーン]の動きをスプリング(Spring)で制御してください。スプリングアニメーション(spring animation)、ダンプドスプリング(damped spring)とも呼ばれ、シミュレーションしたばねがオブジェクトを目標位置へ引っ張るので、静止状態から加速し、目標位置を行き過ぎ、その前後で振れてから止まります。
モーションは固定のカーブではなく、剛性、減衰、質量から生まれるようにしてください。振れを増やすなら減衰を下げ、オーバーシュートなしで収めるなら、そうなるまで減衰を上げてください。
[長さ]以内に止まるようにし、すべての要素で同じスプリング設定を使って、同じ素材でできているように感じさせてください。

オブジェクトが体積を保ったままつぶれたり伸びたりして、重さと柔らかさを伝えます。

モーショングラフィックス動画で使います。[シーン]をスクワッシュ＆ストレッチ(Squash and Stretch)でアニメーションさせてください。オブジェクトは着地したときや何かに当たったときにつぶれ、速く動いている間は進行方向に伸びます。
体積は一定に保ってください。横に広がったら縦に縮み、その逆も同じです。形の変化はすべて動きと結びつけて、その場でゴムのように揺れているのではなく、重さと柔らかさとして見えるようにしてください。
アクションを[長さ]に収め、柔らかいものは大きく、硬いものはわずかに変形させてください。

値がなめらかに変化せず、段階的に(ホールドの場合は一度だけ)飛びます。ホールドは一瞬で切り替わり、そのあとは動きません。

モーショングラフィックス動画で使います。[シーン]の変化をステップ(Steps)でアニメーションさせてください。ステップイーズ(stepped ease)、ホールドキーフレーム(hold keyframes)とも呼ばれ、値が数回の段階に分かれて、ある位置から次の位置へ飛び、その間は止まったままで、なめらかな中間の動きはありません。
ホールドにする場合は、ジャンプを一度だけにしてください。オブジェクトはその場にとどまり、一瞬で新しい値に切り替わって、そのまま動きません。これは意図的な数回のジャンプであって、2コマ打ちのようなフレーム単位の細かいカクつきではありません。
ジャンプは[長さ]の中に均等に割り振ってください。

一定の頻度と振幅でランダムに小さくずらすことで、オブジェクトが設計した軌道に沿ってではなく、不規則に震えたり漂ったりします。

モーショングラフィックス動画で使います。[シーン]の要素にウィグル(Wiggle)を加えてください。ジッター(jitter)、ランダムシェイク(random shake)とも呼ばれ、一定の頻度と一定の範囲で、要素が元の位置からランダムに少しずつずれ続けます。
ずれは必ず不規則にしてください。左右に均等に振れるのはシェイクであって、ウィグルではありません。また、動くのはこの要素だけで、手持ち撮影のカメラのようにフレーム全体が動くわけではありません。
[長さ]のあいだ続け、位置をウィグルさせてください。その要素に合うなら、代わりに回転やスケールをウィグルさせてもかまいません。