核心要點(diǎn)

• jQuery 的 animate() 函數(shù)雖然實(shí)用，但並非高性能動(dòng)畫引擎，可能導(dǎo)致內(nèi)存消耗和幀率低的問題。然而，對(duì)於不熟悉 CSS 動(dòng)畫或?qū)で罂鐬g覽器兼容性的開發(fā)者來說，它仍然是一個(gè)可行的選擇。
• CSS 動(dòng)畫通常比 jQuery 的動(dòng)畫更快、更高效，這主要?dú)w功於 GPU 加速。但是，它們也有一些局限性，包括與舊版 Internet Explorer 的兼容性問題，以及依賴百分比而不是時(shí)間來確定動(dòng)畫持續(xù)時(shí)間，這可能會(huì)使調(diào)整變得複雜。
• Velocity.js 是一個(gè) jQuery 插件，它可以在無需大幅更改代碼的情況下顯著提高 jQuery 動(dòng)畫的性能。通過將 $.animate() 替換為 $.velocity()，開發(fā)者可以獲得更高的幀率並保持 jQuery 的鍊式調(diào)用特性。

我們都曾使用 jQuery 的 animate() 函數(shù)在網(wǎng)頁(yè)上創(chuàng)建出色的效果。然後，隨著 CSS3 的引入和興起，有人告訴我們我們的代碼很糟糕。他們建議我們放棄所有基於 jQuery 的動(dòng)畫（以及通?；?JavaScript 的動(dòng)畫），轉(zhuǎn)而使用基於 CSS 的動(dòng)畫。這種變化迫使我們處理許多瀏覽器（不）兼容性問題和功能缺失；更不用說無法在舊版 Internet Explorer 上運(yùn)行它們了。這種痛苦是合理的，因?yàn)?CSS 動(dòng)畫比 JavaScript 動(dòng)畫更快。至少他們這麼告訴我們的。這是真的嗎？ jQuery 的 animate() 函數(shù)真的那麼慢嗎？有沒有一種方法可以輕鬆地增強(qiáng)它而無需更改我們的代碼？答案是肯定的。在本文中，我們將了解創(chuàng)建動(dòng)畫的兩種方法的一些局限性，然後我們將了解如何使用 jQuery 代碼獲得更好的性能。

jQuery 的問題是什麼？

我們都了解並喜愛 jQuery（實(shí)際上有些人並不喜歡）。這個(gè)旨在簡(jiǎn)化 HTML 客戶端腳本的庫(kù)幫助了全世界數(shù)十萬（並非真實(shí)數(shù)據(jù)）開發(fā)者。它使 HTML 文檔遍歷和操作、事件處理、Ajax 以及更多操作變得輕而易舉，減輕了處理所有瀏覽器的不兼容性和錯(cuò)誤的負(fù)擔(dān)。在其功能中，jQuery 還允許創(chuàng)建動(dòng)畫和效果。借助它，我們可以對(duì) CSS 屬性進(jìn)行動(dòng)畫處理、隱藏元素、淡出元素以及其他類似效果。但是，jQuery 的設(shè)計(jì)目標(biāo)從來都不是成為一個(gè)高性能的動(dòng)畫引擎，它也從未打算支持真正複雜、消耗 CPU/GPU 的動(dòng)畫。作為這一事實(shí)的佐證，jQuery 的內(nèi)存消耗經(jīng)常會(huì)觸發(fā)垃圾回收，從而在執(zhí)行動(dòng)畫時(shí)造成問題。此外，jQuery 在幕後使用 setInterval() 而不是 requestAnimationFrame()（閱讀更多關(guān)於 requestAnimationFrame() 的信息）來運(yùn)行動(dòng)畫，這無助於產(chǎn)生高幀率。由於這些因素，“最了解的人” 提倡使用 CSS 來創(chuàng)建我們的動(dòng)畫和效果。

CSS 動(dòng)畫和過渡

讓我們明確一點(diǎn)：CSS 動(dòng)畫優(yōu)於 jQuery 動(dòng)畫。在談到動(dòng)畫時(shí)，jQuery 的速度可能比 CSS 慢幾倍。 CSS 動(dòng)畫和過渡具有由 GPU 硬件加速的優(yōu)勢(shì)，這在移動(dòng)像素方面非常出色。尤其是在性能至關(guān)重要的場(chǎng)合（例如移動(dòng)設(shè)備）中，這一因素似乎是一個(gè)巨大的改進(jìn)。這太棒了，不是嗎？事實(shí)是，所有這些都有局限性和問題。第一個(gè)限制是並非所有 CSS 屬性都可以通過 GPU 進(jìn)行改進(jìn)。因此，認(rèn)為使用 CSS 動(dòng)畫總是會(huì)獲勝的假設(shè)是錯(cuò)誤的。另一個(gè)問題是 CSS 動(dòng)畫不可移植，至少在您可能定位的所有瀏覽器中並非如此。例如，過渡在 Internet Explorer 9 及以下版本中不起作用。更糟糕的是，CSS 中的動(dòng)畫目前基於百分比而不是時(shí)間（秒或毫秒）。這意味著，除非您使用 Sass 或 Less 等預(yù)處理器，否則在完成動(dòng)畫後更改動(dòng)畫持續(xù)時(shí)間可能會(huì)非常痛苦。最後，CSS 動(dòng)畫需要鍵入大量供應(yīng)商前綴。是的，我們可以委託一個(gè)工具來處理它們，但這只是另一件需要擔(dān)心的事情。

除了之前的考慮之外，還有其他一些充分的理由不應(yīng)忽視 jQuery 動(dòng)畫。它們更多地與技能不足有關(guān)，而不是技術(shù)的弱點(diǎn)本身，但仍然值得一提。如果一個(gè)開發(fā)者習(xí)慣於使用 jQuery 創(chuàng)建動(dòng)畫，那麼很有可能該開發(fā)者無法使用 CSS 來執(zhí)行相同的任務(wù)。也許開發(fā)者需要很長(zhǎng)時(shí)間才能在 CSS 中創(chuàng)建相同的效果，以至於付出努力不值得獲得好處?；蛘?，開發(fā)者可能不想學(xué)習(xí)另一種技術(shù)來創(chuàng)建高度可定制的動(dòng)畫。這沒有什麼可羞愧的。每個(gè)人在一個(gè)特定領(lǐng)域都有自己的局限性。這裡的重點(diǎn)是我們希望使用 jQuery 創(chuàng)建的動(dòng)畫具有更好的性能，這樣我們就無需將其轉(zhuǎn)換為 CSS 動(dòng)畫。幸運(yùn)的是，確實(shí)存在解決方案。

改進(jìn) jQuery 的 animate() 函數(shù)

解決 jQuery 動(dòng)畫問題的答案叫做 Velocity.js。 Velocity.js 是 <q cite="https://github.com/julianshapiro/velocity">一個(gè) jQuery 插件，它重新實(shí)現(xiàn)了 $.animate() 以產(chǎn)生更高的性能（使 Velocity 也比 CSS 動(dòng)畫庫(kù)更快），同時(shí)包含了改進(jìn)動(dòng)畫工作流程的新功能。</q> 與使用舊版 IE 的 jQuery 1.X 不同，Velocity 與 IE8 兼容。對(duì)於大多數(shù)項(xiàng)目來說，這應(yīng)該不是一個(gè)主要問題。此時(shí)您可能想知道使用 Velocity.js 會(huì)如何影響代碼庫(kù)。答案是“以一種非常荒謬的方式”。為了集成 Velocity.js，我們所要做的就是下載它並將其包含在我們想要使用的網(wǎng)頁(yè)中。最後一步是將每次出現(xiàn)的 $.animate() 替換為 $.velocity()，無需更改任何參數(shù)！此更改就像在我們選擇的文本編輯器或 IDE 中執(zhí)行搜索和替換一樣簡(jiǎn)單。完成後，我們的動(dòng)畫性能將立即得到提升。這很棒，因?yàn)槲覀兛梢灾赜梦覀兊闹R(shí)，而不會(huì)對(duì)代碼庫(kù)產(chǎn)生太大影響。此外，由於它是一個(gè)保持鍊式調(diào)用的 jQuery 插件，我們可以繼續(xù)創(chuàng)建 jQuery 典型的“方法調(diào)用鏈”。

結(jié)論

在本文中，我描述了一些影響基於 jQuery 動(dòng)畫的問題。我們討論了為什麼 CSS 動(dòng)畫在過去幾年中被大力推廣以替代 jQuery。然後，我強(qiáng)調(diào)了 CSS 的一些局限性以及在性能方面的一些缺點(diǎn)。最後，我簡(jiǎn)要地向您介紹了 Velocity.js，這是一個(gè) jQuery 插件，它允許您幾乎無需更改源代碼即可提高 JavaScript 動(dòng)畫和效果的性能。本文只是對(duì) jQuery、CSS 和 JavaScript 動(dòng)畫之間比較的介紹。如果您想深入研究此主題，我強(qiáng)烈建議您閱讀 GSAP 作者和 Velocity.js 作者撰寫的以下文章：- 揭穿神話：CSS 動(dòng)畫與 JavaScript- CSS 與 JS 動(dòng)畫：哪個(gè)更快？

關(guān)於改進(jìn) jQuery 動(dòng)畫的常見問題

如何減慢 jQuery 動(dòng)畫的速度？

可以通過增加動(dòng)畫的持續(xù)時(shí)間來減慢 jQuery 動(dòng)畫的速度。持續(xù)時(shí)間在 .animate() 方法中以毫秒為單位指定。例如，如果您想將動(dòng)畫減慢到持續(xù) 5 秒，則應(yīng)編寫 $(selector).animate({params}, 5000);。數(shù)字越大，動(dòng)畫越慢。

jQuery 動(dòng)畫中緩動(dòng)起什麼作用？

jQuery 動(dòng)畫中的緩動(dòng)是指動(dòng)畫在其持續(xù)時(shí)間內(nèi)不同點(diǎn)處的進(jìn)度速度。 jQuery 提供兩種內(nèi)置的緩動(dòng)方法：“swing” 和 “l(fā)inear”。 “Swing” 是默認(rèn)的緩動(dòng)方法，它使動(dòng)畫在開始和結(jié)束時(shí)進(jìn)度較慢，在中間進(jìn)度較快。 “Linear” 另一方面，確保動(dòng)畫在整個(gè)過程中速度恆定。

如何提高 jQuery 動(dòng)畫的性能？

提高 jQuery 動(dòng)畫性能的方法有很多。一種方法是在可能的情況下使用 CSS 過渡，因?yàn)樗鼈兺ǔ１?jQuery 動(dòng)畫性能更好。另一種方法是限制同時(shí)運(yùn)行的動(dòng)畫數(shù)量。您還可以使用 requestAnimationFrame 方法，該方法允許瀏覽器優(yōu)化動(dòng)畫，從而實(shí)現(xiàn)更流暢的動(dòng)畫。

如何停止正在運(yùn)行的 jQuery 動(dòng)畫？

您可以使用 .stop() 方法停止正在運(yùn)行的 jQuery 動(dòng)畫。此方法會(huì)停止選定元素上當(dāng)前正在運(yùn)行的動(dòng)畫。例如，$(selector).stop(); 將停止選定元素上的動(dòng)畫。

如何在 jQuery 中鏈接多個(gè)動(dòng)畫？

您可以通過在同一元素上簡(jiǎn)單地調(diào)用多個(gè)動(dòng)畫方法來鏈接多個(gè) jQuery 動(dòng)畫。例如，$(selector).fadeIn().slideUp(); 將首先淡入選定元素，然後向上滑動(dòng)它們。 jQuery 確保動(dòng)畫按調(diào)用的順序執(zhí)行。

如何一次在 jQuery 中同時(shí)為多個(gè)屬性設(shè)置動(dòng)畫？

您可以通過將包含要為其設(shè)置動(dòng)畫的屬性的對(duì)像傳遞給 .animate() 方法來一次在 jQuery 中同時(shí)為多個(gè)屬性設(shè)置動(dòng)畫。例如，$(selector).animate({height: "300px", width: "200px"}); 將同時(shí)為選定元素的高度和寬度設(shè)置動(dòng)畫。

如何在 jQuery 動(dòng)畫中使用回調(diào)函數(shù)？

jQuery 動(dòng)畫中的回調(diào)函數(shù)是在動(dòng)畫完成後執(zhí)行的函數(shù)。您可以將回調(diào)函數(shù)作為第二個(gè)參數(shù)傳遞給 .animate() 方法。例如，$(selector).animate({params}, function(){ /* 動(dòng)畫完成后要執(zhí)行的代碼 */ });。

如何在 jQuery 中創(chuàng)建自定義動(dòng)畫？

您可以使用 .animate() 方法在 jQuery 中創(chuàng)建自定義動(dòng)畫。此方法允許您為任何 CSS 屬性設(shè)置動(dòng)畫。例如，$(selector).animate({left: " =50px"}); 將使選定元素向右移動(dòng) 50 像素。

如何在 jQuery 動(dòng)畫中使用 queue 和 dequeue 方法？

jQuery 中的 queue 和 dequeue 方法用於控制動(dòng)畫的執(zhí)行。 queue 方法允許您將新的動(dòng)畫添加到要對(duì)選定元素執(zhí)行的動(dòng)畫隊(duì)列中。 dequeue 方法允許您刪除並執(zhí)行隊(duì)列中的下一個(gè)函數(shù)。

如何在 jQuery 動(dòng)畫中使用 .delay() 方法？

jQuery 中的 .delay() 方法用於延遲隊(duì)列中後續(xù)項(xiàng)目的執(zhí)行。它通常用於延遲動(dòng)畫。例如，$(selector).delay(500).fadeIn(); 將使 fadeIn 動(dòng)畫延遲 500 毫秒。

以上是輕鬆改善jQuery動(dòng)畫的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！