簡單的精靈表動畫

到目前爲止，我有這樣的：簡單的精靈表動畫

的W¯¯5507px X ^h2100px 的場面550 x 700 一個精靈表和PNG命名爲動畫PNG或東西

圖像是在div的背景上，它轉到座標背景位置，但到目前爲止，動畫去循環，我需要它O停止，我一直在嘗試了一些解決方案，但沒有...我會明白什麼想法，請檢查代碼

<style> 
    #anim{ 
     width:550px; 
     height:700px; 
     background-image:url(anim3.png); 
    } 
</style> 

    <title>Untitled Document</title> 
    </head> 

    <body onload="init()"> 
    <script> 

    var imageWidth=5500, 
    imageHeight=2100, 
    xpos=0, 
    ypos=0, 
    index=0, 
    numFrames= 30, 
    frameSize=550, 
    frameHeight=700, 
    div; 

    function init(){ 
     div = document.getElementById('anim'); 
     loop(); 
     setInterval(loop, 1000/10); 

    } 

    function loop() { 

       //multiplying by -1 because we want to move the image to the left and up to reveal the area we want to see. 
       div.style.backgroundPosition = (-xpos)+"px "+(-ypos)+"px"; 

       //each time around we add the frame size to our xpos, moving along the source image. 
       xpos += frameSize; 
       ypos +=frameHeight; 
       //increase the index so we know which frame of our animation we are currently on. 
       index += 1; 

       //if our index is higher than our total number of frames, we're at the end and better start over. 
       if (index == 30) { 
        div.style.backgroundPosition =(imageWidth)+"px"+(imageHeight)+"px"; 
       //if we've gotten to the limit of our source image's width, we need to move down one row of frames.       
       } else if (xpos +frameSize > imageWidth){ 
        xpos =0; 
        ypos += 700; 
       } 


      } 


    </script>

來源

2012-10-18 Gustavo Duenas

如果你的問題只是如何停止循環，你可以擺脫大部分不必要的代碼。 – yngccc

嘗試這一個，使用clearInterval（）停止循環：

var result; 


function init(){ 
    div = document.getElementById('anim'); 
    loop(); 
    result = setInterval(loop, 1000/10); 

} 

function loop() { 

      //multiplying by -1 because we want to move the image to the left and up to reveal the area we want to see. 
      div.style.backgroundPosition = (-xpos)+"px "+(-ypos)+"px"; 

      //each time around we add the frame size to our xpos, moving along the source image. 
      xpos += frameSize; 
      ypos +=frameHeight; 
      //increase the index so we know which frame of our animation we are currently on. 
      index += 1; 

      //if our index is higher than our total number of frames, we're at the end and better start over. 
      if (index == 30) { 
       div.style.backgroundPosition =(imageWidth)+"px"+(imageHeight)+"px"; 
      //if we've gotten to the limit of our source image's width, we need to move down one row of frames.   
       clearInterval(result) ;     
      } else if (xpos +frameSize > imageWidth){ 
       xpos =0; 
       ypos += 700; 
      } 


     }

來源

2012-10-18 02:02:45 zetsin

試試這個：

http://jsfiddle.net/BgSnL/3/

var div, 
    imageWidth = 427, 
    imageHeight = 140, 
    frameWidth = 61, 
    frameHeight = 70, 
    curFrame = { x: 0, y: 0 }; 

function init(){ 
    div = document.getElementById('anim'); 
    loop(); 
    setInterval(loop, 1000/10); 
} 

function loop() 
{ 
    var xOffset = frameWidth * curFrame.x, 
     yOffset = frameHeight * curFrame.y; 

    div.style.backgroundPosition = -(xOffset) + "px " + -(yOffset) + "px"; 

    // if we can, iterate to the next column 
    if ((xOffset + frameWidth) < imageWidth) { 
     curFrame.x += 1; 

    // else if we can, drop down a row 
    } else if ((yOffset + frameHeight) < imageHeight) { 
     curFrame.x = 0; 
     curFrame.y += 1; 

    // reset   
    } else { 
     curFrame.x = 0; 
     curFrame.y = 0; 
    } 
} 

init();

通過對象跟蹤當前幀x/y偏移量。每次迭代我們想要做的一個：

移動到下一列
達到該行的結束，下拉行
到達動畫的結束，重新啓動

來源

2012-10-18 02:30:25

簡單的精靈表動畫

回答

相關問題