1

我正在尝试使图标在单击时具有动画效果。我希望动画在重新启动之前完成。

我首先通过选择元素来构建我的图标，然后使用它们的 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);
    });
});

startAnimation 方法尝试附加一个事件处理程序以在 loopComplete 事件发生时触发。

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

但是，这似乎会立即触发，我想知道如何在动画之后触发它，这样我才能在它完成之前开始新的动画。

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

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

4

0 回答 0