-
重要查看全部
-
currentStyle 針對IE瀏覽器。getComputedStyle 針對firefox瀏覽器
查看全部 -
https://github.com/cbat01/js-Animation-effect
做運(yùn)動時要做向上與向下取整
speed = speed >0? Math.ceil(speed):Math.floor(speed);
查看全部 -
對于同時進(jìn)行的運(yùn)動，停止所有動畫的一個判定條件。
查看全部 -
同時運(yùn)動的關(guān)鍵在于，使用遍歷，給dom加上不一樣的定時器。
查看全部 -
for in ----------------多用于遍歷json對象。
對于復(fù)雜，多參數(shù)的函數(shù)，我們可以考慮把入?yún)⒌慕Y(jié)構(gòu)改為json
查看全部 -
鏈?zhǔn)竭\(yùn)動的關(guān)鍵在于：每次運(yùn)動函數(shù)執(zhí)行完成之后返回相應(yīng)的dom對象。
好吧，現(xiàn)在還有個新的方法，在原有的基礎(chǔ)上增加回調(diào)函數(shù)。（這種方法在遇到多流程的動畫的時候，要寫回調(diào)地獄。盡量使用1,如果一定要使用2請使用promise）
查看全部 -
針對IE設(shè)置透明度： obj.style.filter = "alpha(opacity: 100)"
針對火狐/chrome瀏覽器：?obj.style.opacity = 0.2
查看全部 -
抽象，是形成組件的重要思想。讓你的函數(shù)盡量干凈。保持DTY原則。
查看全部 -
對于要使用JS操作CSS的值，注意其他樣式是否會導(dǎo)致我們需要操作的CSS屬性值的改變。
獲取屬性兼容性JS代碼段：
? ? function attr(obj, attr) {
????? ? if(obj.currentStyle){
????????????return obj.currentStyle[attr];?
????????}else{
????????????return obj.getComputedStyle(obj, false)[attr]
????????}
????}
查看全部 -
對于多物體運(yùn)動，在目前的基礎(chǔ)上，可以對多物體的方法進(jìn)行一個抽離。也就是each（）函數(shù)。
其余部分和單物體動畫沒啥區(qū)別。
查看全部 -
對于使用定時器來模擬動畫效果的情況下，一定要記得在每次模擬之前清除舊的定時器。
查看全部 -
緩沖運(yùn)動的關(guān)鍵在于，速度隨當(dāng)前狀態(tài)與目標(biāo)狀態(tài)之間的差值呈線性關(guān)系，但是速度并不是線性的，而是一個曲線（類比火車?？浚疖噯樱?/p>
對于在JS內(nèi)修改了CSS的數(shù)值，一定要對數(shù)值進(jìn)行一個處理（CSS的屬性value不支持小數(shù)點）。
speed = speed>0?Math.ceil(speed):Math.floor(speed);
查看全部 -
運(yùn)動框架實現(xiàn)思路
速度（改變值left,right,width,height,opacity）
緩沖運(yùn)動
多物體運(yùn)動
任意值變化
鏈?zhǔn)竭\(yùn)動
同時運(yùn)動
查看全部 -
setInterval（函數(shù)，毫秒） 定時器
onmouseover 鼠標(biāo)移入
onmouseout 鼠標(biāo)移出
object.style.left ? 修改left
object.offsetLeft 當(dāng)前的left
? object.style.left=object.offsetLeft+num'px'
clearInterval 清除定時器
記得一開始執(zhí)行函數(shù)的時候應(yīng)該清空定時器
查看全部
舉報