如何讓我的動畫在最後一幀停止？

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