bodymovin.jsでのイベントの使い方

Question

これは非常に簡単な質問ですが、私は気づいていません。

私はbodymovinを使ってウェブサイト上でsvgアニメーションを再生しています。アニメーションが完了したときにonCompleteイベントを使用して関数をトリガーしたいのですが、コード化する方法を理解できません。私はそれを考え出したhttps://github.com/bodymovin/bodymovin#events

おかげ

Answer 1

-

私は

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

そして

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

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

Bodymovinのドキュメントを試みました。ここでは、コード全体

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

});