《エクスプレッションで簡単計算！》配列の計算を簡単にする方法

AfterEffectsでレイヤー間の動きを自由に連動させたい場合、親子関係ではなく、エクスプレッションで直接計算をする場合があると思います。

その場合、配列の計算も必要になりますが、自分で計算すると少し面倒です。その為、エクスプレッションを使って配列の計算を簡単にする方法をご紹介します。

配列とは？

複数のデータを格納できる変数のことです。例えば、以下のプロパティが該当します。

• アンカーポイント
• 位置
• スケール

本記事では、「レイヤーaの位置」と、「レイヤーbの位置」を計算する場合を例に説明していきます。

配列の計算方法

「レイヤーaの位置」に「レイヤーbの位置」を足す場合を例に考えてみます。

自分で計算する場合

レイヤーそれぞれの位置を取得し、座標ごとに計算したものを出力する流れになります。

/* 位置を取得 */
var anPositionA = thisComp.layer("layerA").transform.position;
var anPositionB = thisComp.layer("layerB").transform.position;
/* 座標ごとに計算 */
var nResultX = anPositionA[0] + anPositionB[0];
var nResultY = anPositionA[1] + anPositionB[1];
/* 結果を出力 */
[nResultX, nResultY];

エクスプレッションを使う場合

エクスプレッションを使うと以下のようになります。

/* 位置を取得 */
var anPositionA = thisComp.layer("layerA").transform.position;
var anPositionB = thisComp.layer("layerB").transform.position;
/* 結果を出力 */
add(anPositionA, anPositionB);

座標ごとに計算する処理がなくなりました。具体的な配列の四則演算について以下にまとめていきます。

配列の四則演算

ここで紹介するのは、ベクトル演算用のエクスプレッションです。ベクトルは配列で構成されるので、配列の計算にも使えます。

足し算

「add」を使用します。

add(vec1, vec2)

配列のvec1にvec2を足すことができます。

例えば、add([30, 50], [20, 10])を実行すると、[50, 60] になります。addの具体的な使い方は以下をご覧ください。

引き算

「sub」を使用します。

sub(vec1, vec2)

配列のvec1からvec2を引くことができます。

例えば、sub([30, 50], [20, 10])を実行すると、[10, 40] になります。subの具体的な使い方は以下をご覧ください。

掛け算

「mul」を使います

mul(vec, amount)

配列のvecにamoutを掛け合わせます。

例えば、mul([30, 50], 2)を実行すると、[60, 100] になります。mulの具体的な使い方は以下をご覧ください。

割り算

「div」を使います。

div(vec, amount)

配列のvecをamoutで割ります。

例えば、div([30, 50], 2)を実行すると、[15, 25] になります。divの具体的な使い方は以下をご覧ください。

まとめ

配列を自分で計算すると面倒ですが、今回ご紹介した「add」「sub」「mul」「div」を使うと簡単に記述できます。

記述が短くなると、バグの混入リスクも減りますので一石二鳥です。

こうしたテクニックの積み重ねが、作業効率の大幅アップにつながりますので、是非ご活用ください。