运动框架改进之完美运动框架 -纯js


function startMove( obj, json, fn ) {

 clearInterval( obj.timer );

 obj.timer = setInterval(function(){

  var allStop = true; //检测本轮是否所有的值都到达目标

  //1.取当前值

  for(var attr in json) {

   var iStyle = 0;

   if(attr == 'opacity') {

    iStyle = parseInt(parseFloat(getStyle(obj,'opacity'))*100);

   } else {

    iStyle = parseInt(getStyle(obj,attr));

   }

  //2.算速度

   var iSpeed = (json[attr] - iStyle)/8;

   iSpeed = iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

  //3.检测结束

   if(iStyle != json[attr]) {

    allStop = false;

   }

   

   if(attr == 'opacity') {

    obj.style[attr] = (iStyle+iSpeed)/100;

    obj.style.filter = 'alpha(opacity:'+(iStyle+iSpeed)+')';

   } else {

    obj.style[attr] = iStyle + iSpeed +'px';

   }

  }

  //所有的值都到达目标的时候,在关闭定时器

  if(allStop) {

   clearInterval(obj.timer);

   if(fn) {

    fn();

   }

  }

 }, 30);

}

function getStyle(obj,attr) {

 if( obj.currentStyle ) {

  return obj.currentStyle[attr];

 } else {

  return getComputedStyle(obj, false)[attr];

 }

}