simple sprite sheet animation on canvas (or javascript)

Question

So far I have this:

a sprite sheet of w 5507px X H 2100px the scenes are 550 x 700 and the png is named animation png or something

the image is on the background of the div , and it goes to the coordinates background position, but so far, the animation goes for a loop and I need it to stop, I've been trying some solutions but nothing...I will appreciate any idea, please check the code

<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

try this one, using clearInterval() to stop loop:

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

Try this:

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();

The current frame x/y offset is tracked via an object. Each iteration we want to do one of:

Move over to the next column
Reach the end of the row, drop down a row
Reach the end of the animation, restart

simple sprite sheet animation on canvas (or javascript)

Question

2 answers

solution1
1 2012-10-18 02:02:45

solution2
0 2012-10-18 02:30:25

simple sprite sheet animation on canvas (or javascript)

Question

2 answers

solution1 1 2012-10-18 02:02:45

solution2 0 2012-10-18 02:30:25

solution1
1 2012-10-18 02:02:45

solution2
0 2012-10-18 02:30:25