本文，是接著上基於勻速運動的例項講解(側邊欄,淡入淡出)繼續的，在這篇文章的最後，我們做了2個小例項：側邊欄與改變透明度的淡入淡出效果，本文我們把上文的animate函式，繼續改造，讓他變得更加的通用和強大：
1，支援多個物體的運動
2，同時運動
3，順序運動
這三種運動方式也是jquery中animate函式支援的
一、animate函式中怎麼區分變化不同的樣式？
上文中，側邊欄效果 用的animate函式 改變的是left值
function animate(obj, target, speed) else
}, 30);
}淡入淡出效果 用的animate函式 改變的是透明度
function animate(obj, target, speed) else
}, 30);
}而我們封裝的函式，要變成通用的，首先面臨的問題就是 這個函式要同時支援left值和透明度的變化，更通用ewprjvljqz的做法應該是要支援所有的樣式變化，比如輪播功能，他有左右滑動，也有上下滑動。
我們可以在獲採樣式和改變樣式的時候，做一下判斷就可以了，判斷分2類就能達到目的，因為其他樣式( margin, left, top, right, font-size等等 )都是px，而透明度沒有px單位
function animate(obj, attr, target, speed) else
if (cur == target) else else
} }, 30);
}合併之後的animate相比之前多了乙個引數attr, 這個引數就是變化的樣式，obj: 變化的物件， target: 樣式需要變化到的目標值. speed: 樣式每次變化的大小
如：oimg.onmouseover = function ()
oimg是獲取到的物件. 這裡各引數意思如下：
this：當前物件
opacity: 變化的樣式是透明度
100: 滑鼠移到上時，透明度變成100
10: 透明度每次在原來的基礎上加10
合併的運動 - by ghostwu
分享到上述就是完整的**例項。
當你分別測試這兩個功能的時候：
移動到上然後移出來
移動到分享到，然後移出來
這樣是沒有問題的
如果你這樣測試：
移動到 分享到，然後迅速又移動到上， 這個時候你會發現 分享到 停下來了，這就不符合邏輯了! 按道理來說，滑鼠移動到上，相當於觸發了 「分享到」 的mouseout( 滑鼠移出事件 )，那麼 "分享到" 這個時候要隱藏，並不是停止。 為什麼會這樣呢？因為這兩個運動共享了乙個定時器，當滑鼠移動到上，開啟定時器的時候，把「分享到」的定時器給停了。那麼再做多物體運動的時候，我們就要把定時器拆分，每個物件都要有乙個定時器，怎麼做呢？ 非常簡單，不要定義乙個簡單的timer變數，我們只要把timer加在obj物件上，那麼每個物件都有乙個timer屬性，就達到定時器的分離效果了
修改之後的完整**如下，請自行展開：
document
分享到至此，我們就完成了多物體運動與不同樣式的修改
二、讓animate函式支援多個樣式同時改變
比如：obox.onmouseover = function(), 10 );
}obox是乙個div元素，animate各引數的意思：
this: 當前div元素
: 把寬度變成500, 高度變成400，這兩個樣式要在同一時間完成，
10: 樣式每次在原來的基礎上變化10（如width初始值200--> 210, 220, 230..ewprjvljqz...）
完整的同時運動變化 **：
document
請自行展開這段**，這段**能夠同時運動，但是有乙個問題：
div的初始寬度與高度（ width : 200, height : 200）
變化步長一樣( 10 )
變化時間一樣( 每30毫秒變化一次 )
目標( width: 500, height : 400 )
你能想到什麼問題嗎？( 兩個人在同一起跑線上，速度一樣， 時間一樣，但是要同時到達不同的目標，乙個500, 乙個400 )
答案是很明顯的，肯定是目標近的( height : 400 )那個先到達，然後把物件上的定時器關了，另乙個目標更遠的( width: 500 )肯定到達不了
你可以在這句**下面，輸出當前的值和目標值：
var target = attr[key];
console.log( key, cur, target );
輸出來的結果是：
從上圖可以看出，height已經達到了400px，但是width停在了410px,為什麼不是400px ? 因為width = 400的時候， 就是( cur == 500 ) 相當於( 400 == 500 ) 不成立，所以執行了else語句，width = cur + 10 = 400 + 10 = 410，然後height到達400px停止了定時器，所以width停在了410px.
那麼我們怎麼解決這個問題呢？
其實也好辦，就是height = 400的時候 不要把定時器關了，應該等width = 500的時候再關閉定時器，不就在同一時間，完成了同時到達目標的效果嗎？
修改後的**如下：
document
宣告乙個變數，每次變化完一次( width, height )樣式 把bflag = true， 只要在for迴圈中有乙個沒有到達目標，bflag的值都是false，這樣就不會關閉定時器。當兩個都到達目標，才關閉定時器.
三、順序運動
如樣式變化，按順序來，不是同時變化， 如：
obox.onmouseover = function(), 10, function(), 10 );
} );
}當把width變成500px的時候，如果傳遞了**函式， 再接著執行**函式裡面的運動
修改後的完整**：
通用的勻速運動框架 - by ghostwu
本文標題: 打造通用的勻速運動框架(例項講解)
本文位址:
JS勻速運動
所謂的勻速運動就是速度不變的,比如無縫滑動展示就是勻速運動.這種運動的特點就是簡單,呆板,不炫麗.例子 div勻速運動.效果如圖 要注意的地方 1.有些時候不能精確的停在某個位置,所以當距離目標位置很近的時候直接強行把它移到到目標位置就可以了.2.開啟定時器的時候一定要先清除原來的定時器,不然速度會...
js勻速運動
勻速運動 封裝勻速運動原理 設定定時器，將傳入的ele,設定乙個速度，使用定時器獲取當前時間的乙個位置，加上速度值，給回節點，當節點到達目標位置，判斷給他清除定時器。github 下面封裝好的勻速運動的 勻速運動 function getstyle obj,attr function dogo ob...
Lerp 實現勻速運動
lerp函式在mathf，vector3,等類中都有，用法都類似，作用都是按照百分比取得從乙個值過度到另外乙個值的中間值。下面說的內容針對各中類的lerp函式都是通用的。update 說是 誤用 其實也不完全正確，這種用法是可以工作的，但是常常不是大家的真正需求，很多時候大家使用lerp都是想達到勻...