Kinetic.js [How can I stop one sprite]

Question

I´m starting with Kinetic.js and I have my first app working perfectly, but I don´t find the way to stop sprites... for example, I have one sprite and I want to "play" that sprite just once, see the frames and in the last one, one simple stop(). How can I do that? (Stop after the last "frame" of the sprite).

Here´s my code (for that sprite):

    var myImage = new Image();
    myImage.onload = function() {
    var mySprite = new Kinetic.Sprite({
        x: 250,
        y: 40,
        width: 70,
        height: 109,
        image: myImage,
        animation: 'idle',
        animations: animations,
        frameRate: 5
    });
    layer1.add(mySprite);
    mySprite.start();
    };
    myImage.src = 'sheet2.png';

Thanks in advance!

Answer 1

You can use the afterFrame function, which will enable you to trigger an event after a specific frame.

Then you can call stop() after frame 5, for example. (you'll need to update this to however many frames there are in your sprite.)

mySprite.afterFrame(5, function(){
    mySprite.stop();
});

You can see an example of the use of afterFrame in the following two posts:

http://ramkulkarni.com/blog/sprite-animation-in-html5-canvas-with-kineticjs/ http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-sprite-tutorial/