同じ動きを何度も使いたいとき、キーフレームをコピーし続ける必要はありません。loopOutを使うと、作った動きを最後のキーの後も繰り返せます。回り続けるマークや、ゆっくり拡縮するカードに便利です。
AEエクスプレッション集の第2弾は、先頭へ戻るcycleと、往復するpingpongの使い分け。基本の位置比較から、回転・スケールへの応用まで順に紹介します。
この記事で使用したAEプロジェクトを無料ダウンロードできます。ダウンロードは記事の最後から。
まずは完成形：キーだけ・cycle・pingpongを比べる
3つの丸は、0.5秒のX350から1.5秒のX1050へ、1秒かけて移動します。キーだけなら右で停止。cycleは左へ戻って再開し、pingpongは右から左へ戻ります。片道1秒なら、cycleの1周期は1秒、pingpongの往復は2秒です。
コピーして使えるコード
先頭に戻って繰り返すときは、適用先のプロパティに次の1行を貼り付けます。
loopOut("cycle");行ったり来たりさせるときはこちら。2つを同時に貼らず、目的に合う1行を使ってください。
loopOut("pingpong");引用符は半角の " を使います。loopOutのOは大文字です。上のコードはテキストなので、選択してコピーできます。
使う場所と基本の再現手順
| 項目 | 今回の設定 |
|---|---|
| 環境 | After Effects 26.5（26.5×89）／macOS／JavaScriptエクスプレッションエンジン |
| コンポジション | 1280×720／30fps／8秒／8bpc |
| 基本例の素材 | 直径64pxの丸。外部素材・追加プラグインなし |
| 位置キー | 0.5秒［350, 410］→1.5秒［1050, 410］／リニア |
| フォント | Hiragino Sans W6／Arial Bold。未導入なら差し替え |
- 8秒のコンポジションに丸を作り、位置のキーを上の値で2つ打ちます。
- キーの時間補間をリニアにし、横へまっすぐ移動する状態にします。
- 位置のストップウォッチを、MacはOption、WindowsはAltを押しながらクリックします。
- 開いた式の入力欄へ
loopOut("cycle");を貼り付けます。 - 1.5秒より後を再生し、移動が繰り返されることを確認します。
cycleをpingpongへ変え、同じキーのまま往復する動きに切り替えます。
loopOutはエフェクトメニューから追加する機能ではありません。繰り返したい値そのものに式を入れます。位置を動かすなら位置、回すなら回転、拡縮するならスケールです。
cycleとpingpong、どちらを選ぶ？
| 種類 | 繰り返し方 | 使いやすい場面 |
|---|---|---|
| cycle | 最後まで進んだら先頭へ戻る | 360度の回転、始点と終点が同じ見た目の動き |
| pingpong | 最後まで進んだら逆向きに戻る | 左右移動、ゆっくりした拡縮、往復運動 |
cycleは、始点と終点が違う位置だとつなぎ目で跳びます。基本例では違いを見せるため、そのまま左へ戻しています。位置を滑らかにつなぎたいならpingpong、同じ向きに回し続けたいならcycle、と使い分けると考えやすくなります。
速さを変える：キーの間隔を動かす
速さ専用の引数を足すのではなく、元のキーの間隔を広げたり狭めたりします。同じ移動距離なら、間隔を半分にすると2倍の速さ、2倍にすると半分の速さになります。
| キー間隔 | cycleの周期 | pingpongの往復周期 |
|---|---|---|
| 0.5秒 | 0.5秒 | 1秒 |
| 1秒 | 1秒 | 2秒 |
| 2秒 | 2秒 | 4秒 |
最後の一部分だけ繰り返す：numKeyframes
第2引数は「何回繰り返すか」ではなく、最後のキーから、いくつのキー区間をさかのぼるかです。省略または0は全キー。1なら最後の2つのキーの間だけを繰り返します。
loopOut("cycle", 1);
「最初に登場して、その後の小さな動きだけを繰り返す」ときに役立ちます。numKeyframes=2はキー2個ではなく、2区間＝キー3個分です。
実践1：回転し続けるマーク
| 設定 | 値 |
|---|---|
| 対象 | 02_SPIN_MARK内のLOOP_ROTATION／回転 |
| キー | 0秒0度→2秒360度／リニア |
| 式 | loopOut("cycle"); |
| 1周 | 2秒 |
丸を円状に並べ、1つのプリコンポジションにまとめます。アンカーポイントをマークの中心に置き、回転のキーを0度から360度へ設定してcycleを適用。基本例から変えるのは適用先が位置から回転になる点です。
数値は360度から0度へ戻りますが、見た目は同じ向きなのでつながります。一定速度で回すため、ここではリニアを使います。イージーイーズを付けると、毎周加速・減速する動きになります。
実践2：呼吸するように拡縮するカード
| 設定 | 値 |
|---|---|
| 対象 | 03_BREATHING_CARD内のLOOP_SCALE／スケール |
| キー | 0秒［96, 96］%→1.5秒［104, 104］% |
| 補間 | 両端にイージーイーズ |
| 式 | loopOut("pingpong"); |
| 往復 | 3秒 |
背景・文字・アクセント線を640×230のプリコンポジションにまとめ、親コンポジションで中央に配置します。スケールの2つのキーにイージーイーズを付け、pingpongを適用すると、切り返しが柔らかくなります。基本例から変えるのは、適用先・数値・キー間隔・補間です。
大きく動かしすぎると文字が読みづらくなります。まずは96〜104%程度で試し、落ち着いた動きにしたいなら98〜102%へ狭めてください。
動かない・つなぎ目が跳ぶときの確認
| 症状 | 確認すること |
|---|---|
| 繰り返さない | 同じプロパティに2つ以上のキーがあるか、最後のキーより後を再生しているか、式が有効かを確認。 |
| 途中で見えなくなる | レイヤーのアウト点やコンポジションの長さを確認。loopOutはレイヤー自体の尺を延長しません。 |
| cycleで位置が跳ぶ | 始点と終点が違う位置なら先頭へ戻ります。往復させたいならpingpongに変更。 |
| pingpongの切り返しが急 | リニアなら端で方向が急に反転します。柔らかくしたいなら両端のキーにイージーイーズ。 |
| 2回だけ繰り返したい | 第2引数は回数指定ではありません。終了時刻を条件にする別の式が必要です。 |
| 映像や文字内容をループしたい | この例は位置・回転・スケールの数値を繰り返すものです。映像の再生にはタイムリマップ等の別設定が必要。ソーステキストやシェイプパスにはそのまま使えません。 |
動きの仕組みと引数の仕様はAdobeのエクスプレッション言語リファレンスでも確認できます。まずcycleとpingpongの2種類を使い分けられれば、少ないキーでも繰り返しの表現を増やせます。
作例プロジェクトをダウンロード
基本比較・回転マーク・カードの拡縮・周期と範囲の比較を収録しています。キーの時刻や値、式を変えて試せます。
| 項目 | 内容 |
|---|---|
| 版・容量 | v1.0／76,540バイト（約75KiB） |
| 内容 | 編集可能なAEP、expressions.txt、はじめに.txt |
| 制作環境 | After Effects 26.5×89／JavaScriptエクスプレッションエンジン |
| 必要フォント | Hiragino Sans W6／Arial Bold。フォント本体は同梱していません。 |
| 利用条件 | 学習・個人制作で利用と改変可。商用利用は個別相談。 |
商用利用はお問い合わせページからご相談ください。
止まり際に余韻を加えたいときは、慣性バウンスの使い方もどうぞ。ほかのコードはAEエクスプレッション集から探せます。
コメント