Question

我点击它时试图制作动画图标。我希望动画在重新启动之前完成。

首先通过选择元素然后使用他们的id来通过路径选项加载动画数据来构建我的图标：

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);
    });
});

当loopComplete事件发生时，startAnimation方法尝试附加事件处理程序以激活。

function complete(icon) {
    console.log(icon + ' loopComplete');
}

然而，这似乎立刻引发了，我想知道如何在动画制作之后启动它，这样我就可以在它完成之前不开始新的动画。

我在这里做了一个简化的测试用例：https://codepen.io/paulyabsley/project/editor/ALEWnK

bodymovin.js的文档：https://github.com/bodymovin/bodymovin

为什么我的Bodymovin.js loopComplete事件在动画完成之前触发？

0 个答案: