0

到目前为止，我有这个：

场景是w 5507px X H 的精灵表， 并且 png 被命名为动画png或其他东西2100px550 x 700

图像在背景上div，它转到坐标背景位置，但到目前为止，动画循环播放，我需要它停止，我一直在尝试一些解决方案，但没有...我会很感激任何想法，请检查代码

<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>
4

2 回答 2

1

试试这个，使用 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-18T02:02:45.087 回答
0

尝试这个：

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-18T02:30:25.867 回答