为我的无知事先道歉,因为我怀疑这是一个非常容易回答的问题,但我被困住了。
我正在使用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
由于
答案 0 :(得分:9)
我明白了。这是整个代码
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');
}
答案 1 :(得分: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);
}
});