由任意值运动框架——>链式运动框架(start(obj,attr,iTarget,fnEnd),多添加了一个函数,用来在对象运动完成后执行该函数,达到分层次运动的效果;)——>完美运动框架;
完美运动框架与之前运动框架的区别与完善:
1,运用了json,即json{attr:iTarget},用for in遍历json,使对象的每一个属性能够同步运动。
2,用var bStop=true;来判断对象的每一个属性是否都达到了目标点,如果有一个不达到,则bStop=false;当全部达到时,关闭定时器;
var bStop=true;
for(```in json){
timer=setInterval(function(){
```````运动函数主体;
if(iCur != json[attr]){
bStop=false;
}
},30)
}
if(bStop){
clearInterval(timer);
if(fnEnd){
fnEnd();//如果函数存在,则执行该函数;
}
}
完美运动框架js:
function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } } //startMove(oDiv, { 400, height: 400}) function startMove(obj, json, fnEnd) { clearInterval(obj.timer); obj.timer=setInterval(function (){ var bStop=true; //假设:所有值都已经到了 for(var attr in json) { var cur=0; if(attr=='opacity') { cur=Math.round(parseFloat(getStyle(obj, attr))*100); } else { cur=parseInt(getStyle(obj, attr)); } var speed=(json[attr]-cur)/6; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(cur!=json[attr]) bStop=false; if(attr=='opacity') { obj.style.filter='alpha(opacity:'+(cur+speed)+')'; obj.style.opacity=(cur+speed)/100; } else { obj.style[attr]=cur+speed+'px'; } } if(bStop) { clearInterval(obj.timer); if(fnEnd)fnEnd(); } }, 30); }