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