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

Answer 1

虽然我关于Bodymovin（和Lottie）的经验仅来自React Native世界，但我仍然对此有所了解。

这应该是相当直截了当地停止动画，当光标离开元素重新启动：

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

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

Answer 2

当动画到达它的最后一帧，它不会再回到第一个。这就是为什么如果你打电话，没有任何反应，因为它已经结束，没有更多的发挥。
你应该这样做：

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