Пытаясь понять, как запускать и останавливать анимацию 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 постоянно срабатывает в фоновом режиме, потому что мы обновляем сцену по событию тика, даже если ничего не требует повторного рендеринга?
Спасибо за ваше время!