3.6 运动框架 时间版

时间版运动框架 

functionanimation(dom,target,time,callBack){

var start = {};//存放dom样式的初始值

var speed = {};//存放dom样式的速度

for(var attr in target){

start[attr] = parseFloat(getStyle(dom,attr));

speed[attr] = (target[attr] - start[attr])/(time*1000);

}

var startTime = new Date(); //获取dom运动的初始时间

var timer = setInterval(function(){ //回调函数的作用是让dom元素运动

var movedTime = new Date(); //获取最新的时间

var _t = movedTime - startTime; //计算dom元素运动的时间差 单位是ms

for(var attr in target){

if(attr==='opacity'){

dom.style[attr] = start[attr]+speed[attr]*_t;

}else{

dom.style[attr] = start[attr]+speed[attr]*_t+'px';

}

}

if(_t/1000>=time){

clearInterval(timer);

for(var attr in target){

if(attr==='opacity'){

dom.style[attr] = target[attr];

}else{

dom.style[attr] = target[attr]+'px';

}

};

callBack&&callBack.call(dom,start,time) //通过this修改了指向，指向dom

}

},16)

//获取元素的初始值

function getStyle(dom,attr){

if(dom.currentStyle){ //如果是IE8以下

return dom.currentStyle[attr]

}else{ //如果是IE8以上

return window.getComputedStyle(dom,null)[attr]

}

}

}

 

 

animation(oBox,{

width:250,

height:300,

left:100,

top:250,

opacity:1

},1,function(dom,start,time){ //这个回调函数的功能是回到初始位置

animation(dom,start,time)

})