原生jsパッケージの運動フレーム、move-2.0.js


function getStyle(obj,name){      //      
  return obj.currentStyle?obj.currentStyle[name]:getComputedStyle(obj,false)[name];
}


//    ,json       ,options        
function startMove(obj,json,options){       

  var start={};   //     
  var dis={};

  options=options || {};          //option     
  options.time=options.time || 700;
  options.type=options.type || 'ease-out';

  for(var name in json){
    if(name=='opacity'){        //        
      start[name]=Math.round(parseFloat(getStyle(obj,name)))*100;
    }else{
      
      switch(name){       //        left top ,      left top 
        case 'left':
        start[name]=obj.offsetLeft;
        break;
        case 'top':
        start[name]=obj.offsetTop;
        break;
        default:
        start[name]=parseInt(getStyle(obj,name));
      }
    }
    
    dis[name]=json[name]-start[name];
  }

  var count=parseInt(options.time/30);    //     
  var n=0;    //    ,     n 

  clearInterval(obj.timer);       // timer  obj ,               

    obj.timer=setInterval(function(){

    obj.style.margin=0;       //  margin     

    n++;

    for(var name in json){

      switch(options.type){
        case 'linear':      //  
        var cur=start[name]+dis[name]*n/count;
        break;
        case 'ease-in':     //  
        var a=n/count;
        var cur=start[name]+dis[name]*(a*a*a);
        break;
        case 'ease-out':    //  
        var a=1-n/count;
        var cur=start[name]+dis[name]*(1-a*a*a);
        break;
      }


      if(name=='opacity'){
        obj.style.opacity=cur/100;
        obj.style.filter='alpha(opacity='+cur+')';
      }else{
        obj.style[name]=cur+'px';
      }
      
    }
    if(n==count){               //             
      clearInterval(obj.timer);
      options.end && options.end();
    }

    },30);
}