Amazonで商品を見るセール会場へ

After Effects│弾む動き(オーバーシュート・慣性)を付けるエクスプレッション

キーフレームで止まった瞬間に、少し行き過ぎてから戻る動きを付けると、動きに勢いが出ます。

キーフレームを増やさなくても、エクスプレッションで自動的に付けられます。

  • 使う場所:位置・拡大・縮小・回転など、キーフレームで動かしているプロパティ
  • 揺れの大きさ(amp)・揺れの速さ(freq)・収まる速さ(decay)の3つで調整する
  • 最後のキーフレームの直前の速さが大きいほど、大きく弾む
  • キーフレームのあいだの動きはそのまま

この記事の式は、Adobe公式の「Expression language reference」にある関数(numKeys・nearestKey・velocityAtTime など、2026年10月3日に公式資料を確認)で組み立てたものです。

値の変化は Node.js で計算して確かめ、2026年10月13日に After Effects の画面でも、弾んで収まる動きを確認しました。

2026年10月15日には、Windows 11 Pro (10.0.26200)のAfter Effects 26.5.0(Build 89、日本語表示)で、キーの数や位置の次元を変えたときに、式をかけた値がどうなるかも確かめました。

目次

式

弾ませたいプロパティのストップウォッチを Alt(Macは Option)を押しながらクリックし、次の式を書きます。

var amp = 0.06;
var freq = 3.0;
var decay = 5.0;
var n = 0;
if (numKeys > 0) {
  n = nearestKey(time).index;
  if (key(n).time > time) n--;
}
var result = value;
if (numKeys >= 2 && n == numKeys) {
  var t = time - key(n).time;
  var v = velocityAtTime(key(n).time - thisComp.frameDuration / 10);
  var amount = amp * Math.sin(freq * t * 2 * Math.PI) / Math.exp(decay * t);
  result = add(value, mul(v, amount));
}
result;

式の中でやっていること

  1. いまより前で、いちばん近いキーフレームの番号(n)を探す
  2. そのキーフレームを過ぎてからの時間(t)を求める
  3. キーフレームに着く直前の速さ(v)を取る
  4. 最後のキー以降だけ、速さに合わせた揺れ(sin)を時間とともに小さく(exp)して、元の値に足す

キーが0個または1個のときと、最後のキーより前は元の値を返します。最後のキー以降だけに揺れを足すので、途中のキー間は変えません。add と mul はAEのベクトル演算です。数値だけでなく、位置の2値・3値にも同じ式を使えます。

位置のエクスプレッションに、弾む式を入れた画面です。

上の青い四角はキーフレームのみ、下のオレンジの四角はエクスプレッションを入れたもので、1:03の時点で、オレンジの四角が終点(750)を越えて右に出ていました。

After Effectsで位置の弾む式と終点を越えたオレンジの四角を表示した画面
2026-10-13撮影。Adobe After Effects 26.5、Windows 11 Pro (10.0.26200)。実機画面、原寸保存。

2:00の時点では、2つの四角が画面上で同じ位置に見えました。これはその時点の表示であり、以後の揺れを完全に停止する処理を式に入れているわけではありません。

After Effectsの2秒時点で弾む動きが終了して比較用の四角と位置がそろった結果
2026-10-13撮影。Adobe After Effects 26.5、Windows 11 Pro (10.0.26200)。実機画面、原寸保存。
スポンサーリンク

値の変化を確かめる

0.5秒で0から100まで直線で動かしたプロパティに、上の式をかけた場合を計算しました。

最後のキーフレームに着く直前の速さは、1秒あたり200です。

キーフレームからの時間値
0秒100.0
0.05秒107.6
0.083秒107.9(最初の山付近)
0.167秒100.0
0.25秒96.6(少し戻りすぎる)
0.333秒100.0
0.75秒100.3
1秒100.0
amp 0.06・freq 3・decay 5 で計算した値

100で止まるはずの値が、一度約108まで行き過ぎ、約97まで戻ってから、揺れが小さくなっています。指数関数による減衰なので、1秒後に揺れを完全に切る式ではありません。表で100.0になる時刻のあとにも、小さな揺れは続きます。

After Effectsで確かめた値(2026年10月15日)

2026年10月15日に、Windows 11 Pro (10.0.26200)のAfter Effects 26.5.0(Build 89、日本語表示)で、同じ条件の値を確かめました。

エクスプレッションのエンジンはJavaScriptで、800×600・30fps・2秒のコンポジションを使いました。

スライダー制御に、0秒で0、0.5秒で100の直線キーを置き、上の式をこのページからそのまま設定しました。

式の設定と値の読み出しはスクリプトで行ったため、式を手で入力する操作は、この確認に含めていません。

キーフレームからの時間が0.05秒(0.55秒の時点)で107.56、0.083秒で107.91、0.25秒で96.56、0.75秒で100.28になり、上の表の値と一致しました。

最後のキーの時刻とそれ以降の、あわせて10の時刻で、計算した値との差は0.0000001以内でした。

最後のキー(0.5秒)までは、元の直線の値(0.25秒で50、0.5秒で100)のままでした。

キーが0個と1個のスライダー(値42)にも同じ式を入れると、確かめた14の時刻すべてで42のままでした。

画面でも、0秒18フレーム(0.6秒)の時点の値を確かめました。

After Effectsのエフェクトコントロールで、0秒18フレームの時点にNoKeysとOneKeyが42.00、Table0to100が106.92、PreviousKeyElapsedが0.35と表示された画面
2026-10-15撮影。Adobe After Effects 26.5.0 (Build 89)、Windows 11 Pro (10.0.26200)。0秒18フレーム(0.6秒)の時点の実機画面。キーが0個と1個のスライダー(NoKeys・OneKey)は42.00のまま、0から100の直線キーに弾む式をかけたスライダー(Table0to100)は106.92、previousKeyの経過秒の式(PreviousKeyElapsed)は0.35(ウィンドウのタイトルバーのみ切り取り)。

3つの数値の調整

数値大きくすると小さくすると
amp(揺れの大きさ)大きく行き過ぎる控えめになる
freq(揺れの速さ)小刻みに揺れるゆったり揺れる
decay(収まる速さ)速く減衰する長く揺れ続ける

まずは amp だけを変えて、行き過ぎる量を決めます。表はampが0以上、freqとdecayが正の値の場合の目安です。decayが0では揺れの振幅は減らず、負の値では時間とともに増えます。

揺れの大きさは、キーフレームに着く直前の速さに比例します。

この式はキーより少し前の速度を取ります。イージーイーズで直前の速度が小さくなると揺れも小さくなるので、練習では最後のキーフレームを直線にします。

新しい版の書き方(previousKey)

今の公式リファレンスには、「その時間かそれより前のキーフレーム」を返す previousKey(time) があります。

次の式はキーからの経過秒を返す独立した説明用の式です。上の弾む式の代わりにはなりません。数値プロパティに単独で使い、previousKey が未定義になる版では使わず、上の nearestKey 版を使います。

// 現在の公式リファレンスの例。結果を数値で返す。
var elapsed = 0;
if (numKeys > 0) {
  var k = thisProperty.previousKey(time);
  if (k.time <= time) elapsed = time - k.time;
}
elapsed;

公式リファレンスの説明では、最初のキーフレームより前の時間では、previousKey(time) は最初のキーフレームを返します。

そのとき(k.time > time のとき)、上の式は elapsed の初期値の0を返します。

プロパティの元の値ではなく、0になる点に注意してください。

2026年10月15日に、0.25秒に値10、0.75秒に値20のキーを置いたスライダーへ、この式だけを設定して確かめました。

0秒では元の値の10ではなく0を返し、0.25秒で0、0.5秒で0.25、0.75秒で0、1秒で0.25を返しました。

経過秒を返す式なので、最初のキーより前は0として扱ってください。

古い版でも動かしたいときは、上の nearestKey を使う書き方にしておくと安全です。

うまくいかないとき

  • 弾まない:最後のキーフレームがイージーイーズになっていないか、動きの速さが0でないかを見る
  • 揺れすぎる:amp を小さくするか、decay を大きくする
  • 位置でエラーになる:位置を「次元に分割」している場合は、弾ませる軸のX位置・Y位置・Z位置に個別に式を書く

最後の勢いのまま動かし続けたいときは、After EffectsのloopOutの使い方で紹介している continue も使えます。

最後のキーだけを弾ませる練習

練習用の2Dレイヤーを複製し、位置に0秒で [0, 0]、0.5秒で [100, 0] の直線キーを置きます。

式は位置に貼り、キー間と最後のキー以降を分けて見ます。

表の値は、一定速度200を入力したローカル計算です。

2026年10月15日に、After Effectsで同じ形のキー(0.5秒でXが100進む直線キー)を2Dと3Dのレイヤーの位置に置き、上の式をかけた値も確かめました。

どちらも、最後のキーの時刻までは元の補間値のままで、動かしていないYとZの値も変わりませんでした。

キー0個・1個の行は、数値のスライダーで確かめた結果です。

練習入力期待する値確認する範囲
キー0個・1個元の値揺れを足さない
0.25秒[50, 0]途中は元の補間値
0.5秒[100, 0]最後のキーの時刻
0.55秒約 [107.6, 0]停止後に行き過ぎる

位置を次元に分割している場合は、弾ませる軸に2個以上のキーと式を設定します。

2026年10月15日に、位置に0秒で[100, 380]、0.5秒で[200, 380]の直線キーを置いたレイヤーで確かめました。

位置を右クリックして「次元に分割」を選ぶ操作は画面で行い、分かれたX位置・Y位置のそれぞれに上の式を設定しました(キーと式の設定はスクリプト)。

0秒18フレーム(0.6秒)の時点で、X位置は206.9(始点から106.9進んだ位置)、動かしていないY位置は380のままで、式のエラーは出ませんでした。

After Effectsで次元に分割した位置のX位置に弾む式を表示し、0秒18フレームでX位置206.9、Y位置380.0と表示された画面
2026-10-15撮影。Adobe After Effects 26.5.0 (Build 89)、Windows 11 Pro (10.0.26200)。位置を「次元に分割」し、X位置とY位置に弾む式を設定したレイヤー(SeparateDimensions)の、0秒18フレーム(0.6秒)の実機画面。X位置は206.9、Y位置は380.0。式の欄にはX位置の式を表示(ウィンドウのタイトルバーのみ切り取り)。

イージーイーズなどでキー直前の速度が小さいと揺れも小さくなります。

必ず0になるとは限りません。

キーの前後の速度を0、影響を33.333%にした例(キーの速度はスクリプトで設定し、F9のイージーイーズ操作は確認に含めていない)では、0.6秒の時点の行き過ぎは約0.32でした。

直線キーの約6.92より小さくなりましたが、0ではありませんでした。

揺れを外すときは式を無効にし、残した2キーの動きと比較します。

練習用エクスプレッション6本をダウンロードできます。

READMEの貼付先を確認し、1つずつ練習用プロパティに使います。

ZIPの6本のファイルそのものをAfter Effectsで読み込む確認はしていません。

スポンサーリンク

まとめ

  • キーフレームのあとに、行き過ぎて戻る動きを式で足せる
  • amp・freq・decay の3つで、大きさ・速さ・収まり方を決める
  • 練習は直線キーで行う。キー直前の速度が小さいと揺れも小さくなる
  • previousKeyの例は経過秒を返す説明用。弾む式はnearestKey版を使う

参考:Adobe「Expression language reference」(2026年10月3日に公式資料を確認)。

よくある質問:After Effectsで弾む動きを式で付けるとき

キーフレームを増やさずに、弾む動きを付けられますか?

付けられます。キーフレームで止まった瞬間に、少し行き過ぎてから戻る動きを、エクスプレッションで自動的に付けられます。位置・拡大・縮小・回転など、キーフレームで動かしているプロパティに使えます。

式は、どうやって入れますか?

弾ませたいプロパティのストップウォッチを Alt(Macは Option)を押しながらクリックし、記事の式を書きます。

揺れの大きさや速さは、どう調整しますか?

ampが揺れの大きさ、freqが揺れの速さ、decayが収まる速さで、この3つで調整します。揺れすぎる場合は、ampを小さくするか、decayを大きくします。

弾まないときは、何を確認しますか?

最後のキーフレームがイージーイーズになっていないか、動きの速さが0でないかを見ます。最後のキーフレームの直前の速さが大きいほど大きく弾み、イージーイーズなどでキー直前の速度が小さいと揺れも小さくなります。

位置でエラーになるのはなぜですか?

位置を「次元に分割」している場合は、弾ませる軸(X位置・Y位置・3DのZ位置)に2個以上のキーと式を設定します。

キーフレームのあいだの動きにも影響しますか?

影響しません。最後のキー以降だけに揺れを足すので、途中のキー間の動きはそのままです。キーが0個または1個のときと、最後のキーより前は元の値を返します。

最後の勢いのまま動かし続けたいときは?

loopOutの使い方で紹介しているcontinueも使えるとしています。弾ませる式とは別の機能です。

この記事の式は、実機で確認済みですか?

この記事の式は、Adobe公式の「Expression language reference」にある関数(2026年10月3日に公式資料を確認)で組み立て、値の変化をNode.jsで計算したものです。

2026年10月13日に、After Effects 26.5の画面で、2Dの位置が弾んで収まる動きを確認しました。

2026年10月15日には、Windows 11 Pro (10.0.26200)のAfter Effects 26.5.0(Build 89、日本語表示)で、キーが0個・1個のとき、0から100の直線キー、2Dと3Dの位置、次元に分割した位置、previousKeyの例について、式をかけた値を確かめました。

ほかの版、Mac、旧エンジン(Legacy ExtendScript)、動く親やカメラ、拡大・縮小や回転への適用、書き出した動画は確認していません。

実際の案件では、練習用のプロパティで動作を確認してから使ってください。

次に学ぶ・作業環境を選ぶ

学習を続けたい方や、作業環境を整えたい方は、目的に合うガイドをご覧ください。

After Effectsのおすすめ書籍

必要なPCスペック

周辺機器の優先度

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次