After Effectsのモーションを整理した「モーション周期表」を再現する過程で学んだ内容を、初心者向けにまとめます。

本記事では、その中でも同じ動きを繰り返したい場合に役立つ「ループ（Loop）」に絞って解説します。

この記事でできること

✅「繰り返す動き」をつくれる
✅ループの動きを自動化できる
✅ループを使う操作での「つまづきポイント」がわかる

Contents
  1. ループ（Loop）とは？
  2. ループを再現するための下準備
  3. 一方向に向かう動きをループさせる
  4. 往復させる動きをループで再現する
  5. ここまでのまとめ：ループさせるエクスプレッションを使うポイント
  6. ループのよくあるトラブルと対処法について
  7. おわりに～ループを試してみよう～

ループ（Loop）とは？

サナ
サナ
ループって、結局なにができるんだろう？
  • 一度作ったキーフレームの動きを、同じパターンで繰り返し再生できる仕組みを作ることです。
  • 上下移動・点滅・回転など「ずっと続く動き」を短時間で作りたいときに使います。
  • 再現方法は「作った素材を複製してつなげて使う」か「エクスプレッションを使って動きを自動化する」かの２パターンがあります。

ループを再現するための下準備

シン
シン
ループの説明に入る前に、まずは下準備をしましょうか

親コンポ（完成尺）を作成する

親コンポ（完成尺）：1920×1080/30fps/4秒

※Ctrl+N（Macは⌘+Ｎ）

ループ素材用コンポ（短尺）を作成する

ループ素材用コンポ（短尺）：1920×1080/30fps/1秒

※親コンポより短くしておくと、ループ調整をしやすくなります。

ループ素材用コンポでレイヤー（素材）を作成する

操作手順：「レイヤー」→「新規」→「シェイプレイヤー」

※タイムラインで「右クリック」→「新規」→「シェイプレイヤー」でも作成できます。

この後の操作で使う前知識

  • キーフレーム設定：
    ①ストップウォッチをクリック
    ②数値を変更してキーフレームを打つ
  • エクスプレッション（式）設定：
    ①ストップウォッチを「Alt（Win）／Option(Mac)を押しながらクリック」
    ②エクスプレッション（式）を入力

※入力する式は、手順の項目で後ほど紹介します。

一方向に向かう動きをループさせる

出典：Adobe After Effects（© Adobe Inc.）

「キーフレーム設定のみ」でループさせる

シン
シン
まずは、キーフレーム設定のみを使ってループを再現します

この方法は、「0～1秒で完結する動き」を1秒のループ素材（短い動き）として作る考え方です。

この素材を「親となるコンポジション（例：4秒）」に並べて配置することで、見かけ上ループしている状態を作れます。

この段階では、「自動で無限ループになる」のではなく、素材を貼り足しして長尺にするイメージです。

✅ループ素材用コンポを作成：1秒／30fps（例：1920×1080）

✅シェイプレイヤーで丸を作る：楕円形ツールで100(px)×100(px)の正円（塗り「あり」、線「なし」）

✅位置にキーフレームを2つ打つ：0秒地点で中央（960,540）→ 1秒地点で右上（1820,100）

✅親コンポ（例：4秒）に配置して、ループ素材を複製して並べる

親コンポ上でループ素材を並べる手順

  1. 親コンポ上で作成したレイヤーを選択
  2. Ctrl + Dで複製
  3. 開始位置を揃えて並べる

注意：1秒コンポを作る場合、最後のキーフレームは「1フレーム手前」に置くと、ループの切れ目が目立たなくなります。

例：0:00:00:29（＝1秒の1フレーム手前／30fps）
※fpsが違う場合は「1フレーム手前」だけ意識すれば問題ありません。

 

「エクスプレッション」を使ってループを自動化する

サナ
サナ
手動で複製して並べれば、ループが完成するってことですか？
シン
シン
実は、その方法だと尺が長いほど手間が増えてしまうデメリットがあります
手動で貼り足す方法をおすすめしない理由
  • コンポ尺の変更は他のアニメや音と合わせづらくなる
  • 「ループした風」に見えても、書き出しが無限ループになるわけではない
  • 尺を戻したり、別カットに流用するときに調整の手間がかかる

尺変更や微調整のたびに貼り直しが発生しやすいので、エクスプレッションで自動化する方が作業負担を減らせておすすめです。

0～1秒で作った動きを、コンポの尺に合わせて自動で繰り返すために、下記のエクスプレッションを使います。

このままコピペして下さい（コピーすると自動で半角になります）
loopOut("cycle");

※点滅、一定周期の揺れなどに活用できます。

エクスプレッションの適用方法について

✅図形を作成して、0～1秒の動きを作る（ここまでは「キーフレーム設定のみの方法」と同じ）

✅「位置」のストップウォッチを「Alt（Win）/ Option（Mac）＋クリック」

✅表示された欄に「loopOut(“cycle”);」を貼り付ける

この操作で、作成した動きをコンポの尺に合わせてループさせることができます。

編集しながら尺に合わせられることがこの方法の強みです。

往復させる動きをループで再現する

出典：Adobe After Effects（© Adobe Inc.）

「キーフレーム設定のみ」で往復する動きを表現する

シン
シン
この往復する動きも、まずはキーフレーム設定のみでループさせてみましょう

この方法は、最初に「0～1秒の動き（往路：A→B）」を2点で作り、そのあと「戻り（復路：B→A）」を追加して「往復するループ素材（例：2秒）」として完成させます。

完成した素材は、親コンポに配置して手動で貼り足すことで、往復する動きを再現できます。

✅前提として、球体を作成するところまでは前章と同じです。

✅往路（A→B）を2点で作る：0秒：中央（960,540）→ 1秒：右上（1820,100）

✅復路（B→A）を手動で追加：2秒：中央（960,540）
※0秒→1秒→2秒の3点になり、見た目は「往復する動き」になります

✅この素材を親コンポで複製して並べることで、動きがループします。

親コンポ上でループ素材を並べる手順

  1. 親コンポ上で往復素材（0～2秒）のレイヤーを選択
  2. 必要な回数ぶん、Ctrl + Dで複製する
  3. 各レイヤーの開始位置を2秒刻みで揃えて並べる（A→B→A→B→A…）

注意：「往復素材（2秒）」を作る場合も、最後のキーフレームは「最後のフレーム（1フレーム手前）」に置くと、より自然につながります。

例（30fpsの場合）：0:00:01:29（＝2秒の1フレーム手前）
※fpsが違う場合は「1フレーム手前」だけ意識すれば問題ありません。

 

「エクスプレッション」を使って往復する動きを自動化する

サナ
サナ
往復の動き（A→B→A）も自動化できるのかな？
シン
シン
できます。往路（A→B）だけ作ってとあるエクスプレッションを使って自動化するのが楽ですよ

先ほどと同様に、尺が長くなるほど「複製や微調整の手間」が増えます。

0～1秒の「往路（A→B）」だけを作っておき、往復を自動化する下記のエクスプレッションを使いましょう。

このままコピペして下さい（コピーすると自動で半角になります）
loopOut("pingpong");

※往復（A→B→A）の動きを自動で繰り返すときに使います。

適用手順（エクスプレッション）

✅0秒と1秒に「往路（A→B）」の2点だけ作る

  • 0秒：中央（位置：960,540）
  • 1秒：右上（位置：1820,100）

✅「位置」のストップウォッチを「Alt（Win）/ Option（Mac）＋クリック」して「loopOut(“pingpong”);」を貼り付ける

この操作で、「往復の動き（A→B→A）」を自動ループできます。

先ほどと同じく、「編集しながら尺に合わせられること」が強みです。

コツ：loopOut() を使うと、コンポの尺が続く限り動きが繰り返されます。

ループ素材として書き出す場合は、コンポの尺を「周期の整数倍（2秒周期→4秒／6秒など）」にするのがおすすめです。

周期の途中で切れる尺（3秒／5秒など）は、ループの切れ目が目立つことがあります。

 

ループの動きに「イージーイーズ」を活用してみる

シン
シン
ループのつなぎ目が「カクッ」とした動きに見えるなら、まずは「イージーイーズ（F9）」を試しましょう

キーフレームの切り替わりで動きが急に変わるときは、イージーイーズのグラフエディタを調整して、動きをなめらかにします。

✅位置に打ったキーフレームを選択する（複数ある場合はドラッグして全選択でもOK）

✅イージーイーズを設定する

  1. 「右クリック」＞「キーフレーム補助」＞「イージーイーズ」
  2. キーフレームを選択して「F9（ショートカットキー）」

イージーイーズを入れると、ループの切れ目（つながり）が逆に目立つ場合があります。

対処法として、グラフエディタでカーブを弱めるか、ループの「つなぎ目」になるキーフレームの強さを揃えてみてください。

参考：イージーイーズ（イージング）の考え方を詳しく知りたい場合はこちら

【AE】モーション周期表のアニメーション再現：イージング(Easing）

ここまでのまとめ：ループさせるエクスプレッションを使うポイント

結論：

  • 短い尺であれば、素材を複製して並べても問題ない。
  • ループさせたい尺が長いほど、素材コンポの複製を量産する方法では手間がかかる。
  • ループを再現する時間に応じて、エクスプレッションの利用を検討してみる

使い分けの目安

  • 一方向に進む動きを繰り返したい→cycle
  • 往復（A→B→A）させたい→pingpong
  • 尺が長い／調整が多い→loopOut() で自動化

注意（切れ目を目立たせないコツ）：

  • 1秒コンポなど短尺の場合、最後のキーフレームは「1フレーム手前」に置くと、つながりが安定します。
  • ループ素材として書き出す場合（完成品として書き出す場合）は、コンポ尺を「周期の整数倍」にすると切れ目が自然になります。
    例：2秒周期なら 4秒／6秒／8秒…
  • 周期の途中で尺が切れる場合（3秒／5秒など）は、ループの切れ目が目立つことがあります。
シン
シン
最後に、よくあるトラブルを３つだけまとめますね

 

ループのよくあるトラブルと対処法について

ケース1．式を入れても「動きがループしない」

サナ
サナ
式を入れたのに、ループしない……どこが原因だろう？
シン
シン
まずは、キーフレームが2点以上あるか確認してみましょう
  • ループさせるためには、最低2点（開始と終了）のキーフレームが必要
  • 式を入れたプロパティ（位置／回転／不透明度など）に、キーフレームが2か所以上あるか確認してみる

 

ケース2．繰り返しのつなぎ目がカクッとする

サナ
サナ
つなぎ目だけ「カクッ」ってなるんだよね
シン
シン
原因が２つ考えられます。値のズレか、速度変化です。

つなぎ目のトラブルの2つの原因

  • 最後の値と最初の値がズレている
  • 速度が急に変化している（イージングが弱い／移動量が大きい など）

次のいずれかが、対処法として有効です。

  • 「イージーイーズ」を使う
  • 動きをゆっくりにするために「キーフレームの間隔を広げる」
  • 変化を弱くするために「移動量（数値）を小さくする」

 

ケース3．エクスプレッションで式エラーが出る

サナ
サナ
エラーが出たとき、どこを見ればいいんだろう？
シン
シン
スペルと大文字・小文字の間違いがないかチェックしてみましょう

✅正しい例：loopOut(“pingpong”);

  • 間違い例①：LoopOut(“pingpong”);（Lが大文字）
  • 間違い例②：loopOut(“pingpong”);（Oの大小が崩れる）

それでも直らない場合は、エラー文（例：～ is not defined など）を見て、どの単語が原因かを特定して修正します。

 

おわりに～ループを試してみよう～

サナ
サナ
いろいろな場面で使えそうですね。試してみます
シン
シン
繰り返したい動きを見つけたら、まずは「loopOut」を思い出してくださいね

【記事の制作裏話はこちら（note：Hiromuの探求部屋）】

制作中に気づいたポイントや、つまずきやすい部分の補足もまとめています。

時間があるときに、よければ覗いてみてください。