EaselJS : 帮助理解 animationend 事件答案

【问题标题】：EaselJS : Help understanding animationend eventEaselJS : 帮助理解 animationend 事件
【发布时间】：2014-07-22 20:59:53
【问题描述】：

为了弄清楚如何从 SpriteSheet 启动和停止 Sprite 动画，我尝试了以下方法：

        // 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");
        }

在上面的示例中，如果用户单击 btnStart 按钮，onStartAnimEnd 回调会无限期触发，即使通过在动画配置中定义“false”来表示我们想要在最后一帧停止，动画实际上确实如此停止，和我在回调的第一行删除事件监听器。

如果我添加：

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

问题消失了，但这似乎不对...所以，如果我将 animationend 事件的侦听器分配从：

            intro.on("animationend", onStartAnimEnd);

到：

            ask.addEventListener("animationend", onAskAnimEnd);

...随着这种变化，无限期的事件捕获消失了。所以我的问题是：

这两个事件监听器分配有什么区别？
这个 animationend 事件是否在后台持续触发，因为我们正在更新 tick 事件中的舞台，即使没有什么需要重新渲染？

感谢您的宝贵时间！

【问题讨论】：

标签： events sprite easeljs createjs

【解决方案1】：

这实际上是一个重复的问题。正如我上一个问题的回答，你的动画定义是错误的，你需要使用布尔值（false）而不是字符串值（"false"）。

现在确定ask 是什么，但on 方法是addEventListener 的包装器，您可以在其中指定回调的范围以及它是否只运行一次等内容。查看 API 以了解更多信息：

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

【讨论】：