如何使用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'); 
    } 

Bodymovin文檔 - https://github.com/bodymovin/bodymovin#events

感謝

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

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

});