大家一聽這名字就知道,有了這套框架 網上的效果基本都是可以實現的。實際上之前的運動框架還是有局限性的,就是不能讓好幾個值一塊運動。
那這個問題怎麼解決呢? 我們先來看看之前的運動框架
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); }
怎麼修改呢? 實際上很簡單, 在過去的框架中,你每一次只能傳一個樣式,和一個值。那麼現在把這些改成一個json對象。相信大家就明白了。
我們調用的時候就是startMove(oDiv,{width:200,height:200}); 如果需要的話就在加上回調函數。那麼我們具體看看代碼是怎麼修改的。
function startMove(obj, json, fnEnd) { var MAX=18; //每次調用就只有一個定時器在工作(開始運動時關閉已有定時器) //並且關閉或者開啟都是當前物體的定時器,已防止與頁面上其他定時器的沖突,使每個定時器都互不干擾 clearInterval(obj.timer); obj.timer=setInterval(function (){ 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) //只有傳了這個函數才去調用 { 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謝謝 ~