title: Js animate a ball wrong, slow then faster everytime
body: <p>When I run this code first time the animation speed is slow, then every time faster.The code moves a ball, and after you touch the screen, the ball goes to where you touched. </p>
  
  <p>But the first time, it is very slow, then every time it goes faster. Why？</p>
  
  <p>I was expecting a similar speed, not perfectly constant, but not like that.
  Also on the tenth attempt the ball goes too fast.</p>
  
  <p>I try on my smartphone, I don't know if it will work on a computer.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  .point{
      width:10px; height:10px; 
      background-color:green;
      position:absolute;
  }
  #ball{
      width:10px; height:10px;
      background-color:red;
      position:absolute;
      top:1px; left:50px;
  }
  &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="point"&gt;&lt;/div&gt;
  &lt;div id="ball"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      window.addEventListener("touchstart", function(e){
         var cx = e.touches[0].clientX;
         var cy = e.touches[0].clientY;
      });
  
      window.addEventListener("touchmove", function(e){
         var cx = e.touches[0].clientX;
         var cy = e.touches[0].clientY;
         endB = [cx, cy];
      });
  
      window.addEventListener("touchend", function(e){
         decl();
      });
  
      function decl(){
         isBmove = true;
         mstep = 2;
         requestAnimationFrame(step);
      }
  
      function step(ts){
         if (isBmove){
             var dfrein = 25;
             var gb = b.getBoundingClientRect();
             var ang = Math.atan2(endB[1]-gb.top, endB[0]-gb.left);
             var addX = Math.cos(ang)*mstep;
             var addY = Math.sin(ang)*mstep;
             var difX = endB[0]-gb.left;
             var difY = endB[1]-gb.top;
             var dist = Math.sqrt(Math.pow(difX,2),Math.pow(difY,2));
             if(dist &lt; dfrein){
                 mstep *= 0.98;
                  l("m= "+mstep);
             }
             if (mstep &lt; 1){
                 isBmove = false; 
                 l("add :"+addX+","+addY);
             }
             b.style.top = gb.top+addY+"px";
             b.style.left = gb.left+addX+"px";
        }
        requestAnimationFrame(step);
      }
  
      window.requestAnimationFrame = 
      window.requestAnimationFrame 
      || window.mozRequestAnimationFrame 
      || window.webkitRequestAnimationFrame 
      || window.msRequestAnimationFrame; 
  
  
      var isBmove = false;
      var endB = [0,0];
      var mstep = 2;
      var b = document.getElementById("ball");
      function l(p){
      console.log(p);
  }
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks</p>