JS运动框架的封装过程(一)

给大家出一道题，从起点A走到目的地B，一共用了1000毫秒，每一次是30毫秒，请问你在这里面得到了哪些信息？

  信息有哪些呢？

   第一个，总时长是:1000毫秒

   第二个，多久时间走一次？30毫秒

   第三个，走的总次数:1000/30

   第四个，距离:B-A

   第五个，步长：距离/总次数

运动框架的实现思路：就是在一定的时间段里面改变left、top、width、height，到达目的地之后停止。

可以先思考一下，在页面里如何让div动起来？

     思考如下：1、设置div的时候为绝对定位，因为只有绝对定位之后，left、top等值才会在页面上显示出来。否则在页面上看不见div。

                   2、可以给div设置点击事件，在函数里面定义总的步数count，总距离dis，速度step=dis/count,还需要设置一个当前的步数，给它进行初始化n=0

                   3、然后使用计时器setInterval（），获取到div当前的距离，让他div动起来。

具体代码如下：               

<script type="text/javascript">

         window.onload = function(){
                 var oDiv = document.getElementById('div1');
                         oDiv.onclick = function(){
                                  var count = parseInt(1000/30);//走的总步数
                                  var dis = 500-0;//距离
                                  var step = dis/count;//
                                  var n = 0；//当前的步数

                                  timer = setInterval(function(){
                                       n++;
                                    oDiv.style.left = n*step + 'px';
                                  },30)
            }
}
</script>

其实让div动起来很简单，就这么几行代码div就会动起来了。

但是呢div他不会停下来，一直在运动，那是因为没有给它设置运动终止条件。在上面代码中我们已经设置了当前的步数，也设置了总步数，那么当当前步数和总步数一致的时候，然后清除计时器，那么div是不是就可以停止了呢？

当步数达到500的时候，div就会停到500那块。

改善后的代码如下:

 window.onload = function(){

        var oDiv = document.getElementById('div1');
        var timer;
         oDiv.onclick = function(){
             var count = parseInt(1000/30);//走的总步数
             var dis = 500-0;//距离
             var step = dis/count;//速度
             var n = 0;//当前的步数
             timer = setInterval(function(){
                   n++;
                   oDiv.style.left = n*step +'px';

           //判断条件，当前步数和总步数一致的时候，那么div就可以停止了                if(n == count){
                   clearInterval(timer)
                 };
        },30)
     }
}
</script>

我们可以用函数把运动的过程给封装起来

<script type="text/javascript">
       window.onload = function(){
             var oDiv = document.getElementById('div1');
             var timer;

           obj是获取的对象，name是div的Left、Top、Width、Height值，target是最终的目的地，dur是总时长
            function move(obj,name,target,dur){
                   var count = parseInt(dur/30);
                   var start = obj.offsetLeft;//把div刚开始在页面上的位置存在变量中
                   var dis = target - start;//dis为距离
                   var step = dis/count;
                   var n = 0;
                   timer = setInterval(function(){
                          n++;
                          obj.style[name] = start+ n*step +'px';

                          //判断条件，当前步数和总步数一致的时候，那么div就可以停止了
                          if(n == count){
                              clearInterval(timer)
                     }
            },30)
        }
          oDiv.onclick = function(){
                 move(oDiv,'top',100,1000)
         }
 }
</script>

精彩内容待续...