如何使用bodymovin.js中的事件

Question

提前道歉，因为我怀疑这是一个非常简单的问题，所以我的无知向您道歉，但我卡住了。

我正在使用bodymovin在网站上播放svg动画。 我想使用onComplete事件在动画完成时触发函数，但我不知道如何编写代码。

我尝试过

 $("#bodymovin").on("onComplete", function(){
        console.log('test completed');
    });

和

 document.getElementById("bodymovin").addEventListener("complete", doalert);

    function doalert() {
        console.log('test completed');
    }

https://github.com/bodymovin/bodymovin#events}

- Luke Seall

Answer 1

我弄清楚了。这是整个代码。

var anim;

var animData = {
    container: document.getElementById('bodymovin'),
    renderer: 'svg',
    loop: false,
    autoplay: true,
    rendererSettings: {
        progressiveLoad:false
    },
    path: 'thelogo.json'
};

anim = bodymovin.loadAnimation(animData);

anim.addEventListener('complete',doalert);

function doalert() {
    console.log('test completed');
}

- Luke Seall

Answer 2

var animData = {
    container: document.getElementById('bodymovin'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'folder_path/data.json'
};

var anim = bodymovin.loadAnimation(animData);

// function for DOM Loading 
anim.addEventListener('DOMLoaded', function(e) { 
    console.log('DOM loaded'); 
});

// function for Completion of animation   
anim.addEventListener('complete', test_complete);

function test_complete() {
    console.log('test completed');
}

// function for certain frame 
anim.addEventListener('enterFrame',enterframe);

function enterframe() {
    console.log('In Frame');
}

//function for Mouse Enter for bodymovin 

anim.addEventListener('DOMLoaded', function(e) {

  var elem = document.getElementById('bodymovin');

  elem.addEventListener('mouseover', mouseElem)

  function mouseElem() {
    anim.goToAndStop(1, true);
  }

});

- Amrut Dagade

---

我提供了一些开始使用 bodymovin 事件的示例：

1. DOM 加载事件
2. 完成事件
3. 进入帧事件
4. 鼠标进入事件

- Amrut Dagade

你能详细解释一下 'enterFrame' 事件吗？听起来像是可以监听动画中特定帧的显示，是这样吗？ - Trev14