Reverse-Play-Animation JS beim Mausspeichern.

Question

Ich habe einen Code, der gut funktioniert. Was ich nicht mag, ist, dass wenn eine Animation aufhört, die Animation scharf bleibt. Das ist nicht gut. Ich habe ein paar Ideen:

1. Wie machen das "Stop" reibungsloser und benutzerfreundlicher?

2. Wie make 'reverse play' nach mouseleave? (Spielen Reverse Animation von Kipppunkt nach mouseleave)

   animContainer = document.getElementById('bodymovin'); 
   
   var params = { 
       container: animContainer, 
       renderer: 'svg', 
       loop: true, 
       autoplay: true, 
       autoplay:false, 
       autoloadSegments: false, 
       path: 'data.json' 
   
   }; 
   
   var anim; 
   
       anim = bodymovin.loadAnimation(params); 
       animContainer.addEventListener("mouseenter", myScript1); 
       animContainer.addEventListener("mouseleave", myScript2); 
   
   function myScript1(){ 
   
       anim.play(); 
   } 
   
   function myScript2(){ 
   
       anim.stop(); 
   } 
   

Answer 1

gelöst. Legen Sie einfach diesen Code:

$('#bodymovin').hover(function(){ 

     bodymovin.setDirection(1); 
     anim.play(); 

    }, function(){ 

     bodymovin.setDirection(-1); 
     anim.play(); 
}); 

statt:

animContainer.addEventListener("mouseenter", myScript1); 
animContainer.addEventListener("mouseleave", myScript2); 

function myScript1(){ 

anim.play(); 
} 

function myScript2(){ 

anim.stop(); 
}