匀速运动的函数封装

匀速运动的函数封装

小鸟一只大家多指点
css样式：

  <style type="text/css">
   *{
    margin: 0;
    padding: 0;
   }
   #box{
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    left: 0;
    top: 100px;
   }
   #pox{
    width: 100px;
    height: 100px;
    background: blue;
    position: absolute;
    left: 0;
    top: 251px;
   }
   #position{
    width: 1px;
    background: black;
    height: 500px;
    position: absolute;
    left: 500px;
   }
  </style>

结构：

//JS代码
 <script type="text/javascript">
  //匀速运动 （位置发生改变：需要定位）
  
  var flyToRight = document.getElementById("flyToRight");
  var flyToLeft = document.getElementById("flyToLeft");
  var box = document.getElementById("box");
  var pox = document.getElementById("pox");
  
  flyToRight.onclick = function(){
   animate(box,501);
  }
  //向左运动
  flyToLeft.onclick = function(){
   animate(box,0);
  }
  
  pox.onclick = function(){
   animate(pox,600,10);
  }
  
  var timer = null;
  //匀速运动封装
  function animate(obj,target,speedTime = 20){//给speedTime设置默认值为20
   //speedTime = !!speedTime ? speedTime : 20;
   //speedTime = speedTime || 20;
   clearInterval(obj.timer);
   obj.timer = setInterval(function(){
    //如何实现当点击向右时就向右走，点击向左走时向左走
    //向右走是+5
    //向左走是-5
    //定义一个speed,这个speed是+5和-5的关系
    //向右target = 500 当前值 < 500  target- 当前值>0向右走
    //向左target = 0  当前值 > 0  target- 当前值<0向左走
    
    //bug：当目标值不是一个5的倍数的时候，永远到达 不了目标 值
    //运动到最后的两个值
    //终值505 目标值：503
    //target - obj.offsetLeft最后一次执行的时候两个值的差值的绝对值一定是一个小于5的值
    var speed = target - obj.offsetLeft > 0 ? 5 : -5;
    //if(obj.offsetLeft == target){
    if(Math.abs(target - obj.offsetLeft) < 5){
     //最后会有5以内的像素差
     //在最后 的一次可以 让其强制性到达 目标 值
     obj.style.left = target + "px";
     clearInterval(timer);
    }else{//先判断后赋值
     obj.style.left = obj.offsetLeft + speed + "px";
    }
   },speedTime);
  }
 </script>