慣性バウンス｜コピペで使えるAEエクスプレッションと強さ・速さ・減衰の調整

慣性バウンスは、動きが止まった後に、行き過ぎて戻る小さな揺れを加える表現です。タイトルの登場や情報カードのスライドに使うと、止まり際に柔らかな余韻を作れます。

AEエクスプレッション集の第1弾は、最後のキーフレームの後だけ振動するコードです。基本の位置比較と、文字・カードへの実践例を、実際のAfter Effectsで制作しました。

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

まずは完成形：キーだけの動きと比べる

どちらも0.5秒から1.1秒へ、X位置を260から900に動かす2つのリニアキーです。上は900で停止。下は停止直前の速度を使って900を越え、左右に振れながら収まります。今回のコードは床に衝突する物理シミュレーションではなく、減衰する正弦波を重ねた表現です。

使う場所と制作環境

エフェクトメニューから追加する機能ではありません。「位置」や「スケール」のストップウォッチを、MacはOption、WindowsはAltを押しながらクリックし、開いた式の入力欄へ貼り付けます。

項目	今回の条件
確認環境	After Effects 26.5（26.5×89）／macOS／JavaScriptエクスプレッションエンジン
コンポジション	1280×720／30fps／6秒／8bpc
素材	AE内の平面と文字。追加プラグイン・外部画像・映像なし
フォント	Hiragino Sans W6／Arial Bold。未導入環境では差し替え
基本キー	0.5秒（15フレーム）→1.1秒（33フレーム）。補間はリニア

コピーして使えるコード

下のコードは画像ではなくテキストです。コメントから末尾の result; までを選択してコピーし、適用先に最初から入っている式を置き換えてください。最初は2つのリニアキーで試すと変化を確認しやすくなります。

// 最後のキーフレームの後だけ、慣性による揺れを加える
var amp = 0.08;  // 直前の速度に掛ける係数（秒相当）
var freq = 3;    // 1秒あたりの振動回数
var decay = 5;   // 減衰の強さ
var result = value;
if (numKeys >= 2) {
  var endTime = key(numKeys).time;
  if (time >= endTime) {
    var t = time - endTime;
    var dt = Math.min(thisComp.frameDuration / 10,
                      (endTime - key(numKeys - 1).time) / 2);
    var v = velocityAtTime(endTime - dt);
    result = value + v * amp * Math.sin(2 * Math.PI * freq * t)
             * Math.exp(-decay * t);
  }
}
result;

numKeysでキーの数を調べ、最後のキーの時刻を過ぎたときだけ計算します。velocityAtTime()で停止直前の速度を取り、正弦波と減衰を掛けて元のvalueへ加算します。これらのプロパティとメソッドの仕様はAdobe公式のエクスプレッション言語リファレンスで確認できます。

最後のキーより前は元の動きのままです。途中にキーを増やした場合も、揺れが始まるのは最後のキーの後だけ。キー0個・1個の場合は値をそのまま返します。

基本の再現手順：位置に適用する

1. 1280×720・30fps・6秒のコンポジションに90×90の平面を作ります。
2. 位置に、0.5秒で［260, 510］、1.1秒で［900, 510］のキーを打ちます。空間・時間とも直線的な移動で試します。
3. 2つのキーの時間補間をリニアにします。まずはイージーイーズを掛けずに確認します。
4. 位置のストップウォッチをOption／Alt＋クリックし、上のコードを貼り付けます。
5. amp=0.08、freq=3、decay=5で再生。1.1秒後に停止位置を越え、戻る動きを確認します。

3つの数値を、ひとつずつ調整する

変数	意味	基本値
amp	直前の速度に掛ける係数。大きいほど揺れが大きい	0.08
freq	1秒あたりの振動回数。大きいほど往復が速い	3
decay	減衰の強さ。大きいほど早く収まる	5

ampは「何ピクセル揺らすか」ではありません。位置ならピクセル/秒、スケールなら%/秒、回転なら度/秒の速度に掛ける、秒相当の係数です。同じampでも、短い時間で大きく移動するほど揺れが大きくなります。

比較画像はすべて、X位置320→900を0.5〜1.1秒で移動し、停止後0.1秒の1.2秒で撮影しています。縦線が900。比較対象以外はamp=0.08、freq=3、decay=5のままです。

速さは静止画1枚だけでは判断できません。freq=1.5／3／5の周期はそれぞれ約0.67秒／0.33秒／0.20秒。配布プロジェクトのCOMPARE_freqを再生すると、往復する速さの違いを確認できます。

調整はampで大きさ、freqでテンポ、decayで収まり方、の順がおすすめです。freqは正の値、decayも正の値で使ってください。decay=0では減衰せず、負の値では揺れが増えてしまいます。

実践1：タイトルを弾むように登場させる

設定	値
対象	02_TITLE_SCALE内のBOUNCE_SCALE／スケール
キー	0.5秒［0, 0］% → 1.1秒［100, 100］%／リニア
式の変更	amp=0.12、freq=3、decay=5

基本例の平面を文字に置き換え、位置ではなくスケールへ同じコードを貼ります。アンカーポイントを文字の中心に置き、XYを同じ値でキーにすると、中心から均等に拡大します。今回は中央揃えの英字タイトルに適用し、下の日本語は固定しています。

基本値から変更するのはampだけ。0.08→0.12に上げ、100%を少し越えて戻る動きを強調しました。文字の可読性を優先する場合はampを下げてください。

実践2：情報カードをすっと出して止める

設定	値
対象	04_CARD_POSITION内のBOUNCE_CARD／位置
キー	0.5秒［−400, 410］→1.1秒［640, 410］／リニア
式の変更	amp=0.035、freq=3、decay=7

文字・背景・アクセント線を720×260のプリコンポジションにまとめ、親コンポジションで位置を動かします。基本例から変えるのは移動距離とamp・decay。画面外から大きく移動する分、ampを0.035に下げ、decayを7に上げて早く収めました。カード内の文字は個別に動かす必要がありません。

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

症状	確認すること
揺れない	最後のキーの後を再生しているか。キーが2個以上あり、値に変化があるか。式が有効かを確認。
イージーイーズで弱くなる	停止直前の速度を使うため、終端速度が小さいと揺れも小さくなります。まずリニアで確認。
大きく飛び出す	キー間が短い・移動距離が長いほど直前の速度が大きくなります。ampを下げます。
揺れが長すぎる	decayを上げます。正のdecayでは数学的には徐々に0へ近づき、指定秒数で厳密に停止する式ではありません。
途中のキーで揺れない	この版は最後のキーだけが対象。連続した各キーでバウンスさせる仕様ではありません。
1フレームごとに荒れる	高いfreqでは往復を描くフレームが不足します。今回の30fpsではまず1.5〜5程度から試します。

不透明度や色など上限・下限のある値へそのまま使うと、範囲外へ行き過ぎる可能性があります。今回の適用対象は2D位置・2Dスケールと、数値確認した回転です。

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

基本比較、タイトルのスケール登場、カードのスライド登場、amp・freq・decayの比較を収録しました。各レイヤーのキーと式を編集して試せます。

項目	内容
版・容量	v1.0／83,891バイト（約82KiB）
内容	編集可能なAEP、expression.txt、はじめに.txt
確認環境	After Effects 26.5×89／JavaScriptエンジン
必要フォント	Hiragino Sans W6／Arial Bold（フォント本体の同梱なし）
利用条件	学習・個人制作での利用と改変は可。商用利用は個別相談。

商用利用の相談はお問い合わせページからお願いします。