エクスプレッション

エクスプレッションでグリッド上に均等配置する

複数のレイヤーをエクスプレッションでグリッド状に整列させてみましょう。

目的を整理する

まずはどんな計算式になるかを言葉で整理します。

  • レイヤーをx方向に指定pxずつズラす
  • ヨコに指定個数並んだら折り返す
  • y方向に指定pxズレたところからx方向に並べる
  • 「ズレY」は文章でいうと折り返した行のイメージ
  • ズレは一括制御出来たほうが便利

ということで、ここでもコントローラー用のヌルオブジェクトを活用しましょう。一括制御用のアイディアは「エクスプレッションで一括制御+疑似親子+ミラーリング」を参照。

「x方向のズレ」×「n個目のレイヤー」で横に均等配置できますね。

そこに折り返しが入るので、「n個目のレイヤー」は…「n個目のレイヤー-1」/「折返しまでの個数」の余りに変換します。3つで折り返すなら

(1-1)/3=0 余りも0
(2-1)/3=0 余り1
(3-1)/3=0 余り2
(4-1)/3=1 余り0
(5-1)/3=1 余り1
(6-1)/3=1 余り2
(7-1)/3=2 余り0

0,1,2,0,1,2,0…となり、「x方向のズレ」が「60」なら、0,60,120,0…OKですね。

「y方向のズレ」は折り返してから次の折返しまで1回分折り返します。

つまり…「n個目のレイヤー-1」/「折返しまでの個数」の余り切り捨てに変換します。3つで折り返すと

(1-1)/3 =0
(2-1)/3 余り切り捨て=0
(3-1)/3 余り切り捨て=0
(4-1)/3 =1
(5-1)/3 余り切り捨て=1
(6-1)/3 余り切り捨て=1
(7-1)/3 =2

となり、「y方向のズレ」が「60」なら、0,0,0,60,60,60,120…OKですね。

エクスプレッションに変換していく

目的が整理できましたので、言葉の式をエクスプレッションに変換していきましょう。

コントローラー用のエクスプレッション

一括制御の「折返しまでの個数」「xズレ」「yズレ」を準備します。ヌルオブジェクトを追加し、名前は「ctrlヌル」とでもしておきます。

数値が欲しいので、「スライダー制御」エフェクトを適用します。

サンプルでは名前をそれぞれ「n個で改行」「ズレX」「ズレY」としました。

シェイプレイヤー用のエクスプレッション

まずは計算しやすいよう変数を準備します。

cLyr=thisComp.layer("ctrlヌル");
ind=cLyr.index-index-1;
xNum=cLyr.effect("n個で改行")(1);

「余り」を出す演算子

そして「x方向のズレ」は

「n個目のレイヤー-1」/「折返しまでの個数」の余りです。

余りを出す演算子がきちんと用意されています。「%」です。

zureX=ind%xNum;

これに「xズレのpx数」を掛けるとヨコ位置に均等配置されます。

「余り」を切り捨てる関数

次に、「y方向のズレ」は

「n個目のレイヤー-1」/「折返しまでの個数」の余り切り捨てです。

割り算の余りは小数点以下の数ですので、「小数点以下切り捨て」ができると良さそうです。ちょうどいい関数があります。「Math.floor()」です。

zureY=Math.floor(ind/xNum);

これで余りを切り捨てた整数だけ取り出せます。

あとは簡単

残る簡単な計算式に当てはめていくだけです。

X=cLyr.effect("ズレX")(1)*zureX; // ヨコの位置
Y=cLyr.effect("ズレY")(1)*zureY; // タテの位置
[cLyr.position[0]+X,cLyr.position[1]+Y]; // 位置に[x,y]を返す

最後の行で、ヌルレイヤーを基点として位置を変えられるように、整列したレイヤーにヌルレイヤーの位置を足しています。

完成

これらを繋ぐとエクスプレッション完成です。シェイプレイヤーの「位置」に入れるエクスプレッションは、下記の通りです。

cLyr=thisComp.layer("ctrlヌル");
ind=cLyr.index-index-1;
xNum=cLyr.effect("n個で改行")(1);
zureX=ind%xNum;
zureY=Math.floor(ind/xNum);
X=cLyr.effect("ズレX")(1)*zureX;
Y=cLyr.effect("ズレY")(1)*zureY;
[cLyr.position[0]+X,cLyr.position[1]+Y];

後は整列させたいシェイプレイヤーを沢山複製するなり、コントローラーヌルのエフェクトで折り返す個数やx,yのズレを変えてみて、確認して完成です。

これをスクリプト化した記事「グリッド上に均等配置するスクリプト「posGridAlign.jsx」」も公開しています。

自動スケール適用後に拡大か縮小か切り替えられるスクリプト「[tgl]@scaleAnimator.jsx」前のページ

グリッド上に均等配置するスクリプト「posGridAlign.jsx」次のページ

ピックアップ記事

  1. なぜ?After Effectsのレイヤーをエクスプレッションで効率化
  2. フリーランスの開業届提出は開業freeeでとにかく簡単に
  3. なぜ?After Effectsの操作を「スクリプト」で効率化

関連記事

  1. エクスプレッション

    オーディオのフェードイン・アウトをエクスプレッションで自動化する

    オーディオレイヤーの音量のフェードイン・フェードアウトをエクスプレッシ…

  2. エクスプレッション

    2つのレイヤー間に均等配置させるエクスプレッション

    2つのレイヤーを「root」と「goal」として、その間に挟まれたレイ…

  3. エクスプレッション

    レイヤーを自動で拡大・縮小させるエクスプレッション

    選択レイヤーのインポイントからアウトポイントにかけて、指定した%サイズ…

  4. エクスプレッション

    3Dレイヤーの裏面を非表示にするエクスプレッション

    カードを3Dレイヤーを表裏に貼り付けて表現する場合、サイズがまったく…

  5. エクスプレッション

    オートコンプリートでエクスプレッションを簡単適用

    プロパティのストップウォッチアイコンをキーを押しながらクリックで開く…

  6. エクスプレッション

    なぜ?After Effectsのレイヤーをエクスプレッションで効率化

    「なにかの動きに連動する」アニメーションを作るには、キーフレームで頑張…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA