我真的需要幫助來弄清楚如何使用我在這個有用的網站上找到的這些緩解功能:https://spicyyoghurt.com/tools/easing-functions

我知道函數需要的值意味著什么，我在我的一個類中創建了一個函數，它幫助我獲得當前時間(t ),然后將它傳遞給函數:

getEaseTimeVar()
{
    var timeStamp = performance.now();
    this.#secondsPassed = (timeStamp - this.#oldTimeStamp) / 1000;
    this.#oldTimeStamp = timeStamp;

    return timeStamp;
}

(解釋) 這個函數有效，但是只有在代碼執行開始時調用它。例如，如果我想使用線性緩動函數淡入一些東西(值從0到1)并在代碼執行開始時調用它，它會增加，甚至超過1，這很好，很正常。然而，如果我想做同樣的事情，但我想讓它在代碼執行后5秒開始，它不會從0開始，而是跳到一個更大的值。

(問題) 這是因為我認為我沒有得到動畫開始的時間，而是從所有代碼執行的開始，我正在努力理解如何在保持一個簡單的函數來使用動畫的同時做到這一點。

提前感謝你的幫助。

# # #您需要跟蹤動畫開始時間。

然后使用當前時間與開始時間(動畫時間)之差。

僅在動畫時間介于0和動畫持續時間之間時動畫。

例子

// From https://spicyyoghurt.com/tools/easing-functions
const easeLinear = (t, b, c, d) => c * t / d + b;
const easeInOutQuad = (t, b, c, d) => (t /= d * 0.5) < 1 ? c * 0.5 * t * t + b : -c * 0.5 * ((t - 1) * (t - 3) - 1) + b;

var animating = false;
var startTime;
const animDuration = 2000; // ms
const ctx = canvas.getContext("2d");

canvas.addEventListener("click",() => {
    startTime = performance.now(); 
    !animating && requestAnimationFrame(mainLoop); 
});

function mainLoop(time) {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     if (startTime) {
         var animTime = time - startTime;
         // or var animTime = performance.now() - startTime

         const x = easeLinear(animTime, -20, canvas.width + 40, animDuration);
         const y = easeInOutQuad(animTime, 20, canvas.height - 40, animDuration);         
         ctx.beginPath();
         ctx.arc(x, y, 20, 0, Math.PI * 2);
         ctx.fill();
         if (animTime < animDuration) {
             requestAnimationFrame(mainLoop);
             animating = true;
         } else {
             animating = false;
         }
     }

}

canvas { border: 1px solid black; }

Click canvas to start / restart animation.<br>
<canvas id="canvas" width="500" height="200"></canvas>