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