正确掌握JavaScript缓动函数：时间参数的精确管理与应用

<style>
    canvas { border: 1px solid black; }
</style>
<p>点击画布开始/重新开始动画。</p>
<canvas id="canvas" width="500" height="200"></canvas>

// 常用缓动函数示例 (来源: 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;

let animating = false;    // 动画状态标志，防止重复启动
let startTime;            // 动画开始时间戳
const animDuration = 2000; // 动画持续时间，单位毫秒

// 获取canvas元素及其2D渲染上下文
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 为canvas添加点击事件监听器，用于启动动画
canvas.addEventListener("click", () => {
    startTime = performance.now(); // 记录当前时间作为动画的起始时间
    // 如果当前没有动画在进行，则启动新的动画帧循环
    if (!animating) {
        requestAnimationFrame(mainLoop);
        animating = true; // 设置动画状态为进行中
    }
});

/**
 * 主动画循环函数，由requestAnimationFrame调用
 * @param {DOMHighResTimeStamp} time 当前帧的时间戳
 */
function mainLoop(time) {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布，准备绘制新一帧

    if (startTime !== undefined) { // 确保startTime已被设置，即动画已启动
        // 计算动画已进行的时间 (t参数)
        const animTime = time - startTime; 

        // 使用缓动函数计算当前帧的x和y坐标
        // x轴使用线性缓动：从-20到canvas.width + 40
        const x = easeLinear(animTime, -20, canvas.width + 40, animDuration);
        // y轴使用四次方缓入缓出缓动：从20到canvas.height - 40
        const y = easeInOutQuad(animTime, 20, canvas.height - 40, animDuration);

        // 绘制圆形
        ctx.beginPath();
        ctx.arc(x, y, 20, 0, Math.PI * 2);
        ctx.fill();

        // 如果动画尚未结束 (即animTime小于总持续时间)，则请求下一帧
        if (animTime < animDuration) {
            requestAnimationFrame(mainLoop);
        } else {
            // 动画结束，重置状态
            animating = false;
            startTime = undefined; // 清除startTime，为下次动画做准备
        }
    }
}