0

これまでのところ私はこれを持っています：

シーンが あり、pngがanimationpngなどの名前のwXH のスプライトシート5507px 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 に答える