AE

【AE】モーション周期表|ループ(Loop)で「繰り返す動き」を作る

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

この記事でできること

Loop(ループ)の役割がわかる
「繰り返す動き」を同じように再現できる
✅初心者がLoopを使う際の「つまづきポイント」が分かる

ループ(Loop)モーションとは?

◆一度作ったキーフレームの動きを、同じパターンで繰り返し再生できる仕組みを作ることです。

上下移動・点滅・回転など「ずっと続く動き」を短時間で作りたいときに使います。

※主に「エクスプレッション(ストップウォッチをAlt+クリック)」を使って表現します。

ループ(Loop)モーションの再現手順

ループを行うための下準備

ループモーションのやり方に入る前に、下記の情報を確認しましょう。

コンポ作成(Ctrl+N)
①ループ素材用コンポ:1920×1080/30fps/1秒
②親コンポ(完成尺):1920×1080/30fps/4秒

レイヤー作成「レイヤー」「新規」「シェイプレイヤー」
※タイムラインパネルの場所で「右クリック」「新規」「シェイプレイヤー」でも可。

この動作の前知識
◆キーフレーム設定:ストップウォッチをクリックして数値を変更する

◆エクスプレッション設定: Altキーを押しながらストップウォッチをクリックして②「loopOut()」を入力

ループ(Loop)モーションの再現手順

出典:Adobe After Effects(© Adobe Inc.)

 

1.「キーフレーム設定のみ」を使ってループを再現する

まずは、キーフレーム設定のみを使った方法についてお伝えします。

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

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

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

 

✅ループ素材用コンポを作成:1秒/30fps(例:1920×1080)

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

✅位置にキーフレームを2つ打つ:0秒地点で中央配置(位置:)、1秒地点で右上配置(位置:)に設定

✅親コンポ(例:4秒)に配置して、複製して並べる

①親コンポ上で作成したレイヤーを選択

「Ctrl+D」複製

開始位置を揃えて並べる

1秒コンポを作る場合、キーフレームは最後のフレーム(1フレーム手前)に置くと安定します。

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

 

2.「キーフレームとエクスプレッション」を使ってループを再現する

とはいえ、長尺になればなるほど「手動で複製して並べる」方法は、手間が増えるため実用ではおすすめしません。

尺変更や微調整のたびに貼り直しが発生しやすいので、実用ではエクスプレッションで自動化するのがおすすめです。

手動で貼り足す方法をおすすめしない理由

◆コンポ尺の変更は他のアニメや音と合わせづらくなる

◆「ループした風」に見えても、書き出しが無限ループになるわけではない

◆尺を戻したり、別カットに流用するときに「調整の手間」がかかる

そこで、この2点(0~1秒)の動きを、コンポの尺に合わせて自動で繰り返すために、下記のエクスプレッションを使います。

同じ動きを繰り返すためのエクスプレッション

loopOut(“cycle”);

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

※図形を作成して動く位置を定めるところまでは、「キーフレーム設定のみの方法」と同じ

「位置」に「エクスプレッション(loopOut(“cycle”);)」を追加する

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

良いところは、「編集しながら尺に合わせられること」です。

「素材として量産するなら1秒コンポ方式」「編集しながら尺に合わせるならloopOut方式」のように、目的に応じて使い分けましょう。

 

3.動きを往復させたい場合のエクスプレッション

出典:Adobe After Effects(© Adobe Inc.)

 

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

まずは、キーフレームだけで「往復する動き(A→B→A)」を作る方法です。

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

完成した素材は、親コンポに配置して手動で貼り足すことで長尺でも運用できます。

※球体を作成するところまでは同じ

✅往路(A→B)を2点で作る

◆0秒:中央(位置:)

◆1秒:右上(位置:)

✅復路(B→A)を手動でつくる

◆2秒:中央(位置:)

※これで0秒→1秒→2秒の3点になり、見た目は「往復する動き」になる

✅長尺にしたい場合は「手動で貼り足す」

◆0~2秒のキーフレーム一式をコピーして、2秒以降に貼り足す

(→A→B→A→B→A)を必要な長さまで作れる)

 

②「loopOut(“pingpong”);」を使って往復を自動化する

手動で往復を作る方法でも再現はできますが、尺が長くなるほど「複製や微調整の手間」が増えます。

そこで、0~1秒の「往路(A→B)」だけを作っておき、往復を自動化する下記のエクスプレッションを使います。

設定間を往復させるためのエクスプレッション

loopOut(“pingpong”);

※上下運動、左右スライドで活用できます

0秒と1秒に「往復(A→B)」の2点だけ作る

◆0秒:中央(位置:)

◆1秒:右上(位置:)

「位置」のストップウォッチAlt(Option)+クリックして式「loopOut(“pingpong”)」を入力

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

こちらも同じく、「編集しながら尺に合わせられること」が良いところです。

「素材として量産するなら(往復ループ素材を作って貼り足す)」「編集しながら尺に合わせるなら pingpong」のように、目的に応じて使い分けましょう。

なお、「loopOut()」 を使えば、コンポの尺が続く限りにおいて動きがループします。

ただし、書き出して「ループ素材」として使う場合は、コンポの尺を「周期の整数倍」にすると、切れ目が不自然になりません。

例:2秒周期なら親コンポを4秒や6秒などで設定します。

3秒や5秒だと周期の途中で尺が切れやすく、ループ素材として使うと切れ目が目立つことがあります。

 

4.イージーイーズを活用してみる

ループの「カクつき」が気になる場合は、「イージーイーズ」を活用してみましょう。

動きをなめらかにできます。

✅位置に打ったキーフレームを選択する(複数ある場合はドラッグして全選択しても良い)

✅イージーイーズを設定する
①「右クリック」>「キーフレーム補助」>「イージーイーズ」
「F9」を押す


【参考】イージーイーズについて

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

 

ループモーションでよくある悩みと対処法3選

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

ループさせるためには、最低2点(開始と終了)のキーフレームが必要です。

まずは、式を入れたプロパティ(位置や回転・不透明度など)にキーフレームが2か所以上配置されているかを確認してみましょう。

2.繰り返しのつなぎ目がカクッとする

原因は主に2つあります。

◆最後の値と最初の値がズレている

◆速度が急に変化している(イージングが弱い移動量が大きいなど)

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

「イージーイーズ」を使う

◆動きをゆっくりにするために「キーフレームの間隔を広げる」

◆変化を弱くするために「移動量(数値)を小さくする」

 

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

エクスプレッションは、大文字・小文字の違いスペルミスでもエラーになります。

まずは、入力した式が正しいか確認しましょう。

例:loopOut(“pingpong”)

◆間違い例①:LoopOut(“pingpong”)⇒(Lが大文字になってしまう)

◆間違い例②:loopOut(“pingpong”)⇒(Oが小文字になってしまう)

それでも治らない場合は、エラー文(例:~is not definedなど)を見て、どの単語が原因かを特定して修正してみてください。

おわりに

Loopは「一回作った動きを、量産できる」ため、使う場面が多いモーションです。

動きを作る中で使える場面があれば、積極的に活用しましょう。