wiggle｜キーフレームなしで揺らすAEエクスプレッションと速さ・揺れ幅の調整

文字や図形を、キーフレームなしで自然に揺らしたい。そんなときに使えるのがwiggleです。位置ならランダムな移動、回転なら小さな傾きを加えられます。

AEエクスプレッション集の第3弾は、速さと揺れ幅の調整から、上下に浮くカード、少し傾きながら揺れるタイトルまで。1行のコードから順に試してみましょう。

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

まずは完成形：静止した丸に揺れを加える

丸の元の位置は動かしていません。右側だけに wiggle(2, 40) を入れると、基準の位置を中心に不規則に揺れます。キーフレームは0個のままです。

コピーして使える基本コード

wiggle(2, 40);

位置のストップウォッチを、MacはOption、WindowsはAltを押しながらクリック。開いた式の入力欄に、この1行を貼り付けます。上のコードはテキストなので、選択してコピーできます。

数値	役割	基本値
1つ目：freq	揺れの速さ。1秒あたりの変動の頻度	2
2つ目：amp	揺れの大きさ。単位は適用先のプロパティによる	40

freq=2は、メトロノームのように正確な2往復をする指定ではありません。規則的な往復ではなく、ランダムに変わる動きの速さを決めます。

位置のampはピクセル、回転なら度、スケールならパーセントポイントが目安になります。ampは厳密な最大移動距離ではありません。「必ず±40pxに収まる」と考えず、実際に再生して余白を確かめてください。

使う場所と基本の再現手順

項目	今回の条件
制作環境	After Effects 26.5（26.5×89）／macOS／JavaScriptエクスプレッションエンジン
コンポジション	1280×720／30fps／6秒／8bpc
基本例	直径96pxの丸。右側の元の位置［900, 430］
キー	位置・回転ともキーフレームなし
素材・フォント	AE内の図形と文字。Hiragino Sans W6／Arial Bold。追加プラグイン・外部素材なし

1. 1280×720・30fps・6秒のコンポジションを作り、直径96pxの丸を置きます。
2. 2D位置を［900, 430］にし、ストップウォッチにはキーを打たないままにします。
3. 位置のストップウォッチをOption／Alt＋クリックします。
4. 入力欄に wiggle(2, 40); を貼り付けます。
5. 再生して、元の位置の周囲で揺れることを確認します。
6. 速さを変えたいときは2を、揺れ幅を変えたいときは40を変更します。

エフェクトメニューから追加する機能ではありません。揺らしたいプロパティに直接式を入れます。元の位置そのものを変えると、揺れの中心も移動します。

揺れ幅を変える：ampだけを調整する

まずは速さを2に固定し、ampを10・40・80へ変えてみます。小さな揺れなら10、変化を見やすくするなら40、大きく動かしたいなら80が試し始める値です。

この図は丸の空間的な移動経路ではなく、時間に対してY位置がどれだけ変わったかを示しています。amp=80の線が80pxを超える場面もあるので、画面外へはみ出せない素材では余白に注意してください。

速さを変える：freqだけを調整する

今度はampを40に固定し、freqを0.5・2・5で比べます。0.5ならゆっくり漂い、5なら短い時間に細かな変化が増えます。

比較画像の形を揃えるため、制作時は同じレイヤーに seedRandom(7, true); を入れてから各条件を採取しました。通常の使い方では、まず基本の1行だけで構いません。別のレイヤーへコピーすると、同じ数値でも揺れ方は変わることがあります。

実践1：カードを上下だけに浮かせる

var w = wiggle(0.7, 24);
[value[0], w[1]];

設定	値
対象	02_FLOATING_CARD内のWIGGLE_Y_CARD／2D位置
元の位置	［640, 392］
freq／amp	0.7／24px
キー	なし
軸	Xは元の値、Yだけwiggleの値を使用

背景・文字・アクセント線を640×230のプリコンポジションにまとめ、親コンポジションで位置に上のコードを入れます。value[0]は元のX、w[1]はwiggleで変化したYです。

基本例から変えるのは、速さ・揺れ幅と、Yだけを取り出す点。横に流れず、配置を保ちながら浮くような動きになります。このコードは次元を分割していない2D位置用です。

実践2：タイトルを少し傾きながら揺らす

wiggle(2, 3);

設定	値
対象	03_ROTATING_TITLE内のWIGGLE_ROTATION／回転
元の回転	0度
freq／amp	2／3度
アンカーポイント	文字の見た目の中心
キー	なし

基本例の丸を文字に変え、位置ではなく回転へ貼り付けます。アンカーポイントを文字の中心に置いてから、ampを40から3へ下げてください。回転のamp=3はピクセルではなく度です。

読ませたい文字は揺らしすぎないのがコツです。さらに控えめにするなら、まずampを1程度へ下げます。アンカーポイントが文字から離れていると、大きく振り回される見え方になります。

動かない・揺れすぎるときの確認

症状	確認すること
動かない	式が有効か、再生して時刻が進んでいるか、freqやampが0になっていないかを確認。キーは不要です。
元の位置から大きくずれる	ampを下げます。位置・回転など、適用先で単位が違うことにも注意。
揺れを止めたい	ampを0にするか、式を無効にします。freq=0は基準位置へ戻すための指定ではありません。
valueを足したらずれた	wiggleは元の値を含む結果を返します。基本例で value + wiggle(2, 40) とすると、元の値を二重に足してしまいます。
別のレイヤーと揺れが揃わない	同じ数値でもレイヤーごとにランダムな結果が異なる場合があります。完全に揃えるなら、1つの揺れるヌルなどを共有する方法を検討します。
ループのつなぎ目が合わない	wiggleはそのままでは一定周期の完全ループになりません。同じ動きの反復にはloopOutなど別の方法を使います。
3Dや次元分割した位置でエラーになる	上下だけのコードは2D位置用です。3DならZも返し、次元分割したY位置なら数値1つを返す必要があります。

基本仕様とYだけを変動させる考え方はAdobeのエクスプレッション言語リファレンスでも確認できます。まずはfreqで速さ、ampで大きさを決め、必要な軸やプロパティへ絞ってみてください。

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

基本の位置揺れ、上下だけのカード、回転するタイトルと、amp・freqの静止比較グラフを収録。グラフは採取した値で描いた静止パスのため、COMPARE_SOURCEの設定を変更しても自動では更新されません。3つの作例の式は自由に編集して再生できます。

項目	内容
版・容量	v1.0／79,316バイト（約77KiB）
内容	編集可能なAEP、expressions.txt、はじめに.txt
制作環境	After Effects 26.5×89／JavaScriptエクスプレッションエンジン
フォント	Hiragino Sans W6／Arial Bold。フォント本体は同梱していません。
利用条件	学習・個人制作で利用と改変可。商用利用は個別相談。

商用利用はお問い合わせページからご相談ください。

止まったあとだけに揺れを加えたいときは、慣性バウンスの使い方もどうぞ。ほかのコードはAEエクスプレッション集から探せます。