valueAtTime()｜時間差で動きを追いかけるAEエクスプレッション

先頭の動きを少し直したら、後ろのレイヤーも全部直すことになった。そんな時間差アニメーションには、valueAtTime() が使えます。別のレイヤーの「少し前の値」を読み取り、遅れて追いかける動きを作るエクスプレッションです。

先頭だけにキーフレームを打ち、後続はその動きを参照。今回は丸の追従から始めて、連なる丸と、配置を保った3枚のカードへ展開します。先頭のキーを直すだけで後続も変わるので、同じ動きを何度も調整する場面で役立ちます。

この記事で使用したAEプロジェクトを無料ダウンロードできます。ダウンロードは記事の最後から。

まずは完成形：0.2秒前の位置を追いかける

現在が1.5秒なら、後続が読むのは先頭の1.3秒の位置です。「今の位置から一定距離を離す」のではなく、過去の時刻の位置へ移動するため、先頭が止まると後続も追いついて止まります。

valueAtTime()は「指定時刻の値」を読む

プロパティ.valueAtTime(時刻) という形で使います。位置なら［X, Y］、回転なら角度、不透明度なら数値というように、参照したプロパティの値を返します。今回扱うのは2Dレイヤーの位置です。

書き方	読む値
valueAtTime(time)	現在時刻の値
valueAtTime(time – 0.2)	0.2秒前の値。時間差の追従に使う
valueAtTime(0)	コンポジション0秒の値。初期位置との差を取るときに使う

単位は秒です。30fpsで0.2秒は6フレーム。「6」と書けば6フレームではなく6秒前になります。time はコンポジションの時刻で、レイヤーを途中から置いただけでは、この式の時計はリセットされません。

コピー用コード：同じ軌道を遅れて追う

動かす元のレイヤー名をLEADERにして、後続レイヤーの「トランスフォーム」→「位置」へ貼り付けます。先頭自身へは貼り付けません。

var delay = 0.2;
thisComp.layer("LEADER").transform.position.valueAtTime(time - delay);

delay を0.2から0.4へ変えると、さらに遅れて追いかけます。位置を丸ごと参照する式なので、後続の元の配置は使いません。同じ軌道へ重ねる作例向けです。横に並べたカードの配置を保つ方法は、後半の実践2で扱います。

基本の作り方：キーは先頭だけに打つ

項目	今回の条件
制作環境	After Effects 26.5×89／macOS／JavaScriptエクスプレッションエンジン
コンポジション	1280×720／30fps／6秒／8bpc
対象レイヤー	2D／親とリンクは「なし」／位置の次元分割なし
開始時刻	全レイヤー0秒から。先頭の最初のキーも0秒
素材	シェイプと文字のみ。追加プラグイン・外部素材なし

1. 丸いシェイプレイヤーを1つ作り、レイヤー名をLEADERにします。レイヤー全体の「位置」で動かします。シェイプのグループ内の位置ではありません。
2. LEADERの位置へ、0秒［240, 430］、0.5秒［240, 430］、2.5秒［1040, 430］のキーを打ちます。基本例はリニア補間です。
3. 3.5秒［1040, 430］、5.5秒［240, 430］のキーを足し、停止して戻る動きにします。
4. 丸を複製してFOLLOWERにします。後続の位置キーをすべて削除し、色とサイズを変えて見分けやすくします。
5. FOLLOWERの「位置」のストップウォッチをOption／Alt＋クリックして、上のコードを貼り付けます。
6. 親とリンクが「なし」、3Dがオフ、位置の次元が分割されていないことを確認して再生します。
7. LEADERの2.5秒の位置を動かし、FOLLOWERの式を触らずに軌道が変わることを確かめます。

配布作例は先頭の0秒と0.5秒を同じ位置にして、最初に待機させています。開始直後に0秒より前を参照しても、今回のキーだけの位置は最初の値を返します。先頭を別の式で動かす場合は、負の時刻でどう動くかも確認してください。

delayだけを変えて、追いかける間隔を調整する

delay	30fpsでの目安	この比較での距離
0.1秒	3フレーム	40px
0.3秒	9フレーム	120px
0.6秒	18フレーム	240px

上の比較は毎秒400pxの一定速度なので、距離も遅延に比例します。通常は距離が一定とは限りません。加減速する先頭なら、後続との間隔も広がったり縮まったりします。まずは0.2秒前後から試し、動きの速さに合わせて調整すると扱いやすくなります。

フレーム数で指定したいときは、delayの行だけを次のように変えます。

var delay = framesToTime(6);

これはコンポジションのフレームレートに合わせて6フレームを秒へ変換します。30fpsでは0.2秒、60fpsでは0.1秒です。秒で揃えたいのか、フレーム数で揃えたいのかに合わせて選んでください。

実践1：丸が時間差で連なる

設定	値
コンポジション	02_TRAIL_CIRCLES
先頭	LEADER。位置のキーで折れ曲がる軌道を作る
後続のdelay	0.2／0.4／0.6／0.8秒
後続の位置キー	なし
見た目の調整	後ろほど小さく、薄くする。位置の式とは別の設定

基本例のFOLLOWERを4つに増やし、それぞれのdelayだけを変えます。参照先はすべてLEADERのまま。0.4秒の丸は「先頭から0.4秒遅れ」であり、直前の丸からさらに0.4秒遅れるわけではありません。

丸の大きさと不透明度を後ろほど小さくすると、軌道の流れが見やすくなります。これは残像エフェクトではなく、複数の丸いレイヤーが実際に移動する構成です。直線でも曲がる軌道でも、先頭のキーを編集して調整できます。

実践2：カードの並びを保って時間差で動かす

基本コードを横並びのカードへそのまま使うと、全部が先頭と同じ場所へ集まります。ここでは先頭の位置そのものではなく、0秒からの移動量だけを各カードの元の位置へ足します。

var src = thisComp.layer("LEADER");
var delay = 0.2;
var p = src.transform.position;
value + p.valueAtTime(time - delay) - p.valueAtTime(0);

設定	値
コンポジション	03_STAGGER_CARDS
先頭の初期位置	LEADER［280, 520］
後続の元の配置	CARD_1［640, 520］／CARD_2［1000, 520］
delay	CARD_1は0.2秒、CARD_2は0.4秒
先頭の移動	0.5〜1.5秒でY520→330、3.5〜4.5秒でY330→520
補間	先頭の位置キーにイーズ。後続は遅れた時刻の値を読む

value は後続の式を適用する前の位置です。そこへ p.valueAtTime(time - delay) - p.valueAtTime(0) で求めた移動量を足すため、横の並びが残ります。

1. 同じデザインのカードを3枚、横へ並べます。アンカーポイントは各カードの中心に揃え、親子付けはしません。
2. 先頭をLEADERにして、位置へ上下移動のキーを打ちます。最初のキーは0秒の基準位置に置きます。
3. 2枚目・3枚目の位置キーは削除し、それぞれの静止位置を設定します。
4. 後続の位置へ実践2のコードを貼り、2枚目はdelayを0.2、3枚目は0.4にします。
5. 先頭の上下移動や加減速を調整して再生します。後続のキーを打ち直す必要はありません。

この式が共有するのは位置の移動量だけです。回転・スケール・不透明度は連動しません。後続に別の位置キーを残すと、その動きに移動量が加算されるため、まずは静止位置から始めてください。

キーフレームをずらす方法とは、どう使い分ける？

方法	向いている場面
キーを複製して時間をずらす	少数のレイヤーを一度だけ作る。後続ごとに違う軌道へ仕上げたい
valueAtTime()で共通の先頭を参照	同じ動きを繰り返し使う。先頭の軌道・速度を後から何度も直す
親子付け	同じ時刻の変形をまとめて受けたい。通常の親子付けだけでは時間差にならない

式を使っても、先頭の動きを作るキーは必要です。メリットはキーをなくすことよりも、修正する場所を先頭へ集められること。後続を個別に調整したい場合は、キーを複製する方法の方が分かりやすいこともあります。

追従しない・位置がずれるときに確認すること

症状	確認すること
レイヤーが見つからない	レイヤー名をLEADERへ揃える。大文字・小文字、全角・半角と重複名も確認
式が循環する	先頭自身へ式を入れていないか確認。先頭が後続を参照する構成にしない
全部同じ場所へ集まる	基本コードは位置を置き換えます。並びを残すなら実践2の移動量コードを使う
親を付けるとずれる	位置は親の座標系の値です。今回の作例はすべて親なし。異なる親や3Dの座標変換は含みません
次元のエラーになる	今回のコードは2D位置全体用。X位置・Y位置へ分割している場合は、まず分割を解除する
途中から置くと開始が合わない	timeはコンポジション時刻。delayはレイヤーの開始時刻を自動で基準にしません
後続が見えなくなる	先頭が止まると同じ場所に重なります。色・サイズ・描画順も確認
元の素材のアニメーションまで遅れない	今回読むのはレイヤーの位置だけ。プリコンポーズ内部の映像やソース時間の再生を遅らせる式ではありません

まずは親なしの2Dレイヤー2つと、先頭の位置キーだけで試すのがおすすめです。指定時刻の値を読む仕組みはAdobeのエクスプレッション解説でも紹介されています。

作例プロジェクトをダウンロード

基本の0.2秒遅延、丸の連なり、横並びカード、遅延時間の比較を収録。先頭のキーと後続の式を編集して、動きを変えられます。

項目	内容
版・容量	v1.0／56,452バイト（約55KiB）
収録	編集可能AEP、expressions.txt、はじめに.txt
制作環境	After Effects 26.5×89／JavaScript／30fps
フォント	Hiragino Sans W6／Arial Bold。フォント本体は同梱していません
利用条件	学習・個人制作で利用と改変可。商用利用は個別相談

商用利用はお問い合わせページからご相談ください。別の動きを探すときはAEエクスプレッション集へ。