Reproduce android's onfling event in javascript

106 Views Asked by accaacco At 03 August 2016 at 22:42

I want to reproduce android's fling event in javascript.What I don't understand is what type of mathematical function I have to use.I know that I have to calculate how many pixels the mouse is been moved in a specific time and do the fling animation based on this but I don't know how to do this in javascript.I have to do the fling animation based on the last velocity(pixel/time) i have found?Or I have to do the fling animation based on all the velocity I have found?And what type of method I have to use to find the velocity ?

Original Q&A

There are 1 best solutions below

daveyerwin On 10 August 2016 at 12:10

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>

Reproduce android's onfling event in javascript

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANDROID

Related Questions in MATH

Related Questions in ONFLING

Trending Questions

Popular # Hahtags

Popular Questions