3

だから私はこのアニメーションを 41 フレームで構成しており、このアニメーションを最後のフレームで終了させ、最後のフレームに留まらせようとしていますが、認めなければなりません... 私は非常に迷っています。どんな助けでも素晴らしいでしょう！本当にありがとう！

アニメーションを停止する方法を理解したら、onmouseover でアニメーションを開始し、onmouseout でフレーム 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);
}
4

2 に答える 2

0

forループを開始すると、次のことがわかりました。

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

i<41 はフレームを意味するのではなく、ミリ秒を意味します。だから変なところで止まる。

i<61 では、41 フレーム目で停止しました。

本当にありがとう！！！！！！

于 2012-12-01T09:00:18.620 に答える
0 
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);
  }
}
于 2012-12-01T06:13:43.687 に答える