如何为Konva动画添加迭代计数器，实现单次播放后停止？

核心问题分析 #

你遇到的anim.stop()导致线条缩短，本质是这个方法会直接中断动画进程，没有让线条属性更新到最终的完整实线状态。完全可以用更可靠的方式替代，以下是几种实用方案：

方案1：利用动画完成回调固定最终状态 #

不管是用框架动画还是原生动画，都可以通过动画完成回调，在动画自然结束后强制设置线条的最终状态，彻底避免中途中断的问题。
比如jQuery动画示例：

$('#yellowLine').animate(
    { width: '100%' }, // 对应从左到右的动画属性
    {
        duration: 1200,
        complete: function() {
            // 强制设置最终实线状态，覆盖动画可能的中间值
            $(this).css('width', '100%');
        }
    }
);

方案2：用迭代计数器控制单次动画 #

如果是手写的帧动画（基于requestAnimationFrame），可以通过计数器跟踪动画进度，达到目标帧数后停止并锁定最终状态：

const yellowLine = document.getElementById('yellowLine');
const totalWidth = window.innerWidth; // 屏幕总宽度
const totalFrames = 60; // 动画总帧数（可根据需求调整）
let frameCounter = 0;

function runLineAnimation() {
    frameCounter++;
    // 计算当前进度对应的宽度
    const currentWidth = (frameCounter / totalFrames) * totalWidth;
    yellowLine.style.width = `${currentWidth}px`;

    if (frameCounter < totalFrames) {
        requestAnimationFrame(runLineAnimation);
    } else {
        // 动画结束，固定为完整实线
        yellowLine.style.width = `${totalWidth}px`;
    }
}

// 启动单次动画
runLineAnimation();

这种方式完全不需要stop()，通过计数器精准控制动画只执行一轮，结束后直接锁定最终状态。

方案3：SVG线条的专属优化（如果是SVG实现） #

如果你的yellowLine是SVG元素，用原生animate()API的fill: forwards属性就能自动保持动画最终状态，根本不需要手动停止：

const yellowLine = document.getElementById('yellowLine');
const lineTotalLength = yellowLine.getTotalLength();

// 初始化虚线动画参数
yellowLine.style.strokeDasharray = lineTotalLength;
yellowLine.style.strokeDashoffset = lineTotalLength;

// 执行单次动画并保持最终状态
yellowLine.animate(
    [
        { strokeDashoffset: lineTotalLength },
        { strokeDashoffset: 0 }
    ],
    {
        duration: 1200,
        fill: 'forwards' // 关键：动画结束后保留最后一帧属性
    }
);

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