継ぎ目のないモーションループの作り方

最初と最後のフレームは同じに見えます。それでも、ループは跳ねます。

継ぎ目のないループでは、同じ画像を合わせるだけでなく、動きの状態をつなぐ必要があります。次の周期が、前の周期で作られた位置、方向、速度を引き継がなければなりません。視聴者は、方向、速度、加速度、照明、質感、音も知覚します。オブジェクトは同じ位置に戻っても、速度が異なるかもしれません。本体が静止していても、影だけがリセットされることがあります。映像が完璧でも、背景音楽の境界でクリックノイズが出ることがあります。

ループを設計するには、境界も、続いていくシステムの中の一つの瞬間として扱うと有効です。終わる直前に、オブジェクトは何をしているべきでしょうか。始まった直後には、何を続けるべきでしょうか。その状態が自然につながれば、継ぎ目はずっと解決しやすくなります。

元のアニメーション、エンコードされたフレーム列、最終プレーヤーには、それぞれ確認すべき境界があります。

必要なループの種類を決める

連続ループは、明確な始まりがないように動きます。回転する模様、周回するオブジェクト、流れるテクスチャーは、毎回新しいメッセージを示さずに、いつまでも繰り返せます。物語のあるループは、短い流れを経て開始状態に戻ります。製品のティーザーなら、機能を見せ、結果で落ち着き、意図的なトランジションでリセットするかもしれません。

これらは異なる設計上の問題です。連続回転には、一貫した角度の進み方が必要です。物語のループには、納得できる戻り方か、意図した停止が必要です。話のリセットをクロスフェードで隠そうとすると、根本的な不連続を解決せず、二重像のフレームを作ることがあります。

何を繰り返すべきかを説明するところから始めます。シーン全体、背景の模様、カーソルの実演、一つの装飾的なオブジェクトのどれでしょうか。前面に読むべき文があるなら、文字を固定し、背景だけをループさせる方がよいかもしれません。登場演出をすべて繰り返すと、絶えず中断されるような動画になることがあります。

無音の自動再生、明示的な再生ボタン、音声付きの連続表示のどれを想定するかも決めます。配信の文脈は、始まり、終わり、目に見える停止をどこまで許容できるかに影響します。小さな背景要素としては優雅なループも、全画面で繰り返すメッセージでは疲れるものになるかもしれません。

位置だけでなく、動きの状態を合わせる

点が左から右へ動き、その後戻る様子を想像してください。最後には開始位置と同じ場所に着きます。左へ動きながら到着し、すぐ右へ動き始めるなら、方向は急に変わります。画像は一致していても、動きには鋭い反転があります。

連続ループでは、境界の状態に場所以上のものが含まれます。方向と速さは、意図する動きに必要な形でつながるべきです。滑らかに周回するオブジェクトは、その経路を進み続けるべきです。振り子のようなオブジェクトなら端で反転できますが、全速力で限界にぶつかるのではなく、その前に適切に減速する必要があります。

単純な周期運動の例に、1周期の余弦関数で定義する水平方向の動きがあります。一つの周期を終えると、位置と速度が同じ状態に戻ります。数学的に整った境界が得られますが、レンダリングしたシーンのすべての視覚的性質が、自動的に同じ周期を持つわけではありません。

点が大きさ、不透明度、影も変えるなら、それらの周期も両立する必要があります。位置が6秒、色が4秒のループでは、両方が一緒に繰り返されるのは、さらに長い共通の周期が終わった後です。6秒だけを書き出すと、点の経路に継ぎ目がなくても、色がリセットされる場合があります。

シーンを、境界で整合する必要がある状態の集まりとして扱います。最も目立つ不一致は、主要なオブジェクトではなく、副次的なレイヤーにあるかもしれません。

この記事の動きの実演では、その違いが見えます。毎秒30フレームで、6秒の周期を3回収めています。最初の点は、直線的に往復して急に反転します。二つ目は、両端で速さがゼロになる余弦の経路をたどります。

速度のグラフを見ると、繰り返しで二つの経路の感触が異なる理由が分かります。どちらも片道1050ピクセルを、6秒かけて往復します。直線の経路は毎秒350ピクセルで進み、急に方向を反転します。位置は一致していても、境界では速度が負から正へ跳びます。

余弦の経路は、端で速さがゼロになり、その後、次の移動へ向けて加速します。最高速度は毎秒約550ピクセルです。つまり、反転が滑らかだからといって、周期全体で遅く動くわけではありません。速度の配分が異なるのです。修正したループの中間が急に勢いよく感じられたら、滑らかな境界を元に戻すのではなく、移動距離を減らすか、周期を長くします。

ループアニメーションのフレーム境界を設定する

レンダリング済みの動画は、離散的なフレームから成ります。このため、数学的な終点と、最後に表示するフレームには、小さくても重要な違いが生まれます。

6秒、毎秒30フレームのループなら、180フレームあります。フレーム番号をゼロから始めると、表示するフレームは0から179です。繰り返す列の次のフレームは、再び0になります。

一定の回転では、通常、最後の表示フレームから繰り返した最初のフレームまでの角度の増分を、列の途中の増分とそろえます。0度のフレームと、同じ姿になる一回転後のフレームの両方を明示的に入れると、継ぎ目で同じ視覚状態が2回出ることがあります。滑らかに続く代わりに、ごく小さなためらいが生まれるかもしれません。

正確な実装は、レンダラーと時間の扱い方によって異なります。重要なのは、終点のキーフレームを合わせれば正しいテンポになると思い込まず、実際に表示されるフレームの並びを調べる習慣です。

RemotionのLoopコンポーネントと現在のタイミングのドキュメントは、フレーム範囲の繰り返しを説明しています。繰り返す区間を何フレームで構成するか選ぶ、明示的なフレームベースのモデルとして役立つ例です。この仕組みは、渡した内容を繰り返します。内容の中にある不連続を修復するものではありません。RemotionのLoopドキュメントで、コンポーネントの範囲を説明しています。

連続する動きには周期的な仕組みを使う

回転するオブジェクトなら、選んだ時間に一回転を定義し、現在のフレームから角度を求めます。周回なら、同じ位相から横と縦の座標を求めます。繰り返す模様なら、テクスチャーの空間的な周期と移動距離を合わせます。

これは、見た目が近くなるまで最後のキーフレームを手で調整するより、確実なことが多くあります。周期的な定義があれば、その状態が繰り返すべき理由があります。継ぎ目を推測するのではなく、レンダリングや再生の問題に集中できます。

ただし、数学的な周期性と魅力的な動きは同じではありません。完全に繰り返すオブジェクトでも、速すぎたり、不自然に止まったり、文字と注意を奪い合ったりします。アニメーションの役割に合わせて、周期の長さと振幅を選びます。装飾的な背景が、主要な製品操作と同じ注意を求めるべきではありません。

連続して繰り返す動きに付けるイージングには注意してください。ease-in-outの回転は、一回転ごとに始めと終わりで遅くなります。意図的に止まっては動くオブジェクトには適切かもしれません。等速で回る車輪には、通常不適切です。位置の継ぎ目が正しくても、繰り返すためらいは目立ちます。

ソースで定義するアニメーションでは、周期を一つの名前付きの値に置き、関連するタイミングをそこから求めます。時間を別々に固定値で書くと、変更時に不整合を起こしやすくなります。関連するレイヤーが明確な位相、または意図して関連付けた周期を共有する仕組みが、最も単純で堅牢なことがよくあります。

物語の中にリセットを組み込む

製品の操作は、必ずしも自然な周期運動ではありません。ファイルを書き出す、メッセージを送る、レポートを完成させるといった操作です。映像を逆再生して最初へ戻すと、実際には行われなかった取り消し操作を示唆するかもしれません。

物語のループでは、リセットを製品の挙動に見せかけず、編集上の出来事にします。完成したレポートで落ち着き、一度ブランドの全体表示に戻り、その画面から次の周期を始められます。戻り方は見えますが、筋が通ります。

最初に似た状態で終える方法もあります。問いから結果へ進み、その後で同じ問いの次の事例を示せます。製品が操作を巻き戻したように見せずに、概念的なループを作れます。

リセットを隠すためだけに、結果を理解する前に画面を切り替えてはいけません。ループでも何かを伝える必要があります。視聴者が結果を安定して見られなければ、継ぎ目をなくすことは二次的な成果にすぎません。

短いプロモーションループでは、少しの停止が役立つこともあります。読む時間を与え、再開が意図的に感じられます。目標は、どんな犠牲を払っても、知覚できる境界をすべて消すことではありません。望む体験を支える境界を選ぶことです。

継ぎ目を明らかにし得るすべてのレイヤーを調べる

主要なオブジェクトは正しくループしていても、背景はそうでないかもしれません。ノイズ、粒子、グラデーション、影、反射、カメラ移動は、それぞれリセットを露呈させる場合があります。

よくある原因はランダム性です。レンダリングや再生のたびに新しいランダムな位置を生成するなら、始めと終わりが安定して一致しないことがあります。固定した乱数シードを使えば再現可能になりますが、それだけでランダムな過程が周期的になるわけではありません。状態を戻すか、意図的にリセットを隠す必要は依然としてあります。

終わり近くで生まれた粒子が、最初に消えるかもしれません。テクスチャーが、タイル一枚分に近くても正確には異なる距離を移動するかもしれません。カメラが開始位置に戻っても、焦点距離や被写界深度の状態が違うかもしれません。オブジェクトが同じ場所にあっても、控えめな影が急に変わる場合があります。

可能なら、副次的なレイヤーを単独表示して継ぎ目を確認します。その後、構図全体を戻します。単独表示は原因を特定する助けになり、全体表示は修正後も視覚的な一貫性があるかを教えてくれます。

収録映像を使うなら、見えない繰り返しに向かない素材もあると受け入れます。まばたき、不規則な波、変化する反射には、別の区間、意図したトランジション、短い部分だけのループが必要かもしれません。無理に継ぎ目をなくすと、丁寧に明示した再開より目立つ乱れを生むことがあります。

音声の境界は独立した問題として扱う

映像が隠した継ぎ目を、音声が露呈させることがあります。波形の急な不連続はクリックノイズを生みます。持続音は、つなぎ目で音色が変わるかもしれません。波形上は滑らかでも、音楽のフレーズがリズム的に不自然な場所から再開する場合があります。

信号の境界と、音楽や物語の境界の両方を確認します。短いクロスフェードはクリックノイズを減らせますが、立ち上がりが二重になったり、聞こえる音量の落ち込みを作ったりすることもあります。すべてのループに同じフェードを使わず、素材に合わせて重ね方を選びます。

連続する環境音なら、質感と音量が合う区間を探します。音楽なら、フレーズと拍の構造を保ちます。製品の音なら、周期ごとに一度鳴るべきか、繰り返すと不快になるかを判断します。数秒ごとに鳴る成功音が、体験全体を支配してしまうことがあります。

無音版も見ます。継ぎ目の音がループの意味を担っているなら、自動再生では機能しないかもしれません。不可欠な状態変化は、見えるままにする必要があります。音声は、次の繰り返しが始まった唯一の手掛かりにならずに、周期を補強できます。

音声エディターのプレビューだけでなく、最終的にエンコードしたファイルを確認します。エンコードやプレーヤーの挙動によって、タイミングや余白に差が生じることがあります。きれいな元波形は有用な証拠ですが、視聴者が聞くのは、実際に届けられたループです。

アニメーションとともにプレーヤーも検証する

完全に周期的なソースでも、プレーヤーがファイルを読み直したり、境界をうまく扱わなかったりすると、止まったように見えます。逆に、バッファリングや表示の挙動が、ソースの小さな不連続を隠す場合もあります。タイムラインのプレビューから推測せず、実際の配信先で試してください。

複数の周期を再生します。最初だけは、読み込み、デコード、ポスター画像の除去があり、その後は起きない場合があります。通常速度で繰り返す境界を見て、画面を見ずに音を聞きます。一度に一つの感覚へ注意を向けると、継ぎ目に気付きやすいことがあります。

CSSでループを実装するなら、繰り返し回数と方向で反復の仕方が決まります。方向を交互にすることと、同じ方向のまま最初へ戻ることは異なります。MDNはプロパティと仕組みを説明していますが、選んだ挙動が意図した動きに合うかは、別途判断する必要があります。MDNのiteration-countリファレンスは、実装確認の出発点になります。

最終納品がMP4なら、まさにその書き出しファイルが、想定するプレーヤーで繰り返すかを確かめます。ブラウザーのアニメーションを代わりに使い、動画も同じように動くと思い込まないでください。数学上のタイムライン、レンダリング処理、エンコード済みファイル、再生環境は、関連していても別々の段階です。

6秒、毎秒30フレームの回転で、1フレームあたり2度進めると、フレーム0の角度は0度、フレーム179は358度になります。次に繰り返すフレームは0度に戻り、円周上では同じ2度の進行を続けます。別途360度のフレームを加えると、境界で0度と同じ状態が重複します。この数値例が扱うのは等速回転だけです。ほかの性質があるシーンでは、それぞれを独立して確認する必要があります。滑らかそうという印象に頼らず、フレーム数の問題を検査できる形にする例です。

境界で何が起きるかをフィードバックする

「ループをもっと滑らかに」では、実際の不一致を直さず、速度を落としたり、クロスフェードや新しいイージングを加えたりするかもしれません。継ぎ目の前後で何が変わるかを説明します。

たとえば、次のように指摘できます。「オブジェクトは正しい位置に戻りますが、左へ動きながら到着し、全速力で右へ再開しています。経路と時間は保ち、反転を意図した動きにするか、境界の速度が一致する周期運動を使ってください。」別の例は、「映像はきれいに繰り返しますが、環境音のつなぎ目にクリックノイズがあります。音声の境界を別に確認してください」です。

最後の確認は、言葉では簡単ですが、実行には厳密さが必要です。次の周期が、前の周期で作った体験を続けること。位置、動き、副次的なレイヤー、音、再生が、すべて整合する必要があります。それができれば、視聴者は、ファイルが再び始まる瞬間を何度も意識せず、画像やメッセージに注意を向け続けられます。