Question

所以我有这个动画由41帧组成，我试图让这个动画在最后一帧结束并留在最后一帧，我必须承认......我很失落。任何帮助都将是美妙的！非常感谢！

一旦我弄清楚如何停止动画，我也想让它从onmouseover开始并恢复到第1帧onmouseout。

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

Answer 2

我发现当它启动for循环时：

for (i=0; i<41; i++)

i＆lt; 41并不意味着帧，而是毫秒。这就是为什么它停在一个奇怪的地方。

我＆lt; 61使它停在第41帧。

非常感谢!!!!!!

如何在javaScript中停止间隔动画

2 个答案: