Почему мое событие 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

0 ответов

Другие вопросы по тегам