エクスプレッションの例

最終更新日 : 2024年8月29日

サンプルプロジェクトのダウンロード

この.aepファイルをダウンロードして、以下の式の例の作業を開始してください。

ランダムにウィグル

ウィグルのエクスプレッションは、最もよく使用される After Effects エクスプレッションのうちの 1 つです。 オブジェクトをランダム値に基づいて小刻みに動かします。 このエクスプレッションを使用すると、シーンがより自然に見えるようにすることができます。 このエクスプレッションは、レイヤーの位置プロパティに追加します。

コンポジション内のレイヤーを選択します。

タイムラインパネルに位置プロパティを表示するには、P キーを押します。

Alt キーを押しながら(Windows)または Option キーを押しながら(macOS)、プロパティ名の左側にあるストップウォッチをクリックします。

エクスプレッションフィールドに次のコードスニペットを入力します。

wiggle(2,30)

この例では、最初の数値が 1 秒あたりのウィグルの数、2 番目の数値がウィグルの値となるような wiggle (frequency, amount) です。 したがって、wiggle(2,30) の場合は、1 秒間に 2 回、最大 30 ピクセルだけ任意の方向にレイヤーがウィグルします。

スライダーコントロールを使用したウィグルの制御

値をスライダー制御などのエクスプレッション制御へのリンクに置き換えることで、エクスプレッションにキーフレームを設定できます。 wiggle() エクスプレッションの 2 番目の引数をスライダー制御へのリンクに置き換えることで、特定の時間に開始および停止するように動作にキーフレームを設定できます。

任意のレイヤーにスライダー制御エフェクトを追加し、「ウィグルの量」という名前を付けます。

次のエクスプレッションを同じレイヤーの位置プロパティに適用します。

// ピックウィップを使用して「effect(...)」を作成します Slider
へのリンク var wiggleAmount = effect("Wiggle Amount")("Slider");

// Slider で設定された量だけ 1 秒間に 4 回ウィグルします
wiggle( 4, wiggleAmount );

周回するレイヤー

他のレイヤーのプロパティを使用せずにエクスプレッションを作成することもできます。 例えば、コンポジションの中心でレイヤーを回転させることができます。

コンポジション内のレイヤーを選択します。

タイムラインパネルに位置プロパティを表示するには、P キーを押します。

Alt キーを押しながら(Windows)または Option キーを押しながら(macOS)、プロパティ名の左側にあるストップウォッチをクリックします。

エクスプレッションフィールドに次のコードスニペットを入力します。

var centerOfComp = [ ( thisComp.width / 2 ), ( thisComp.height / 2) ];
var circleOverTime = [ Math.sin( time ) * 50, -Math.cos( time ) * 50 ];
centerOfComp + circleOverTime;

オーバーシュート

一般に慣性バウンスと呼ばれるこのエクスプレッションでは、レイヤー独自のキーフレームのアニメーションを使用して、自然なオーバーシュートを作成します。 この方法では、1 つのキーフレームから次のキーフレームへのパラメーターのバウンスモーションが、その速度に基づいて作成されます。 オブジェクトがどの方向に移動しても、バウンスが発生します。 このアニメーションを実現するには: 

After Effects でグラフィックを作成したり読み込んだりできます。

アニメーション化するレイヤーの位置プロパティにキーフレームを追加します。

 レイヤーの位置プロパティに次のエクスプレッションを追加します。

// オーバーシュートをコントロールする値を設定します。
// これらをスライダー式コントロールにリンクして、異なる設定をすばやくプレビューします。
var amp = 40;
var freq = 30;
var decay = 50;

// 最新のキーフレームを見つけます。
var nK = nearestKey(time);
var n = (nK.time <= time) ? nK.index : --nK.index;
var t = (n === 0) ? 0 : time - key(n).time;

// 現在の時間がキーフレームより後の場合、オーバーシュートを計算します。
// そうでない場合は、元の値を使用します。
if ( n > 0 && t < 1 ) {
var v = velocityAtTime( key( n ).time - thisComp.frameDuration /10 );
value + v * amp * .001 * Math.sin(freq * .1 * t * 2 * Math.PI) / Math.exp(decay * .1 * t);
} else {
value;
}

時間の経過に伴う回転

ピックウイップを使用して回転値をレイヤー間でリンクし、オブジェクトをアニメーション化できます。 時計の動き方を考えると(これらの 3 つの円を時計の 3 つの針と見なします)、時針は 1 時間の幅で動き、分針は時計盤を 1 周します。

3 つの円の平面レイヤーを読み込むか作成します。 1 つは時計の時針の、もう 1 つは分針、3 つ目は秒針のように機能するとします。

レイヤーの端にアンカーポイントを設定します。

アンカーポイントがコンポジションの中心にくるように、レイヤーを動かします

短針の回転キーフレームを設定します。 長針の回転プロパティを選択し、アニメーションエクスプレッションを追加を選択します。

ピックウイップを最大の円の回転プロパティにドラッグします。 次のエクスプレッションが表示されます。 

thisCompayer(“circle”)otation

2 番目の円を 1 番目の円の 12 倍の速さで回転させるには、次のようにエクスプレッションの末尾に *12 を追加します。 

thisCompayer(“circle”)otation*12

3 番目の円でも同じことを繰り返し、次のようにエクスプレッションの末尾に *24 を追加します。

thisCompayer(“circle”)otation*24

ループ

エクスプレッションを使用すれば、キーフレームを追加することなくアニメーションをループさせたり拡張させたりできます。例えば、複数のシェイプをコンポジションの最後まで回転させることができます。 これを行うには、最初の回転の回転プロパティにキーフレームを追加し、次に最後の回転に別のキーフレームを追加します。 キーフレーム化された回転プロパティに oopOut() メソッドを適用すると、レイヤーは最後のキーフレームの後も回転し続けることができます。

以下の loopOut() の例で使用される引数は、ループのタイプと、ループに含めるキーフレームの数を設定します。

// loopOut を cycle に設定してすべてのキーフレームをサイクルします
loopOut("cycle", 0);

最初の引数は「cycle」で、loopOut メソッドで使用できる 4 つのループモードのうちの 1 つです。 他の 3 つは、「continue」「offset」「ping-pong」 です。 「cycle」は最後のキーフレームでループを開始し、2 番目の引数で定義された範囲内の最初のキーフレームの値で再び開始します。

2 番目の引数は、ループに含めるキーフレームの数で、最後のキーフレームから逆算されます。 2 番目の引数が指定されていないか、0 に設定されている場合、プロパティのすべてのキーフレームアニメーションは最後のキーフレームの後にループされます。 引数が 1 の場合、最後のキーフレームとその前のキーフレームの間のアニメーションがループします。 引数が 2 の場合、ループアニメーションは最後のキーフレームとその前の 2 つのキーフレームの間になり、以下も同様になります。

親レイヤーの実際の位置の取得

レイヤーに親がある場合、その位置プロパティに示される値は、コンポジション内の「実際」の位置ではなく、親レイヤーの位置を基準とする相対的な位置です。 親のあるレイヤーの実際の位置を取得するには、エクスプレッションを使用して、親レイヤーの座標空間をコンポジションの座標空間に変換する必要があります。 親のないレイヤーの位置に次のエクスプレッションを適用すると、親のあるレイヤーの場所にリンクされます。

// 親レイヤーを定義します
var targetLayer = thisComp.layer("Parented Layer");

// 親レイヤーのアンカーポイントをコンポジション内で見つけます
targetLayer.toComp( targetLayer.anchorPoint );

レイヤーの位置の親からのディレイ

ディレイオフセットは、アニメーションをよりダイナミックかつ自然に仕上げるための優れた方法です。 これらのタイプのオフセットを作成し制御するには、 1 つのレイヤーを多数のレイヤーの親として設定したあと、それぞれの子の位置にエクスプレッションを適用して、親から継承されたモーションを遅らせます。

これは、親レイヤーでのみ機能することに注意してください。

// フレーム数で遅延量を設定します
var delay = 5;

// 遅延に基づいてレイヤーの位置を時間的にオフセットします
parent.fromComp( toComp( anchorPoint, time - framesToTime( delay ) ) );

親レイヤーを基準とする子レイヤーの相対的なインデックスに基づいて、ディレイ量を制御することもできます。 これにより、親の下のタイムラインに(または、親の前にアニメーションを実行する場合は親の上に)子レイヤーを並べ替えることで、子レイヤーのアニメーションを容易に並べ替えることができます。

// フレーム数で遅延量を設定します
var delay = 5;

// このレイヤーの親に対する相対的なインデックスに基づいて遅延を乗算します
var multiplyDelay = delay * ( index - parent.index )

// 遅延に基づいてレイヤーの位置を時間的にオフセットします
parent.fromComp( toComp( anchorPoint, time - framesToTime( multiplyDelay ) ) );

エクスプレッションの例:特定の時間でウィグルを開始または停止する

次のエクスプレッションを要素の位置プロパティに追加すると、アニメーションの 2 秒後にウィグルエフェクトを開始します。

var timeToStart = 2;

if (time > timeToStart) {
wiggle(3,25);
} else {
value;
}

次のエクスプレッションを要素の位置プロパティに追加すると、アニメーションの開始時にウィグルエフェクトを開始し、4 秒後に停止します。

var timeToStop = 4;

if ( time > timeToStop ) {
value;
} else {
wiggle( 3, 25 );
}

次のエクスプレッションを要素の位置プロパティに追加すると、アニメーションの 2 秒後にウィグルエフェクトを開始し、4 秒後に停止します。

var timeToStart = 2;
var timeToStop = 4;

if ( ( time > timeToStart ) && ( time < timeToStop ) ) {
wiggle(3,25);
} else {
value;
}

エクスプレッションの例:2 つのレイヤーの間にレイヤーを配置する

以下のエクスプレッションの例では、1 つのレイヤーを他の 2 つのレイヤーから同じ距離に配置し、同じ距離が保たれるようにします。

まず、3 つのレイヤーを作成します。

タイムラインパネルで、最初の 2 つのレイヤーの位置をアニメーション化します。

ヒント

モーションパスの操作について説明します。

3 番目のレイヤーを選択します。 P キーを押して、位置プロパティを表示します。 Alt キーを押しながら(Windows)または Option キーを押しながら(macOS)、プロパティ名の左側にあるストップウォッチ ボタンをクリックします。 

エクスプレッションフィールドに次のように入力します。

( thisComp.layer(1).position + thisComp.layer(2).position ) / 2

画像の軌跡の作成

以下の例のエクスプレッションでは、レイヤーを、タイムラインパネルで 1 つ上にあるレイヤーと同じ位置、ただし指定した時間だけ(この場合は 0.5 秒)遅らせて配置します。 その他の幾何学的プロパティにも同様のエクスプレッションを使用できます。

コンポジションサイズの約 30%に縮小されたシェイプレイヤーから開始します。 

位置プロパティを開き、キーフレームを追加します。 レイヤーを選択します。 P キーを押して、位置プロパティを表示します。 Alt キーを押しながら(Windows)または Option キーを押しながら(macOS)、プロパティ名の左側にあるストップウォッチ ボタンをクリックします。

エクスプレッションフィールドに次のように入力します。

thisComp.layer(thisLayer, -1).position.valueAtTime(time - .5)

最後のレイヤーを選択し、Ctrl+D キー(Windows)または Command+D キー(macOS)を押して、5 回複製します。 すべてのレイヤーが同じパスを通り、各レイヤーが直前のレイヤーから 0.5 秒遅れて移動します

エクスプレッションの例:2 つのレイヤー間のバルジを作成する

次のエクスプレッションでは、1 つのレイヤーにあるバルジエフェクトのバルジの中心引数を別のレイヤーの位置と同期させることができます。 例えば、レイヤー上で拡大鏡(つまり上のレイヤー)を動かすと、拡大鏡の下の内容がレンズを通して膨らむようなエフェクトを作成できます。 このエクスプレッションでは fromWorld メソッドを使用しているため、拡大鏡とその下のレイヤーのどちらを動かしても、適切に動作します。 下のレイヤーを回転させたりスケールを変更したりしても、エクスプレッションに変化はありません。

このエクスプレッションはリップルなどの別のエフェクトにも使用できます。

まず、2 つのレイヤーを作成します。 1 つのレイヤーを拡大鏡または中央に穴が開いた類似のオブジェクトにして、「Magnifier」という名前を付けます。 

拡大鏡レイヤーの位置をアニメーション化します。

もう 1 つのレイヤーにバルジエフェクトを適用します。

タイムラインパネルで、バルジエフェクトのバルジの中心プロパティを選択します。 アニメーションエクスプレッションを追加を選択するか、Alt キーを押しながら(Windows)または Option キーを押しながら(macOS)、プロパティのストップウォッチ ボタンをクリックします。

初期設定のエクスプレッションテキストを選択して、次のように入力します。

fromWorld(thisCompayer(“Magnifier”)osition)

エクスプレッションの例:カメラからの距離に応じて 3D レイヤーの不透明度をフェードする

3D レイヤーの不透明度プロパティに次のエクスプレッションを適用します。

var startFade = 500; // カメラから 500 ピクセルでフェード開始。
var endFade = 1500; // カメラから 1500 ピクセルでフェード終了。

try {
// カメラがあるかどうかを確認
var C = thisComp.activeCamera.toWorld([0,0,0]);
} catch ( err ) {
// カメラがないので 50mm を想定
var w = thisComp.width * thisComp.pixelAspect;
var z = (w/2)/Math.tan(degreesToRadians(19.799));
var C = [0,0,-z];
}

var P = toWorld( anchorPoint );
var d = length( C, P );

linear( d, startFade, endFade, 100, 0 );

フェードは、カメラから 500 ピクセル離れた地点から開始され、カメラから 1500 ピクセルの地点で終了します。 linear メソッドは、距離の値を不透明度の値にマップするのに使用します。

エクスプレッションの例:カメラに面していない場合に 3D レイヤーを透明にする

3D レイヤーの不透明度プロパティに次のエクスプレッションを適用します。

if ( toCompVec([0, 0, 1])[2] > 0 ) {
value;
} else {
0;
}

エクスプレッションの例:カメラに面していない場合にレイヤーを水平方向に反転する

3D レイヤーのスケールプロパティに次のエクスプレッションを適用します。

if ( toCompVec([0, 0, 1])[2] > 0 ) {
value;
} else {
[ -value[0], value[1], value[2] ];
}

エクスプレッションの例:各レイヤーマーカーの位置でスケールをアニメーション化する

次のエクスプレッションをスケールプロパティに適用して、各マーカーの位置でレイヤーが揺れるようにします。

var n = 0;
var t = 0;

if (marker.numKeys > 0){
n = marker.nearestKey(time).index;
if (marker.key(n).time > time) n--;
}
if (n > 0) t = time - marker.key(n).time;

var amp = 15;
var freq = 5;
var decay = 3.0;

var angle = freq * 2 * Math.PI * t;
var scaleFact = (100 + amp * Math.sin(angle) / Math.exp(decay * t)) / 100;

[value[0] * scaleFact, value[1] / scaleFact];

メモ

マーカーを追加するには、レイヤーマーカー新規マーカーを選択します。

ここで使用している wiggle 以外のエクスプレッションを使用して、特定の時間でそのエクスプレッションの効果を開始または停止することもできます。

エクスプレッションの例:カメラのフォーカルプレーンを別のレイヤーに一致させる

次のエクスプレッションをカメラレイヤーのフォーカス距離プロパティに適用し、このフォーカス距離が「target」という名前のレイヤーのアンカーポイントへの距離と一致するようにします。

var target = thisComp.layer("target");
var V1 = target.toWorld( target.anchorPoint ) - toWorld( [ 0, 0, 0 ] );
var V2 = toWorldVec( [ 0, 0, 1 ] );

dot( V1, V2 );

その他のエクスプレッション関連リソース

ここまでで、エクスプレッションの背景となる概念を理解したので、次にコミュニティにアクセスして実例を参考にし、自分の作品を共有してください。