Javascript 链式运动框架——逐行分析代码，让你轻松了解运动的原理
所谓链式运动，就是一环扣一环。我们的很多运动实际上来说指的就是分阶段的，第一个阶段动完，下个阶段开始动。
这个链式运动框架就是用来处理这些问题的。
我们先来看下之前的运动框架,以下是Javascript 代码
function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; } } function startMove(obj, attr, iTarget) { clearInterval(obj.time); obj.time = setInterval(function() { var cur = 0; if (attr == 'opacity') { cur = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { cur = parseInt(getStyle(obj, attr)); } var speed = (iTarget - cur) / 6; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (cur == iTarget) { clearInterval(obj.time); } else { if (attr == 'opacity') { obj.style.filter = 'alpha(opacity=' + cur + speed + ')'; obj.style.opacity = (cur + speed) / 100; } else { obj.style[attr] = cur + speed + 'px'; } } }, 30); }
实际上来说他就是相当于一个阶段型的运动框架，一个物体运动到某个地方就停下来了。
那么怎么能实现链式运动呢？
我们在加一个参数fnEnd ,这个是个函数，他会在运动结束的时候被调用。
当然这个函数可以传可以不传，所以需要做个判断。只有当传入的时候在调用即可。
原理就是： 一个运动完成 在开始下次的运动。
这样就能够完成链式运动，简单吧，让我们看看代码。
<style type="text/css"> #div1{width: 100px; height: 100px; background: red;} </style>
<script src="js/move_lianshi.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById("div1"); oDiv.onmouseover=function(){ startMove(oDiv,'width',300,function(){ startMove(oDiv,'height',300); }); }; } </script> </head> <body> <div id="div1"> </div> </body>
Javascript:
function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; } } function startMove(obj, attr, iTarget,fnEnd) { clearInterval(obj.time); obj.time = setInterval(function() { var cur = 0; if (attr == 'opacity') { cur = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { cur = parseInt(getStyle(obj, attr)); } var speed = (iTarget - cur) / 6; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (cur == iTarget) { clearInterval(obj.time); if(fnEnd)fnEnd(); } else { if (attr == 'opacity') { obj.style.filter = 'alpha(opacity=' + cur + speed + ')'; obj.style.opacity = (cur + speed) / 100; } else { obj.style[attr] = cur + speed + 'px'; } } }, 30); }
这样Div就会先变宽在变高。
我们现在这个运动框架还是会有局限性，那是什么呢？
那么就是不能同时运动，也就是说我想让Div 同时变大变宽 那又怎么办呢？
在下一次更新的时候，我们会解决这个问题，并且推出一个完美的运动框架，这个运动框架能够支持大多数的运动。
敬请期待~