輕鬆改善jQuery動畫

核心要點

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

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

jQuery 的問題是什麼？

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

CSS 動畫和過渡

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

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

改進 jQuery 的 animate() 函數

解決 jQuery 動畫問題的答案叫做 Velocity.js。 Velocity.js 是 <q cite="https://github.com/julianshapiro/velocity">一个 jQuery 插件，它重新实现了 $.animate() 以产生更高的性能（使 Velocity 也比 CSS 动画库更快），同时包含了改进动画工作流程的新功能。</q> 與使用舊版 IE 的 jQuery 1.X 不同，Velocity 與 IE8 兼容。對於大多數項目來說，這應該不是一個主要問題。此時您可能想知道使用 Velocity.js 會如何影響代碼庫。答案是“以一種非常荒謬的方式”。為了集成 Velocity.js，我們所要做的就是下載它並將其包含在我們想要使用的網頁中。最後一步是將每次出現的 $.animate() 替換為 $.velocity()，無需更改任何參數！此更改就像在我們選擇的文本編輯器或 IDE 中執行搜索和替換一樣簡單。完成後，我們的動畫性能將立即得到提升。這很棒，因為我們可以重用我們的知識，而不會對代碼庫產生太大影響。此外，由於它是一個保持鍊式調用的 jQuery 插件，我們可以繼續創建 jQuery 典型的“方法調用鏈”。

結論

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

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

如何減慢 jQuery 動畫的速度？

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

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

jQuery 動畫中的緩動是指動畫在其持續時間內不同點處的進度速度。 jQuery 提供兩種內置的緩動方法：“swing” 和 “linear”。 “Swing” 是默認的緩動方法，它使動畫在開始和結束時進度較慢，在中間進度較快。 “Linear” 另一方面，確保動畫在整個過程中速度恆定。

如何提高 jQuery 動畫的性能？

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

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

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

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

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

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

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

如何在 jQuery 動畫中使用回調函數？

jQuery 動畫中的回調函數是在動畫完成後執行的函數。您可以將回調函數作為第二個參數傳遞給 .animate() 方法。例如，$(selector).animate({params}, function(){ /* 动画完成后要执行的代码 */ });。

如何在 jQuery 中創建自定義動畫？

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

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

jQuery 中的 queue 和 dequeue 方法用於控制動畫的執行。 queue 方法允許您將新的動畫添加到要對選定元素執行的動畫隊列中。 dequeue 方法允許您刪除並執行隊列中的下一個函數。

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

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

以上是輕鬆改善jQuery動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！