CODEWITHSUNDEEP
eventsspriteeaseljscreatejs
asking
asking

Reputation: 1445

EaselJS : Help understanding animationend event

In trying to figure out how to start and stop Sprite animations from a SpriteSheet, I tried this:

        // other code...

        // define animations in SpriteSheet:
        "animations": {"intro": [0, 19, "false"]}

        // other code...

        var spriteSheet = new createjs.SpriteSheet(data);
        var intro = new createjs.Sprite(spriteSheet, "intro");
        stage.addChild(intro);
        createjs.Ticker.addEventListener("tick", stage);

        intro.stop();

        var btnStart = document.getElementById("btnStart");

        btnStart.onclick = function() {
            console.log("btnStart clicked");
            intro.on("animationend", onStartAnimEnd);
            intro.play();
        };

        function onStartAnimEnd(e) {
            intro.removeEventListener("animationend", onStartAnimEnd);
            console.log("Start anim ended");
        }

In the above example, if the user clicks the btnStart button, the onStartAnimEnd callback fires indefinitely, even though by defining "false" in the animation configuration to signal we want to stop on the last frame, and the animation does in fact stop, and I'm removing the event listener in the first line of the callback.

If I add:

        function onStartAnimEnd(e) {
            intro.removeEventListener("animationend", onStartAnimEnd);
            intro.stop();
            console.log("Start anim ended");
        }

The problem goes away, but that doesn't seem right... So, if I change the listener assignment of the animationend event from:

            intro.on("animationend", onStartAnimEnd);

to:

            ask.addEventListener("animationend", onAskAnimEnd);

...and with this change, the indefinite event captures goes away. So my questions are:

Thanks for your time!

Upvotes: 0

Views: 2098

Answers (1)

renatopp
renatopp

Reputation: 1315

This is actually a duplicated question. As I answered you previous question, your animation definition is wrong, you need to use the boolean value (false) and not the string value ("false").

Now sure what ask is, but the method on is a wrapper for addEventListener, and where you can specify things such as the scope of the callback and if it will run only once. Take a look at the API to know more:

http://www.createjs.com/Docs/EaselJS/classes/EventDispatcher.html#method_on

Upvotes: 1

Related Questions