length()｜近づくと大きくなる、ドット背景を作る

色付きの丸が通ると、その周辺のドットだけが大きく、明るくなる。length()で2点間の距離を測り、距離に応じてスケールを変えると、1つのシェイプで周囲の図形を反応させられます。

今回は、丸が近づくと膨らむ基本形から、タイトルの後ろに使えるドット背景、カーソルに反応するカードメニュー風の動画へ進みます。動かす対象は、画面に見える丸やカーソルです。ヌルを使わず、何に反応しているか分かる作例にします。

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

まずは完成形：丸が近づくと、ドットが大きくなる

位置のキーフレームを付けるのは、コーラル色の丸だけ。反応する側のドットにはスケールのキーを付けません。複製しても同じ丸を参照するため、丸の動きを変えるだけで反応がまとめて変わります。

length()は距離を測る。大きさへの変換はease()

コード	役割
length(a, b)	2つの位置a・bの距離を数値で返す
ease(d, 0, radius, near, far)	距離0でnear、半径radius以上でfar。その間をなめらかに補間
value * factor / 100	スケールの元値に、求めた倍率を掛ける

length()だけで大きくなるわけではありません。距離を測る → 距離を倍率に変換する → スケールへ反映する、という組み合わせです。ここでのeaseは時間ではなく距離を入力するので、範囲の中心と外側で変化がなめらかになります。

準備：見える丸に3つのスライダーを付ける

項目	今回の設定
環境	After Effects 26.5×89／JavaScriptエクスプレッションエンジン／8bpc
コンポジション	1280×720／30fps／6秒
INFLUENCER	コーラル色の丸、直径28px。図形中心＝レイヤーのアンカーポイント
DOT	青緑の丸、直径40px。位置［640, 360］、スケール元値100％
スライダー制御	INFLUENCERにRadius＝240、Near＝300、Far＝100
共通条件	同じコンポ内の2Dレイヤー／親なし／位置の次元分割なし

1. 楕円ツールで丸を作り、レイヤー名をINFLUENCERにします。塗りをコーラル色にして、レイヤーのアンカーポイントを丸の中心に揃えます。
2. INFLUENCERを選び、「エフェクト」→「エクスプレッション制御」→「スライダー制御」を3つ追加します。
3. エフェクト名をそれぞれRadius・Near・Farに変更し、240・300・100を入力します。
4. 別のシェイプレイヤーに青緑の丸を作り、DOTと命名。丸の中心とアンカーポイントを揃え、レイヤーの位置を［640, 360］へ設定します。
5. DOTのレイヤー全体の「スケール」のストップウォッチをOption／Alt＋クリックし、次のコードを貼り付けます。

楕円パスのサイズで丸の直径を作り、レイヤー全体のスケールは100％から始めます。シェイプグループ内のスケールへ式を貼らないでください。レイヤー名とスライダーのエフェクト名は大文字・小文字を含め、コードと揃えます。

コピー用コード1：近づくほどスケールを大きくする

var target = thisComp.layer("INFLUENCER");
var radius = Math.max(1, target.effect("Radius")(1));
var near = target.effect("Near")(1);
var far = target.effect("Far")(1);
var d = length(position, target.transform.position);
var factor = ease(d, 0, radius, near, far);
value * factor / 100;

positionは、式を貼ったレイヤーのアンカーポイントの位置です。相手の位置も同じコンポジションの座標として扱えるよう、今回の2レイヤーには親を設定していません。シェイプの中心がアンカーからずれると、見えている丸の中心と計算の基準がずれます。

スライダー	意味	最初に試す値
Radius	反応する範囲の半径。今回の条件ではコンポジションのpx	240
Near	距離0で掛ける倍率％	300
Far	Radius以上離れたときに掛ける倍率％	100

スケールの元値が100％なら、Near＝300で最大300％。元値を50％にすると、最大は150％になります。Nearは最終スケール値ではなく、元値へ掛ける倍率です。まずFarを100、Nearを300にすると、元の大きさから3倍までの変化が分かりやすくなります。

Radiusは0で割るような不安定な条件を避けるため、Math.max(1, ...)で最低1にしています。広い範囲を反応させたい場合はRadiusを増やします。近づくほど小さくしたいときは、NearをFarより小さくすると関係を反転できます。

丸の位置だけを動かす

1. INFLUENCERをDOTへ近づけ、DOTが大きくなることを確認します。半径240pxより外へ離すと、元の100％へ戻ります。
2. INFLUENCERの位置を0.5秒で［100, 360］、5.5秒で［1180, 360］にして、リニアのキーフレームを付けます。
3. 冒頭と末尾を止めるなら、0秒に［100, 360］、6秒に［1180, 360］も追加します。
4. DOTのスケールにはキーフレームを付けず、再生して確認します。

配布AEPの編集先はDISTANCE_BASIC_SOURCEです。説明付きの01_BASIC_DISTANCEでは、ソースを85％で配置しています。記事の設定値は、85％に縮小する前のSOURCE側の値です。

反応範囲・拡大量・変化のなめらかさを比べる

easeを使っても、動きが遅れて付いてきたり、バネのように揺れたりするわけではありません。この式は、その時点の距離からその時点の倍率を求めます。一直線の変化と比べたい場合は、コード1の ease(d, ...) だけを linear(d, ...) へ変更します。

実践1：丸の周辺だけが膨らむ、ドット背景

1. 基本のDOTを複製して、楕円の直径を16pxへ変更。スケールの元値は100％に揃え、コード1を残します。
2. DOTを横15列・縦7行、80px間隔に配置します。配布例の各位置は［80＋列×80, 120＋行×80］で、列0〜14・行0〜6です。
3. 各DOTのレイヤー全体の「不透明度」へ、次のコードを貼ります。複製前に貼っておけば、同じ式を持つドットを増やせます。
4. INFLUENCERをレイヤーの一番上に置き、丸がドットに隠れないようにします。
5. 背景を暗い紺にして再生します。Radius240・Near300・Far100を起点に、文字を置く場所に合わせて反応範囲を調整します。

コピー用コード2：近いドットを明るく見せる

var target = thisComp.layer("INFLUENCER");
var radius = Math.max(1, target.effect("Radius")(1));
var d = length(transform.position, target.transform.position);
ease(d, 0, radius, 100, 30);

距離0では不透明度100％、Radius以上離れると30％になります。色そのものや発光量を変えているのではなく、不透明度を上げることで暗い背景上のドットを明るく見せています。同じ距離を使ってサイズと不透明度を連動させるのがポイントです。

項目	設定
ドット	楕円16×16px、スケール元値100％。最大300％＝直径48px
並べ方	15列×7行／横・縦とも80px間隔
反応範囲	Radius240px
不透明度	距離0で100％／Radius以上で30％
編集先	DOT_BACKGROUND_SOURCE
説明付き動画	02_DOT_BACKGROUNDでSOURCEを85％に配置し、暗いパネルを背面に追加

SOURCE自体は透明背景です。背景素材として単体で書き出す場合は、SOURCE内の最背面へ平面を追加します。丸を表示せず模様だけにしたい場合でも、レイヤーは削除せず、不透明度を0％にすると参照を維持できます。まずは見える丸のまま、反応範囲を調整してください。

実践2：カーソルに近いカードが浮き上がるメニュー風動画

1. 文字・背景・アイコンをまとめた170×220pxのカードをプリコンポーズし、カードの中心をアンカーポイントにします。
2. カードを5つ配置します。配布例の位置は［200＋220×番号, 360］、番号は0〜4。各プリコンポレイヤーのスケール元値は100％にします。
3. 各カードのレイヤー全体のスケールへ、コード1を貼ります。カードの背景だけに貼らず、文字やアイコンも一緒に拡大します。
4. INFLUENCERをカーソル形のシェイプレイヤーへ変更します。レイヤー名と3つのスライダーは維持し、アンカーポイントをカーソルの先端へ置きます。
5. Radius＝260、Near＝130、Far＝100へ変更。INFLUENCERを最上段にして、カーソル位置を［200, 430］から［1080, 430］へ動かします。

距離を測る基準は、カードの中心とカーソルの先端です。カードの縁に触れたかどうかを判定しているわけではありません。配布例では中心との縦の距離が70pxあるため、最大倍率130％には達せず、中心の真上に重ねた場合より少し控えめな拡大になります。

Nearを300のままカードへ使うと大きくなりすぎるため、130へ下げています。複数のカードが同時に反応し、カーソルから遠いカードほど元の大きさに戻ります。最も近い1枚だけを選ぶ判定ではありません。

項目	設定
カード	170×220pxのプリコンポ5つ／横間隔220px
スライダー	Radius260／Near130／Far100
カーソル	先端アンカーの2Dシェイプ。最上段・親なし
不透明度の式	カードには使わず、スケールだけを連動
編集先	CARD_MENU_SOURCE。カードの絵柄はCARD_ART_1〜5
用途	操作説明・メニュー紹介を演出する映像。実際のクリックやマウス入力に反応するUIではありません

うまく反応しないときに確認するところ

症状	確認すること
式の参照エラー	INFLUENCER／Radius／Near／Farの名前がコードと一致するか
見た目の中心と反応がずれる	丸やカードのアンカーが中心、カーソルのアンカーが先端にあるか
一部だけが拡大する	レイヤー全体のスケールへ貼ったか。カードの文字と背景はプリコンポへまとめる
元の大きさより小さくなる	元値×倍率の関係とFarの値を確認。元値50・Far100なら最終50％
丸を近づけても変化が弱い	中心間の距離がRadius内か、NearとFarに十分な差があるか
カードが重なりすぎる	Nearを下げるか、カード間隔を広げる
親を付けると距離が合わない	positionは親の座標になるため、両者を同じ座標系へ揃える必要がある。まず親なし2Dで再現する
カーソルが隠れる	INFLUENCERを一番上へ移動
カクッと反応する	Radiusが小さすぎないか、INFLUENCERの位置キーが急に切り替わっていないか
重くなる	各レイヤーが距離を計算するため、最初は少数で試し、必要な個数へ増やす

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

基本の丸・ドット背景・カーソルとカード、3種類の比較を含む編集可能なプロジェクトです。

項目	内容
ファイル	pas-length-v1.0.zip／151.7KB／v1.0
同梱	編集可能なAEP・はじめに.txt・コピー用コード
AE	26.5×89／JavaScriptエクスプレッションエンジン
フォント	Hiragino Sans W6・Arial Bold。フォント本体は未同梱。ない場合は置換してください
素材	AE内の図形・文字のみ。外部参照・追加プラグイン不要
利用条件	学習・個人制作での利用と改変は可。商用利用は個別相談

商用利用のご相談はお問い合わせへ。ほかの作例はAEエクスプレッション集から探せます。