使用Bodymovin JS进行鼠标悬停事件

时间:2016-04-26 15:38:11

标签: javascript svg hover onmouseover bodymovin

我希望将鼠标悬停事件添加到从After Effects导出的SVG中。我希望SVG能够在mouseover上播放。到目前为止,我已经使用animation-play-state属性,但它没有奏效。我也尝试在脚本中使用onmouseover并尝试为mouseover添加一个事件监听器,但仍然没有。我做错了什么?

var params = {
    container: document.getElementById('bodymovin'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    animationData: animationData

};

var anim;

anim = bodymovin.loadAnimation(params);

1 个答案:

答案 0 :(得分:1)

我是这样做的,它对我有用:

animContainer = document.getElementById('bodymovin');

var params = {
    container: animContainer,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    autoplay:false,
    autoloadSegments: false,
    path: 'data.json'// path to your data.json file you rendered from AE

};

var anim;

anim = bodymovin.loadAnimation(params);
animContainer.addEventListener("mouseover", myScript);

function myScript(){
    anim.play();
}