Question

我的代码效果很好。我不喜欢的是当mouseleave动画停止锐利时。这是不好的。我有几个想法：

如何让“停止”更顺畅和用户友好？

如何在mouseleave之后进行'反向播放'？（在mouseleave之后从故障点播放反向动画）

animContainer = document.getElementById('bodymovin');

var params = {
    container: animContainer,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    autoplay:false,
    autoloadSegments: false,
    path: 'data.json'

};

var anim;

    anim = bodymovin.loadAnimation(params);
    animContainer.addEventListener("mouseenter", myScript1);
    animContainer.addEventListener("mouseleave", myScript2);

function myScript1(){

    anim.play();
}

function myScript2(){

    anim.stop();
}

Answer 1

使用上面的示例，此代码对我有用，尽管我不禁想到有一种更干净的方法来完成此操作……（很快就会使工作笔大起来）

example1 = document.getElementById('example1');

var params = {
    container: example1,
    renderer: 'svg',
    loop: false,
    autoplay:false,
    autoloadSegments: false,
    path: 'example1.json'
};

var anim;
    anim = bodymovin.loadAnimation(params);
    example1.addEventListener("mouseenter", myScript1);
    example1.addEventListener("mouseleave", myScript2);

function myScript1(){
    bodymovin.setDirection(1);
    anim.play();
}

function myScript2(){
    bodymovin.setDirection(-1);
    anim.play();
};

Answer 2

解决。只需输入此代码：

$('#bodymovin').hover(function(){

        bodymovin.setDirection(1);
        anim.play();

    }, function(){

        bodymovin.setDirection(-1);
        anim.play();
});

而不是：

animContainer.addEventListener("mouseenter", myScript1);
animContainer.addEventListener("mouseleave", myScript2);

function myScript1(){

anim.play();
}

function myScript2(){

anim.stop();
}

当mouseleave反向播放动画JS。

2 个答案: