Adobe After Effects
知ってるとちょっと嬉しいエクスプレッション
インフォグラフィックス演出でよく使う、レイヤーがスケール0の状態から120→100でボヨンと出現し、出現後はフワフワとループしてｌ最後はスケールが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