Question

我想在javascript中重现android的fling事件。我不明白我必须使用什么类型的数学函数。我知道我必须计算鼠标的像素数在特定的时间移动并基于此做了一个动画动画，但我不知道如何在javascript中执行此操作。我必须根据我找到的最后速度（像素/时间）进行投影动画？或者我必须根据我找到的所有速度进行投影动画？我必须使用哪种方法来找到速度？

Answer 1

虽然此代码不适合其预期目的，但它确实会导致'精灵'在“鼠标向上”后以相同的方向和速度继续运动。

<!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>

在javascript中重现android的onfling事件

1 个答案: