Bodymovin只悬停播放一次动画

时间:2017-08-03 17:24:31

标签: javascript jquery animation bodymovin

让我的动画在悬停时触发播放。我把一切都搞定了,但是当我试图再次盘旋时,似乎没有任何效果。

我写错了什么想法?

var squares = document.getElementById("test");
var animation = bodymovin.loadAnimation({
    container: test,
    renderer: "svg",
    loop: false,
    autoplay: false,
    path: "https://dl.dropboxusercontent.com/BodyMovin/squares.json"
});

squares.addEventListener("mouseenter", function () {
    animation.play();
});

function playAnim(anim, loop) {
    if(anim.isPaused) {
        anim.loop = loop;
        anim.goToAndPlay(0);
    }
}

function pauseAnim(anim) {
    if (!anim.isPaused) {
        anim.loop = false;
    }
}

2 个答案:

答案 0 :(得分:3)

当动画到达最后一帧时,它不会回到第一帧。这就是为什么如果你打电话玩,没有任何事情发生,因为它已经结束,没有更多的发挥 你应该这样做:

squares.addEventListener("mouseenter", function () {
  animation.goToAndPlay(0);
});

如果你只想在它到达最后一帧时重播它,那么这应该有效:

var isComplete = true;
svgContainer.addEventListener('mouseenter', function(){
  if(isComplete){
    squares.goToAndPlay(0);
    isComplete = false;
  }
})

squares.addEventListener('complete', function(){
  isComplete = true;
})

答案 1 :(得分:2)

虽然我对Bodymovin(和Lottie)的经历仅来自React Native世界,但我对此有所了解。

这应该非常直接地停止动画并在光标离开元素时重新启动它:

squares.addEventListener("mouseenter", function () {
  animation.play();
});

squares.addEventListener("mouseleave", function () {
  animation.gotoAndStop(0);
});