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