Почему мое событие bodyCovple.js loopComplete срабатывает до завершения анимации?
Я пытаюсь оживить иконки при нажатии на них. Я бы хотел, чтобы анимация была завершена до ее перезапуска.
Сначала я создаю свои значки, выбирая элементы, а затем используя их идентификаторы для загрузки данных анимации с помощью параметра пути:
var icon_containers = document.querySelectorAll('div.icon');
var icons = [];
function buildIcons() {
for (var i = 0; i < icon_containers.length; i++) {
element = icon_containers[i];
if (element.id !== '') {
var params = {
container: element,
renderer: 'svg',
loop: false,
autoplay: false,
path: element.id + '.json'
};
var anim = bodymovin.loadAnimation(params);
icons.push({
anim: anim,
element: element,
isPlaying: false
});
}
}
}
buildIcons();
Затем объект значков проходит по циклу и вызывается метод animationStart, а также добавляется обработчик щелчков для каждого контейнера значков:
function startAnimation(anim, icon) {
anim.setDirection(1);
anim.goToAndStop(1);
anim.play();
// This seems to fire immediately, before the icon has completed its animation?
anim.addEventListener('loopComplete', complete(icon));
}
buildIcons();
icons.forEach(function(value, id) {
startAnimation(value.anim, id);
value.element.addEventListener("click", function(e) {
startAnimation(value.anim, id);
});
});
Метод startAnimation пытается присоединить обработчик события к событию, когда происходит событие loopComplete.
function complete(icon) {
console.log(icon + ' loopComplete');
}
Однако, похоже, что это срабатывает сразу, и я хотел бы знать, как запустить его после анимации, чтобы я не мог запустить новую анимацию, пока она не завершится.
Я сделал сокращенный тестовый пример здесь: https://codepen.io/paulyabsley/project/editor/ALEWnK
Документы для bodymovin.js: https://github.com/bodymovin/bodymovin