網(wǎng)上也有很多封裝好的JS動(dòng)畫庫(kù)，但大多因?yàn)楣δ苓^(guò)于完善，而至于代碼量大動(dòng)輒過(guò)千行，不宜在小項(xiàng)目中使用。這里自己封裝了一個(gè)很輕量的動(dòng)畫庫(kù)，主要功能都已實(shí)現(xiàn)。難免有疏漏之處，還請(qǐng)大家多多指教。

　　這里先說(shuō)明一下功能和用法，以及注意點(diǎn)，隨后是一個(gè)很簡(jiǎn)單的可運(yùn)行示例。

用法及注意事項(xiàng)：
anim(elemId, cssObj, time, animType, funObj)
參數(shù)說(shuō)明：
elemId （必選）需要施加動(dòng)畫效果的元素id
cssObj （必選）動(dòng)畫結(jié)束時(shí)的樣式，對(duì)象類型，鍵值對(duì)形式，
其中鍵是能直接用在JS中的“駝峰”形式的css屬性，而不是原來(lái)的css屬性。
例如：{ marginLeft: '200px', top: '200px', borderWidth: '8px'}
time （必選）動(dòng)畫持續(xù)時(shí)間（單位ms）
animType （可選）默認(rèn)為線性變化，代碼里的Tween類型包含可選的其他參數(shù)
funObj （可選）如果要此選項(xiàng)，需要加入開始和結(jié)束時(shí)候執(zhí)行的函數(shù)。
形如：{ el為elemId所指向的元素
start: function (el) { el.innerHTML = 'start!'; },
complete: function (el) { el.innerHTML = 'Completed!'; }
}

幾點(diǎn)注意事項(xiàng)：
1、沒(méi)有做低版本瀏覽器兼容，支持IE8+、FF、chrome、safari、opera
2、注意用能直接用在JS中的“駝峰”形式的css屬性（本來(lái)應(yīng)把css轉(zhuǎn)“駝峰”形式，
但是基本所有JS程序員都能直接寫出駝峰形式，所以沒(méi)轉(zhuǎn)）
3、如果需要把動(dòng)畫應(yīng)用到絕對(duì)定位（position:absolute;）元素上，
需要注意在這些元素上設(shè)置CSS的方法。
例如：設(shè)置top和marginTop，對(duì)于絕對(duì)定位元素，應(yīng)該設(shè)置top而不是marginTop，
更不應(yīng)該將二者混合使用，因?yàn)槎叩膮⒖键c(diǎn)是不一樣的，同時(shí)設(shè)置很容易造成混亂。
所以，這里也不支持同時(shí)設(shè)置二者。
其他相似的同理（left和marginLeft、right和marginRight）
同時(shí)設(shè)置top和bottom、left和right也不支持。
4、引用了Tween緩動(dòng)算法，支持線性、漸入漸出等多種變化方式。
5、“動(dòng)畫隊(duì)列”功能尚未實(shí)現(xiàn)，此版本為初級(jí)版本，疏漏之處還請(qǐng)多多指正。

最新評(píng)論