js实现页面各种运动效果总结

匀速运动：
解决速度问题 : 速度在函数体内部完成
var speed = target-obj.offsetLeft > 0 ? 正值 ： 负值

缓冲运动：
解决速度问题 让运动的物体达到目标值

var speed = (target - obj.offsetLeft)/10;  //速度随着时间变化而变化
   speed = speed > 0 ? Math.ceil( speed )  //对速度进行取值
   Math.floor( speed );

多物体运动：
让每一个运动的物体拥有自己的定时器 定时器独立
把定时器作为对象的属性 让定时器独立

链式运动
上一个动作结束 进入到下一个动作
解决 ： 在运动函数上加一个参数，参数代表回调函数

完美运动：
//obj 操作的元素
//json 参数为 要操作的属性和目标值 键–属性 值–目标值
//callback 回调函数
var flag;//开关变量 当值为true时，表示 所有的动作都执行完毕 ，可以关掉定时器 ，也可以进入下一个动作

function startMove(obj,json,callback){//attr表示要操作的属性
   clearInterval(obj.timer);
   obj.timer = setInterval(function(){
      flag = true;
      var current = 0;
      for(var attr in json){
        if( attr =="opacity" ){//操作透明度
           //获取透明度的样式值
           current =parseFloat( getStyle(obj,attr) )*100;
        }else{
           current =parseInt( getStyle(obj,attr)  ) ;//接收当前元素的样式值
        }
        var speed = (json[attr] - current)/10;
        speed = speed>0?Math.ceil(speed) :Math.floor(speed);
        if( current != json[attr] ){//动作完成后的条件 
           flag = false;//当目标值和当前的样式值 不相等时  ， 将开关变量值关闭 false
        }
        //定时器开启时  不停的改变元素的样式
        if( attr == "opacity" ){
           obj.style.opacity = (current+speed)/100;
        }else{
           obj.style[attr] = current + speed + "px";
        }
      }
      
      //循环结束后判断flag的值，当值为true时，表示 所有的动作都执行完毕 ，可以关掉定时器 ，也可以进入下一个动作
      if( flag ){
        clearInterval(obj.timer);
        //上一个动作完成后 就开启下一个动作的执行    调用callback
        //判断 callback是否存在 存在就调用
        if( callback ){
           callback();
        }
      }
      
   },30)
}
//获取样式值函数
function getStyle(obj,attr){
   if( window.getComputedStyle ){
      return window.getComputedStyle( obj,false )[attr];
   }else{
      return obj.currentStyle[attr];
   }
}