Javascript 完美运动框架(逐行分析代码，让你轻松了运动的原理)
大家一听这名字就知道，有了这套框架网上的效果基本都是可以实现的。实际上之前的运动框架还是有局限性的，就是不能让好几个值一块运动。
那这个问题怎么解决呢？我们先来看看之前的运动框架
functiongetStyle(obj,name){
if(obj.currentStyle){
returnobj.currentStyle[name];
}else{
returngetComputedStyle(obj,null)[name];
}
}
functionstartMove(obj,attr,iTarget){
clearInterval(obj.time);
obj.time=setInterval(function(){
varcur=0;
if(attr=='opacity'){
cur=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
cur=parseInt(getStyle(obj,attr));
}
varspeed=(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);
}
怎么修改呢？实际上很简单，在过去的框架中，你每一次只能传一个样式，和一个值。那么现在把这些改成一个json对象。相信大家就明白了。
我们调用的时候就是startMove(oDiv,{width:200,height:200});如果需要的话就在加上回调函数。那么我们具体看看代码是怎么修改的。
functionstartMove(obj,json,fnEnd)
{
varMAX=18;
//每次调用就只有一个定时器在工作(开始运动时关闭已有定时器)
//并且关闭或者开启都是当前物体的定时器，已防止与页面上其他定时器的冲突，使每个定时器都互不干扰
clearInterval(obj.timer);
obj.timer=setInterval(function(){
varbStop=true;//假设：所有的值都已经到了
for(varnameinjson)
{
variTarget=json[name];//目标点
//处理透明度，不能使用parseInt否则就为0了
if(name=='opacity')
{
//*100会有误差0000007之类的所以要用Math.round()会四舍五入
varcur=Math.round(parseFloat(getStyle(obj,name))*100);
}
else
{
varcur=parseInt(getStyle(obj,name));//cur当前移动的数值
}
varspeed=(iTarget-cur)/5;//物体运动的速度数字越小动的越慢/5:自定义的数字
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX;
if(name=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';//IE
obj.style.opacity=(cur+speed)/100;//ffchrome
}
else
{
obj.style[name]=cur+speed+'px';
}
//某个值不等于目标点
if(cur!=iTarget)
{
bStop=false;
}
}
//都达到了目标点
if(bStop)
{
clearInterval(obj.timer);
if(fnEnd)//只有传了这个函数才去调用
{
fnEnd();
}
}
},20);
}
为什么会有bstop的假设呢？
其实如果我这样调用startMove(oDiv,{width:101,height:200});宽度变成101已经完成运动了，高度没有到，但是我们可能已经关闭了当前的定时器。运动已经结束了，就会出现一个特殊情况下的bug。解释一下：
实际上来说，需要所有的运动都到了才关闭定时器，反过来说，如果没有不到的，那就关闭。在程序上就是定义一个布尔值，一开始为true，假设
所有的值都已经到了，如果说有一个值不等于目标点，bstop为false。在整个循环结束后，bstop为ture就说明所有运动都完成了，这个时候就关闭定时器。
那么这个运动框架基本已经完成了，适用css2不适用css3。
总结：
运动框架的演变过程
startMove(iTarget)运动框架
startMove(obj,iTarget)多物体
startMove(obj,attr,iTarget)任意值
startMove(obj,attr,iTarget,fn)链式运动
startMove(obj,json,fn)完美运动
O(∩_∩)O谢谢~