如何让我的动画在最后一帧停止？答案

【问题标题】：How can I get my animation to stop on the last frame?如何让我的动画在最后一帧停止？
【发布时间】：2014-01-27 04:28:52
【问题描述】：

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

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); 
}

【问题讨论】：

标签： javascript animation

【解决方案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

【讨论】：