JavaScript 动画缓动函数：精确控制时间与动画流程

// 1. 缓动函数定义 (来自 https://spicyyoghurt.com/tools/easing-functions)
// easeLinear: 线性缓动
const easeLinear = (t, b, c, d) => c * t / d + b;
// easeInOutQuad: 二次方缓入缓出缓动
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;

// 2. 动画状态变量
let animating = false;
let startTime;
const animDuration = 2000; // 动画总时长 2000 毫秒

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

// 3. 监听 Canvas 点击事件，触发动画
canvas.addEventListener("click", () => {
    startTime = performance.now(); // 记录动画开始时间
    // 如果当前没有动画在进行，则启动 requestAnimationFrame 循环
    if (!animating) {
        requestAnimationFrame(mainLoop);
        animating = true; // 设置动画进行中标志
    }
});

// 4. 动画主循环函数
function mainLoop(currentTime) {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除 Canvas 内容

    if (startTime !== undefined) { // 确保 startTime 已经被设置
        // 计算动画已进行的相对时间
        const animTime = currentTime - startTime;

        // 计算圆形在X轴上的位置，使用线性缓动
        // b = -20 (起始X), c = canvas.width + 40 (总变化量), d = animDuration
        // 目标X = b + c = -20 + (canvas.width + 40) = canvas.width + 20
        const x = easeLinear(animTime, -20, canvas.width + 40, animDuration);

        // 计算圆形在Y轴上的位置，使用缓入缓出缓动
        // b = 20 (起始Y), c = canvas.height - 40 (总变化量), d = animDuration
        // 目标Y = b + c = 20 + (canvas.height - 40) = canvas.height - 20
        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);
        } else {
            // 动画完成，重置 animating 标志
            animating = false;
            // 可选：将动画元素设置为最终状态，避免因浮点误差导致位置不精确
            // ctx.clearRect(0, 0, canvas.width, canvas.height);
            // ctx.beginPath();
            // ctx.arc(easeLinear(animDuration, -20, canvas.width + 40, animDuration), 
            //         easeInOutQuad(animDuration, 20, canvas.height - 40, animDuration), 
            //         20, 0, Math.PI * 2);
            // ctx.fill();
        }
    }
}

<!-- HTML 结构 -->
<style>
    canvas { border: 1px solid black; }
</style>
<div>点击 Canvas 区域来开始 / 重启动画。</div>
<canvas id="canvas" width="500" height="200"></canvas>