當mouseleave時反向播放動畫JS。

Question

我有一個很好的代碼。我不喜歡的是，當mouseleave動畫停止尖銳。這是不好的。我有幾個想法：

1. 如何使'停止'更順暢和用戶友好？

2. 如何使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

解決

。只是把這個代碼：的

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

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

    }, function(){ 

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

代替：

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

function myScript1(){ 

anim.play(); 
} 

function myScript2(){ 

anim.stop(); 
}