在javascript中重现android的onfling事件

Question

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

Answer 1

While this code is not fit for its intended purpose it does cause the 'sprite' to continue in motion after 'mouse-up' in the same direction and velocity. 尽管此代码不符合其预期目的，但确实会导致“精灵”在“鼠标”向上移动后以相同的方向和速度继续运动。

<!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 个解决方案

解决方案1
0 2016-08-10 12:10:57

在javascript中重现android的onfling事件

问题描述

1 个解决方案

解决方案1 0 2016-08-10 12:10:57

解决方案1
0 2016-08-10 12:10:57