javascript - 如何在 javaScript 中停止间隔动画

Question

所以我有这个由 41 帧组成的动画，我试图让这个动画在最后一帧结束并停留在最后一帧，我必须承认......我很迷茫。任何帮助都会很棒!非常感谢!

一旦我弄清楚如何停止动画，我还想让它在鼠标悬停时启动并在鼠标悬停时恢复到第 1 帧。

html:

    <div id="door">
       <img src="images/Animation_Door/0001.png">
       <img src="images/Animation_Door/0002.png">
       <img src="images/Animation_Door/0003.png">
       ...(41 frames in total)
    </div>

CSS:

   #door {
    background-color:transparent;
    position:absolute;
    width:800px;
    height:700px;
    top:90px;
    left:50%;
    margin-left:-400px;
    padding:0px;
    overflow:hidden;
    cursor:pointer;
    z-index:25;
  }

  #door img{
    display: none;
  }

  #door img:first-child {
    display: block;
  }

JavaScript:

var interval = setInterval("function ani()", 50);  
     setTimeout(function(){ clearInterval(interval) }, 40);

     onload = function startAnimation() { 
        var frames = document.getElementById("door").children;
        var frameCount = frames.length;
        var i = 0;
     setInterval(function ani() { 
        frames[i % frameCount].style.display = "none";
        frames[++i % frameCount].style.display = "block";
     }, 50);
}

Answer 1

function startAnimation() { 
  var frames = document.getElementById("door").children;
  var frameCount = frames.length;

  for (i=0; i<41; i++) {
      setTimeout(function(){
          frames[i].style.display = "none";
          frames[i+1].style.display = "block";
      },50*i);
  }
}