बॉडीमोविन होवर एनीमेशन केवल एक बार

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 (और लोटी) के बारे में मेरा अनुभव ही है मूल निवासी दुनिया प्रतिक्रिया से।

यह काफी सीधे आगे होना चाहिए एनीमेशन बंद करो और उसे पुन: प्रारंभ जब कर्सर तत्व छोड़ देता करने के लिए:

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