Question

我试图在循环一次之后保持动画的最后一帧可见。这个想法是针对一系列单独的动画来实质上创建一个图像，当用户点击每个动画的最后一帧时，该图像逐渐完成。我能够让第一个动画只循环一次，但随后它就完全消失了。这是我到目前为止所做的：

onclick = function startAnimation() { 
    var frames = document.getElementById("animation").children;
    var frameCount = frames.length;
    var i = 0;
    setInterval(function () { 
        frames[i % frameCount].style.display = "none";
        frames[i++].style.display = "inline";
    },1000); 
}

Answer 1

关于如何停止“计时器”的问题：

使用clearInterval。

var interval = setInterval(function () { 
    frames[i % frameCount].style.display = "none";
    frames[i++].style.display = "inline";
    if (i >= frameCount){
       clearInterval(interval);
    }
},1000);

https://developer.mozilla.org/en-US/docs/Web/API/Window.clearInterval

如何在最后一帧停止动画？

1 个答案: