Как использовать события с 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 DOCS - 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); 
    } 

});