Bodymovin悬停播放动画仅播放一次

Question

我成功让我的动画在悬停时播放。我已经让所有的东西都能够工作，但是当我尝试再次悬停以播放时，似乎什么也没发生。

有任何想法我写错了什么吗？

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

- phantomboogie

Answer 1

当动画达到最后一帧时，它不会回到第一帧。这就是为什么如果你调用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;
})

- airnan

Answer 2

虽然我只在React Native领域中使用过Bodymovin（和Lottie），但我想尝试一下这个。

当光标离开元素时，停止动画并重新启动它应该很简单：

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

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

- Samuli Hakoniemi