Как использовать события с bodymovin.Яш

заранее извиняюсь за мое невежество, поскольку я подозреваю, что это очень простой вопрос для ответа, но я застрял.

Я использую 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

спасибо

6
bodymovin javascript-events

2 ответов

Я понял. Вот весь код

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

});
1