核心要點

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

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

jQuery 的問題是什么？

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

CSS 動畫和過渡

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

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

改進 jQuery 的 animate() 函數(shù)

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

結論

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

關于改進 jQuery 動畫的常見問題

如何減慢 jQuery 動畫的速度？

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

jQuery 動畫中緩動起什么作用？

jQuery 動畫中的緩動是指動畫在其持續(xù)時間內(nèi)不同點處的進度速度。jQuery 提供兩種內(nèi)置的緩動方法：“swing” 和 “l(fā)inear”?！癝wing” 是默認的緩動方法，它使動畫在開始和結束時進度較慢，在中間進度較快?！癓inear” 另一方面，確保動畫在整個過程中速度恒定。

如何提高 jQuery 動畫的性能？

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

如何停止正在運行的 jQuery 動畫？

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

如何在 jQuery 中鏈接多個動畫？

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

如何一次在 jQuery 中同時為多個屬性設置動畫？

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

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

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

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

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

如何在 jQuery 動畫中使用 queue 和 dequeue 方法？

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

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

jQuery 中的 .delay() 方法用于延遲隊列中后續(xù)項目的執(zhí)行。它通常用于延遲動畫。例如，$(selector).delay(500).fadeIn(); 將使 fadeIn 動畫延遲 500 毫秒。

以上是輕松改善jQuery動畫的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！