10

让我的动画在悬停时触发播放。我一切正常,但是当我尝试再次悬停播放时,似乎没有任何效果。

有什么想法我写错了吗?

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

2 回答 2

7

当动画到达它的最后一帧时,它不会回到第一帧。这就是为什么如果你调用 play,什么都不会发生,因为它已经结束并且没有更多可玩的了。
你应该做:

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;
})
于 2017-10-29T00:58:39.640 回答
2

尽管我对 Bodymovin(和 Lottie)的经验仅来自 React Native 世界,但我对此进行了尝试。

当光标离开元素时,停止动画并重新启动它应该非常简单:

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

squares.addEventListener("mouseleave", function () {
  animation.gotoAndStop(0);
});
于 2017-10-27T11:00:21.953 回答