EaselJS: помощь в понимании события анимации

Пытаясь понять, как запускать и останавливать анимацию Sprite из SpriteSheet, я попробовал следующее:

        // 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» в конфигурации анимации означает, что мы хотим остановиться на последнем кадре, и анимация фактически останавливается, < em>и я удаляю прослушиватель событий в первой строке обратного вызова.

Если я добавлю:

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

Проблема исчезает, но это не кажется правильным... Итак, если я изменю назначение прослушивателя события animationend с:

            intro.on("animationend", onStartAnimEnd);

to:

            ask.addEventListener("animationend", onAskAnimEnd);

... и с этим изменением неопределенные захваты событий исчезают. Итак, мои вопросы:

  • В чем разница между этими двумя назначениями прослушивателя событий?
  • Это событие animationend постоянно срабатывает в фоновом режиме, потому что мы обновляем сцену по событию тика, даже если ничего не требует повторного рендеринга?

Спасибо за ваше время!


person asking    schedule 22.07.2014    source источник


Ответы (1)


На самом деле это дублированный вопрос. Как я ответил на предыдущий вопрос, ваше определение анимации неверно, вам нужно использовать логическое значение (false), а не строковое значение ("false").

Теперь понятно, что такое ask, но метод on является оболочкой для addEventListener, и где вы можете указать такие вещи, как область обратного вызова и будет ли он выполняться только один раз. Взгляните на API, чтобы узнать больше:

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

person renatopp    schedule 22.07.2014