大家一听这名字就知道，有了这套框架 网上的效果基本都是可以实现的。实际上之前的运动框架还是有局限性的，就是不能让好几个值一块运动。
那这个问题怎么解决呢？ 我们先来看看之前的运动框架
function startMove(obj,attr,iTarget) {
clearInterval(obj.time);
obj.time = setInterval(function() {
var cur = 0;
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);
}
怎么修改呢？ 实际上很简单， 在过去的框架中，你每一次只能传一个样式，和一个值。那么现在把这些改成一个json对象。相信大家就明白了。
我们调用的时候就是startMove(oDiv,{width:200,height:200}); 如果需要的话就在加上回调函数。那么我们具体看看代码是怎么修改的。
var bStop=true; // 假设：所有的值都已经到了
for(var name in json)
{
var iTarget=json[name]; // 目标点
//处理透明度，不能使用parseInt否则就为0了
if(name=='opacity')
{
// *100 会有误差 0000007 之类的 所以要用 Math.round() 会四舍五入
var cur=Math.round(parseFloat(getStyle(obj,name))*100);
}
else
{
var cur=parseInt(getStyle(obj,name)); // cur 当前移动的数值
}
var speed=(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; //ff chrome
}
else
{
obj.style[name]=cur+speed+'px';
}
// 某个值不等于目标点
if(cur!=iTarget)
{
bStop=false;
}
}
// 都达到了目标点
if(bStop)
{
clearInterval(obj.timer);
if(fnEnd) //只有传了这个<a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>才去<a href="https://www.jb51.cc/tag/diaoyong/" target="_blank" class="keywords">调用</a>
{
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,iTarget) 任意值 startMove(obj,iTarget,fn) 链式运动 startMove(obj,fn) 完美运动
O(∩_∩)O谢谢 ~
原文链接：https://www.f2er.com/js/56121.html