Question

到目前为止，我有这个：

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

图像位于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>

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


        }

Answer 2

试试这个：

<强> 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偏移。我们希望每次迭代都执行以下操作之一：

转到下一栏
到达行尾，下拉一行
到达动画结束，重新启动

画布上简单的精灵表动画（或javascript）

2 个答案: