如何实现HTML5 Canvas平滑缩放动画 解决缩放跳变问题

问题原因 #

你当前的缩放逻辑用同步for循环连续修改缩放值、调用更新函数，但JavaScript是单线程执行的，同步循环会在一帧内把所有缩放计算全部跑完，浏览器只会在所有同步代码执行完成后才触发一次画布重绘，所以你看不到任何过渡过程，直接跳转到最终缩放状态。

修复方案 #

用requestAnimationFrame做逐帧动画调度，每帧只更新一次缩放值、重绘画布，保证每一步变化都能被浏览器渲染出来，还可以加缓动函数让动画更自然。

let scaleAmount = 1.00;
// 动画配置
const ZOOM_STEP = 0.1; // 每次缩放总幅度
const ANIMATION_DURATION = 300; // 动画时长，单位毫秒
let isAnimating = false; // 防止重复触发动画

function scaleUpdate() {
    const scaleSize = document.getElementById("scaleSize");
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.scale(scaleAmount, scaleAmount);
    
    scaleSize.innerText = parseInt(parseFloat(scaleAmount.toFixed(2))*100)+"%";
    stageUpdate();  
}

function scale(direction) {
    // 正在执行缩放动画时直接返回，避免多动画冲突
    if (isAnimating) return;
    isAnimating = true;

    const startScale = scaleAmount;
    // 计算目标缩放值，限制最小/最大缩放范围避免越界
    const targetScale = direction === "zoomIn" 
        ? Math.min(startScale + ZOOM_STEP, 3) // 最大300%缩放，可自行调整
        : Math.max(startScale - ZOOM_STEP, 0.3); // 最小30%缩放，可自行调整
    const startTime = performance.now();
    let lastOffset = 0;

    function animateFrame(currentTime) {
        const elapsed = currentTime - startTime;
        const progress = Math.min(elapsed / ANIMATION_DURATION, 1);
        // easeOutQuad缓动：初期变化快、临近结束变慢，手感更自然，不需要可直接用progress做线性动画
        const easeProgress = 1 - (1 - progress) * (1 - progress);
        
        // 更新当前缩放值
        scaleAmount = startScale + (targetScale - startScale) * easeProgress;
        // 按进度同步更新偏移量
        const currentOffset = (targetScale - startScale) * easeProgress - lastOffset;
        dx += direction === "zoomIn" ? currentOffset : -currentOffset;
        dy += direction === "zoomIn" ? currentOffset : -currentOffset;
        lastOffset += currentOffset;

        scaleUpdate();

        if (progress < 1) {
            // 动画未结束，继续请求下一帧
            requestAnimationFrame(animateFrame);
        } else {
            // 动画结束，重置状态
            isAnimating = false;
            scaleAmount = parseFloat(scaleAmount.toFixed(2));
        }
    }

    requestAnimationFrame(animateFrame);
}

可调参数说明 #

• 调整ANIMATION_DURATION可以修改动画总时长，数值越大过渡越慢
• 调整ZOOM_STEP可以修改每次点击按钮的缩放幅度
• 最大、最小缩放阈值可以根据业务需求自行修改
• 如果不需要缓动效果，把代码里的easeProgress直接替换为progress即可得到匀速线性动画

内容的提问来源于stack exchange，提问作者DeeFour