1 function animate1(obj,data,rate,fn){//運(yùn)動(dòng)對象，運(yùn)動(dòng)數(shù)據(jù)，[運(yùn)動(dòng)速度]，[回調(diào)函數(shù)]2 ? ? //遍歷獲取樣式屬性3 ? ? for(var key in data){4 ? ? ? ? //通過閉包將key私有化5 ? ? ? ? (function(k){6 ? ? ? ? ? ? /*7 ? ? ? ? ? ? ? ? 獲得樣式寬高等會(huì)帶有單位px需要處理掉，8 ? ? ? ? ? ? ? ? 如果使用parseInt，當(dāng)傳入opacity為小數(shù)時(shí)會(huì)變?yōu)?，所以使用parseFloat9 ? ? ? ? ? ? */10 ? ? ? ? ? ? var cur = parseFloat( (obj.currentStyle || getComputedStyle(obj,null) )[k]);1112 ? ? ? ? ? ? //對特殊值進(jìn)行處理13 ? ? ? ? ? ? if(k == "opacity"){14 ? ? ? ? ? ? ? ? //透明度當(dāng)前值和目標(biāo)值放大100倍，防止小數(shù)被舍去15 ? ? ? ? ? ? ? ? cur *= 100;16 ? ? ? ? ? ? ? ? data[k] *= 100;17 ? ? ? ? ? ? }1819 ? ? ? ? ? ? //當(dāng)前值和目標(biāo)值相等，直接返回20 ? ? ? ? ? ? if(cur == data[k]){ return; }2122 ? ? ? ? ? ? //通過自身名字定義定時(shí)器,解決每個(gè)運(yùn)動(dòng)共用一個(gè)定時(shí)器，造成清除其他運(yùn)動(dòng)定時(shí)器的問題23 ? ? ? ? ? ? clearInterval(obj[k +'timer']);2425 ? ? ? ? ? ? obj[k+'timer'] = setInterval(function(){2627 ? ? ? ? ? ? ? ? //當(dāng)前 += （目標(biāo)-當(dāng)前）*比率 ?比率不傳則默認(rèn)0.228 ? ? ? ? ? ? ? ? cur += (data[k] - cur) * (rate || 0.2);2930 ? ? ? ? ? ? ? ? if(Math.round(cur) == data[k]){31 ? ? ? ? ? ? ? ? ? ? //如果到達(dá)目標(biāo)值清除定時(shí)器,同步數(shù)據(jù)32 ? ? ? ? ? ? ? ? ? ? clearInterval(obj[k+'timer']);33 ? ? ? ? ? ? ? ? ? ? cur=data[k];3435 ? ? ? ? ? ? ? ? ? ? //回調(diào)，將定時(shí)器賦值為0，遍歷每個(gè)定時(shí)器的值相加，如果所有定時(shí)器相加都為0，說明運(yùn)動(dòng)已經(jīng)全部完成，執(zhí)行回調(diào)函數(shù)36 ? ? ? ? ? ? ? ? ? ? obj[k + "timer"] = 0;37 ? ? ? ? ? ? ? ? ? ? var bl = 0;38 ? ? ? ? ? ? ? ? ? ? for(var key in data){39 ? ? ? ? ? ? ? ? ? ? ? ? bl += obj[key + "timer"];40 ? ? ? ? ? ? ? ? ? ? }41 ? ? ? ? ? ? ? ? ? ? if(bl == 0){42 ? ? ? ? ? ? ? ? ? ? ? ? //判斷是否傳入回調(diào)函數(shù)43 ? ? ? ? ? ? ? ? ? ? ? ? fn && fn.call(obj);44 ? ? ? ? ? ? ? ? ? ? } ? ?//?。。。。。。?！這里的fn&&fn.call(obj) 不懂，返回的是false的fn或fn.call(obj)還是布爾值false？45 ? ? ? ? ? ? ? ? }4647 ? ? ? ? ? ? ? ? //使用數(shù)據(jù)時(shí)判斷特殊值48 ? ? ? ? ? ? ? ? if(k == "opacity"){49 ? ? ? ? ? ? ? ? ? ? //opacity具有兼容問題，ie8以下使用filter:alpha(opacity:100)50 ? ? ? ? ? ? ? ? ? ? obj.style.opacity = cur / 100;51 ? ? ? ? ? ? ? ? ? ? obj.style.filter = "alpha(opacity="+ cur +")";52 ? ? ? ? ? ? ? ? }else{53 ? ? ? ? ? ? ? ? ? ? obj.style[k] = cur + "px";54 ? ? ? ? ? ? ? ? }55 ? ? ? ? ? ? },30)56 ? ? ? ? })(key);57 ? ? }58 }