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

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