スケール拡大で出現してフワフワして縮小で消えるインフォグラフィックスで便利なエクスプレッションの使い方


Adobe After Effects
知ってるとちょっと嬉しいエクスプレッション

インフォグラフィックス演出でよく使う、レイヤーがスケール0の状態から120→100でボヨンと出現し、出現後はフワフワとループしてl最後はスケールが0になって消えるアニメーション。これを自動で行うエクスプレッションです。イン点での拡大とアウト点での縮小も自動なので、タイミング調整が一瞬で行えます。




このエクスプレッションの使い方
スケールに下記エクスプレッションを適用

n = 0.7; // イン、ループ、アウトのアニメーション時間(0.7秒)
t_in = inPoint + n; // イン点の終了時間
t_out = outPoint - 0.5; // アウト点の開始時間(アウトアニメーションは0.5秒)

// イーズ関数の設定
easeIn = function (t, tMin, tMax, startValue, endValue) {
    return ease(t, tMin, tMax, startValue, endValue);
};

// インのアニメーション(0 -> 120 -> 90)
if (time < t_in) {
    if (time <= inPoint + n / 2) { value = easeIn(time, inPoint, inPoint + n / 2, [0, 0], [120, 120]); // 0 -> 120
    } else {
        value = easeIn(time, inPoint + n / 2, t_in, [120, 120], [90, 90]); // 120 -> 90
    }
}
// ループとアウトのアニメーション(90 -> 100 -> 90 -> 0)
else {
    loopTime = 0.7; // ループの時間(0.7秒)
    loopProgress = (time - t_in) % loopTime;
    scaleAt90 = [90, 90];
    scaleAt100 = [100, 100];

    // アウト点に近づいたらアウトアニメーション(スケール -> 0)
    if (time >= t_out) {
        scaleAtOutStart = easeIn(loopProgress, 0, loopTime / 2, scaleAt90, scaleAt100); // 現在のスケール値を取得
        value = easeIn(time, t_out, outPoint, scaleAtOutStart, [0, 0]); // 現在のスケール -> 0
    }
    // ループアニメーション(90 -> 100 -> 90)
    else {
        if (loopProgress < loopTime / 2) {
            value = easeIn(loopProgress, 0, loopTime / 2, scaleAt90, scaleAt100);
        } else {
            value = easeIn(loopProgress, loopTime / 2, loopTime, scaleAt100, scaleAt90);
        }
    }
}

1. インアニメーションの仕組み
コードの解説:
n = 0.7; の部分で、イン・アウトのアニメーションにかかる時間を定義しています(0.7秒)。
t_in では、インアニメーションが終了する時間を、t_out ではアウトアニメーションが始まる時間を設定しています。
インアニメーションは、スケールが「0 -> 120 -> 90」と変化します。最初は急激にスケールが大きくなり、次に少し縮小して安定します。これは、オブジェクトの存在感を強調したい場合に有効です。

2. ループアニメーションの動き
loopTime = 0.7; で、ループの周期を0.7秒に設定し、loopProgress を使って時間経過を追跡し、スケールを制御します。
ループアニメーションでは、スケールが「90 -> 100 -> 90」と周期的に変化します。このループにより、オブジェクトが息づいているかのような効果を作り出せます。

3. アウトアニメーションの仕組み
アウトアニメーションは、time >= t_out という条件で動作します。ループアニメーションの最後のスケール値を使い、最終的に「0」へとスムーズにフェードアウトします。
最後は自然に消えていく動きを作り、アニメーション全体に一貫性とエレガンスを加えます。

4
. イーズ関数の詳細
easeIn 関数の解説:
イーズ関数は、スケールの変化を滑らかにするために使用されます。標準のイーズ関数を活用しつつ、開始値から終了値までの変化を調整します。
このカスタムイーズを使うことで、通常のキーフレームよりも柔軟な制御が可能です。












 


PAGE TOP