Question

在试图弄清楚如何从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事件的阶段，即使没有什么需要重新渲染？

谢谢你的时间！

Answer 1

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

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

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

EaselJS：帮助理解animationend事件

1 个答案: