在javascript中重現android的onfling事件

我想在javascript中重現android的fling事件。我不明白是什麼類型的數學函數我必須使用。我知道我必須計算鼠標的像素數在特定的時間內移動，並基於此做一堆動畫，但我不知道如何在javascript中這樣做。我必須根據我找到的最後一個速度（像素/時間）來做動畫動畫嗎？或者我有根據我找到的所有速度來做動畫動畫，以及我用什麼類型的方法來找到速度？在javascript中重現android的onfling事件

來源

2016-08-03 accaacco

儘管此代碼不適合其預期用途，但確實會導致'精靈'在以相同方向和速度「鼠標移動」後繼續運動。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Fling Me</title> 
<style> 
div{ 
    position:absolute; 
    top:300px; 
    left:300px; 
    width:100px; 
    height:100px; 
    background-color:red; 
} 
</style> 
</head> 
<body> 
republicans must abandon trump or be complicit in his advocacy of assassinating a sitting president 
<div></div> 
<script> 
'use strict'; 
(function(){ 
var mm,ox,oy,el,t,l,tt=0,tl=0,dt=0,dl=0,tmr,s; 
document.querySelector('div').addEventListener('mousedown', 
    function(ev){ 
     el = ev.target; 
     s = el.style ; 
     ox=ev.offsetX; oy=ev.offsetY; 
     t=ev.clientY;l=ev.clientX; 
     tmr = setInterval(function(){  
     dt = tt - t; 
     dl = tl - l; 
     tt = t; 
     tl = l;    
     },30); 
     el.addEventListener('mousemove', 
     mm = function(ev){ 
      t=ev.clientY;l=ev.clientX; 
      s.top = t - ox + 'px'; 
      s.left = l - oy + 'px';    
     } 
    ); 
     el.addEventListener('mouseup', 
     function(ev){ 
      clearInterval(tmr); 
      el.removeEventListener('mousemove',mm); 
      tmr = setInterval(function(){ 
       s.top = parseInt(s.top) - dt + 'px'; 
       s.left = parseInt(s.left) - dl + 'px'; 
      },30); 
      setTimeout("location.assign(location.href)",2000); 
     } 
    ); 
    } 
)})(); 
</script> 
</body> 
</html>

來源

2016-08-10 12:10:57 daveyerwin

在javascript中重現android的onfling事件

回答

相關問題