「js高手之路」打造通用的勻速運動框架

本文我們把上文的animate函數，繼續改造，讓他變得更加的通用和強大：

1，支持多個物體的運動

2，同時運動

3，順序運動

這三種運動方式也是jquery中animate函數支持的

一、animate函數中怎麼區分變化不同的樣式？

上文中，側邊欄效果 用的animate函數 改變的是left值

淡入淡出效果 用的animate函數 改變的是透明度

而我們封裝的函數，要變成通用的，首先面臨的問題就是 這個函數要同時支持left值和透明度的變化，更通用的做法應該是要支持所有的樣式變化，比如輪播功能，他有左右滑動，也有上下滑動。

我們可以在獲取樣式和改變樣式的時候，做一下判斷就可以了，判斷分2類就能達到目的，因為其他樣式( margin, left, top, right, font-size等等 )都是px，而透明度沒有px單位。

合併之後的animate相比之前多了一個參數attr, 這個參數就是變化的樣式，obj: 變化的對象， target: 樣式需要變化到的目標值. speed: 樣式每次變化的大小

如：

oImg.onmouseover = function () {

animate(this, "opacity", 100, 10);

}

oImg是獲取到的圖片對象. 這裡各參數意思如下：

this：當前圖片對象

opacity: 變化的樣式是透明度

100: 滑鼠移到圖片上時，透明度變成100

10: 透明度每次在原來的基礎上加10

View Code

上述就是完整的代碼實例，請自行展開，點擊run code預覽效果

run code

當你分別測試這兩個功能的時候：

移動到圖片上然後移出來

移動到分享到，然後移出來

這樣是沒有問題的

如果你這樣測試：

移動到 分享到，然後迅速又移動到圖片上， 這個時候你會發現 分享到 停下來了，這就不符合邏輯了! 按道理來說，滑鼠移動到圖片上，相當於觸發了 「分享到」 的mouseout( 滑鼠移出事件 )，那麼 "分享到" 這個時候要隱藏，並不是停止。 為什麼會這樣呢？因為這兩個運動共享了一個定時器，當滑鼠移動到圖片上，開啟定時器的時候，把「分享到」的定時器給停了。那麼再做多物體運動的時候，我們就要把定時器拆分，每個對象都要有一個定時器，怎麼做呢？ 非常簡單，不要定義一個簡單的timer變數，我們只要把timer加在obj對象上，那麼每個對象都有一個timer屬性，就達到定時器的分離效果了

修改之後的完整代碼如下，請自行展開：

View Code

至此，我們就完成了多物體運動與不同樣式的修改

二、讓animate函數支持多個樣式同時改變

比如：

oBox.onmouseover = function(){

animate( this, { "width" : 500, "height" : 400 }, 10 );

}

oBox是一個div元素，animate各參數的意思：

this: 當前div元素

{width : 500, "height" : 400 } : 把寬度變成500, 高度變成400，這兩個樣式要在同一時間完成，

10: 樣式每次在原來的基礎上變化10（如width初始值200--> 210, 220, 230.....）

完整的同時運動變化 代碼：

View Code

請自行展開這段代碼，這段代碼能夠同時運動，但是有一個問題：

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的時候再關閉定時器，不就在同一時間，完成了同時到達目標的效果嗎？

修改後的代碼如下：

View Code

聲明一個變數，每次變化完一次( width, height )樣式 把bFlag = true， 只要在for循環中有一個沒有到達目標，bFlag的值都是false，這樣就不會關閉定時器。當兩個都到達目標，才關閉定時器.

三、順序運動

如樣式變化，按順序來，不是同時變化， 如：

oBox.onmouseover = function(){

//回調函數： 把函數當做參數傳遞給另一個函數

animate( this, { "width" : 500 }, 10, function(){

animate( this, { "height" : 500 }, 10 );

} );

}

當把width變成500px的時候，如果傳遞了回調函數， 再接著執行回調函數裡面的運動

修改後的完整代碼：

View Code

（轉自博客園）

· 什麼？海量IT學習資料白給你都不要？別想了，加群搶：584539956

2017年【中公教育】特別推出就業促進計劃，幫你就業： http://www.ujiuye.com/zt/jycj/？wt.bd=bgz

優就業IT培訓讓你快速成為合格的IT技術型人才，月薪過萬不再是問題：http://www.ujiuye.com/

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！