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

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);
        }
    }
}

コピー