Chỉ hoạt động khi di chuột qua Bodymovin một lần

Question

Có hoạt ảnh của tôi để kích hoạt phát khi di chuột. Tôi có tất cả mọi thứ để làm việc nhưng khi tôi cố gắng để di chuột để chơi một lần nữa, không có gì có vẻ làm việc.

Bất kỳ ý tưởng nào tôi đã viết sai?

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

Tôi đang chụp ảnh về điều này, mặc dù trải nghiệm của tôi về Bodymovin (và Lottie) chỉ là từ thế giới tự nhiên phản ứng.

này nên được khá thẳng về phía trước để ngăn chặn hoạt hình và khởi động lại nó khi con trỏ lá nguyên tố:

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

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

Answer 2

Khi hoạt hình đạt đó là khung cuối cùng, nó không quay trở lại đầu tiên. Đó là lý do tại sao nếu bạn gọi chơi, không có gì xảy ra vì nó đã kết thúc và không còn gì để chơi nữa.
Bạn nên làm:

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

Và nếu bạn chỉ muốn nó để phát lại khi nó đã đạt đó là frame cuối cùng, điều này sẽ làm việc:

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

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