js代码实现匀速运动

封装js方法在工具包
linear 线性的 直线的 (匀速)

//js部分
var tools = {
        /*匀速运动到指定终点
        *obj   运动的DOM元素
        *attr   运动的属性名称
        *end  运动的终点值(起点获取当前的 getstyle 获取css中的)
        *time  运动的时间
        */
        linearMove : function(obj,attr,end,time) {
               // 每次执行清掉上一次的定时器,用obj对象添加属性记录
                clearInterval(obj.timer);
                //起点
                var start = parseInt(this.getStyle(obj,attr));
                //this 指tools  
          //getstyle 获取窗口风格参数(css可以)(参数1,获取对象元素。参数2,获取对象属性)
                //运动的距离
                var distance = end - start;
                //运动速度 = 距离除以步数,定时器实现一步
                //计算步数 及总的时间定时器需要多少步走完
//定时器在30-60ms之间合适  如卡顿具体效果调
                var steps = parseInt(time/20);
                //速度
                var speed = distance/steps;
                //运动部分 定时器 开关
                obj.timer = serInterval(function() {//obj对象添加属性的方式存timer
                  start += speed;
                  obj.style[attr] = start + "px";
                  //结束条件 速度在上面计算的是固定的 则到终点的距离小于单步speed
                   //运动方向不同 speed可能是负值 距离差值也会是 Math.abs
                  if(Math.abs(end - start) < Math.abs(speed))//绝对值啊{
                             //关定时器停止运动
                              clearInterval(obj.timer);
                              //因为有parseInt 终点值会有极小偏差 直接在关定时器时重置     
                              obj.style[attr] = end + "px";    
                            }
                  },20)
        }
}
 
 

        

你可能感兴趣的:(js代码实现匀速运动)