JavaScript运动框架 链式运动到完美运动(五)
基于前几篇的运动框架基础,本文主要讲解一下链式运动,就是运动完后接着再运动,比如很多网站中,一个方框的出现和退出:出现时先变宽再变高,退出时先变矮再变窄退出!
之前的模型是:
startMove(obj,json);
现在改为:
startMove(obj,json,fn);
也就是在第一次运动结束的时候执行fn();fn是传过来的一个参数,这个参数是个函数,定时器清理之后手动运行fn();如果想采用链式运动,那就是在fn中再调用startMove(obj,json,fn),再在里面的fn中调用startMove(obj,json,fn),可以一直玩下去
运动框架(五):链式运动到完美运动 div{ width:100px; height:100px; background:orange; margin:10px; float:left; }
最后提取出来的完美运动框架如下,motionFrame.js:
functiongetStyle(obj,attr){ if(obj.currentStyle){ returnobj.currentStyle[attr]; }else{ returngetComputedStyle(obj,null)[attr]; } } functionstartMove(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ varbStop=true; for(varattrinjson){ varcur=0; if(attr==='opacity'){ cur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ cur=parseInt(getStyle(obj,attr)); } if(cur!=json[attr]){ bStop=false; } varspeed=(json[attr]-cur)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); cur+=speed; if(attr==='opacity'){ obj.style.filter='alpha(opacity:'+cur+')'; obj.style.opacity=cur/100; }else{ obj.style[attr]=cur+'px'; } } if(bStop){ clearInterval(obj.timer); if(fn)fn(); } },30); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。