深入探究使JavaScript動畫流暢的一些方法

 　　這篇文章主要介紹了使JavaScript動畫流暢的一些方法,包括與CSS動畫效果的一些對比,需要的朋友可以參考下

　　基於Javascript的動畫暗中同CSS過渡效果一樣，甚至更加快，這怎麼可能呢?而Adobe和Google持續發布的富媒體移動網站的性能可媲美本地應用，這又怎麼可能呢?

　　本文逐一遍覽了基於Javascript的DOM動畫庫，如Velocity.js和GSAP，看其是如何比jQuery和CSS動畫效果更具性能的.

　　jQuery

　　讓我們先從基礎的開始: JavaScript 和 jQuery 被錯誤的混為一談了. JavaScript 動畫是很快的. jQuery 把它放慢了下來。為什麼?因為 — 盡管jQuery非常強大 — 但成為一個性能強勁的動畫引擎從來都不是jQuery的設計目標:

　　jQuery 不能避免 布局顛簸 ，這得歸因於它的代碼庫提供了動畫之外的多種用途.

　　jQuery 的內存消耗經常會觸發垃圾回收，那樣會 時不時的讓動畫定格下來.

　　jQuery 使用 setInterval 而不是 requestAnimationFrame (RAF) 來 保護新技術不受其自身的影響.

　　應該注意到布局顛簸就是在動畫開始部分的不順暢，垃圾回收就是造成動畫期間不順暢的元凶, 而沒有使用RAF則會導致低幀率.

　　實現示例

　　避免造成布局顛簸的DOM查詢和更新組合:

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var currentTop, currentLeft;   /* With layout thrashing. */ currentTop = element.style.top; /* QUERY */ element.style.top = currentTop + 1; /* UPDATE */   currentLeft = element.style.left; /* QUERY */ element.style.left = currentLeft + 1; /* UPDATE */   /* Without layout thrashing. */ currentTop = element.style.top; /* QUERY */ currentLeft = element.style.left; /* QUERY */   element.style.top = currentTop + 1; /* UPDATE */ element.style.left = currentLeft + 1; /* UPDATE */

　　發生在更新之後的查詢會強制浏覽器對頁面的計算式數據進行重新計算 (同時會把新的更新效果考慮在內). 這樣就會對動畫產生顯著的開銷，而這只是16毫秒微小間隔的運行超時.

　　類似的，實現 RAF 並不必須是對你的現有代碼庫的顯著返工. 讓我們拿RAF的基礎實現同setInterval比較一下:

　　?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var startingTop = 0;   /* setInterval: Runs every 16ms to achieve 60fps (1000ms/60 ~= 16ms). */ setInterval(function() { /* Since this ticks 60 times a second, we divide the top property's increment of 1 unit per 1 second by 60. */ element.style.top = (startingTop += 1/60); }, 16);   /* requestAnimationFrame: Attempts to run at 60fps based on whether the browser is in an optimal state. */ function tick () { element.style.top = (startingTop += 1/60); }   window.requestAnimationFrame(tick);

　　RAF 產生了推動動畫性能的最大可能性，你可以對你的代碼進行單一的變更.

　　CSS 轉換

　　CSS轉換通過把動畫邏輯甩給浏覽器本身去處理而超越了jQuery，這在以下幾方面是有效果的：(1)優化DOM交互和內存消耗以避免卡頓(顛簸)，(2)利用引擎的RAF原則，(3)強制硬件加速(利用GPU的能力來提高動畫性能)。

　　然而，現實是，這些優化也可以在JavaScript中直接執行。GSAP已經這樣做了多年。Velocity.js，一個新的動畫引擎，不僅利用了同樣的技術，而且還向前多走了幾步——我們不久會探討這些。

　　面對事實，JavaScript動畫可以與CSS轉換競爭只是我們康復計劃的第一步。第二步是實現“JavaScript動畫實際上可以比CSS轉換更快”。

　　現在我們開始談談CSS變換的弱點：

　　transition強制硬件加速會加大GPU消耗，高負荷情形下將導致運行不流暢。這種情況在移動設備上尤為明顯。(特殊情況下，比如當數據在浏覽器主線程和排版線程之間傳遞產生的瓶頸也會導致不流暢)。某些CSS屬性，比如transform和opacity，則不受這些瓶頸影響。Adobe在這裡精心總結了這些問題。

　　transition在IE10以下沒有用，造成的自IE8和IE9以來的桌面站點可用性問題至今仍然廣泛存在。

　　由於transition並不是由JavaScript原生控制(而僅僅是由JavaScript觸發)，浏覽器無法獲知如何與控制這些transition的JavaScript代碼同步地優化他們。

　　相反的，基於JavaScript的動畫庫則可以自行確定合適開啟硬件。它們原生支持各版本IE浏覽器，並且它們尤其適合批量動畫優化。

　　我的建議是僅當你單獨為移動端開發且僅實現簡單動畫時使用原生CSS變換。這種環境下，transition是一種原生有效的解決方案，可以使你在樣式表中實現所有動畫邏輯，而不用添加額外的JavaScript庫，從而避免你的頁面變得臃腫。然而，當你在設計復雜的UI，或者是開發存在不同狀態的UI的App時，你就應該使用動畫庫以使動畫保持流暢，同時使工作流程易於管理。Transit是一個在管理CSS變換方面做得尤其優秀的庫。

　　JavaScript 動畫

　　好了，那JavaScript可就在性能方面占據上風了. 但Javascript究竟具體快了多少呢? 好吧 — 最初 — 對於構建一個實在的 3D動畫示例 是足夠快的，通常在構建中你只會看到有使用WebGL. 而構建一個 多媒體小動畫 也夠了，通常你看到只會使用Flash或者After Effects構建. 而構建一個 虛擬世界 也夠了，通常你只會看到使用canvas構建.

　　為了對領先的動畫庫，當然還要包含Transit(它使用CSS漸變效果)，進行直接的對比, 回頭去看看Velocity在VelocityJS.org上的文檔.

　　問題仍然是: JavaScript是怎樣具體的達成其高水平性能的? 下面是對基於Javascript動畫能夠被執行這一目標的優化的一個簡短清單:

　　同步 DOM → 在整個動畫鏈中間入棧以最小化布局抖動.

　　為整個鏈式調用緩存屬性值，以最小化DOM查詢發生 (這些就是高性能DOM動畫的坑).

　　在同樣的調用中緩存整個同級別元素的單元轉換率 (比如 px 到 %, em, 等等.).

　　當更新可能會在視覺上不可見時跳過樣式更新.

　　回顧一下我們先前學過的關於布局顛簸的知識，Velocity.js利用這些最佳實踐來緩存動畫結束值以復用為隨後動畫的開始值，從而避免了重新查詢DOM以獲取元素的開始值：

　　?

1 2 3 4 5 $element /* Slide the element down into view. */ .velocity({ opacity: 1, top: "50%" }) /* After a delay of 1000ms, slide the element out of view. */ .velocity({ opacity: 0, top: "-50%" }, { delay: 1000 });

　　在上面例子中，第二個 Velocity 調用知道它應該自動從 opacity為1 和 top為50% 開始。

　　浏覽器本身最終能夠執行許多這些相同的優化，但這樣做會明顯減少開發者能夠制作的動畫代碼的方式。因此，出於同樣原因，由於jQuery不使用RAF(如上所述)，浏覽器就不會強制優化它，甚至給出一個很小的機會去打破規格或偏離預期的行為。

　　最後，我們對這兩個JavaScript動畫庫(Velocity.js 和 GSAP)互相比較一下。

　　GSAP 是首個動畫庫，用在演示JavaScript DOM 令人印象深刻的動畫表現。它確實是這樣，但有些缺點：

　　在中到高負荷動畫中，GSAP 的 DOM 交互開銷導致動畫在開始時和過程中失幀。

　　相反於Velocity.js 是在超寬松的 MIT 許可下發布的, GSAP 是閉源的， 並且在很多類商用時候需要許可年費。

　　因為 GSAP 是一個完整的動畫套件，是 Velocity 大小的三倍。然而，GSAP 有如此豐富功能，有助於其成為動畫的瑞士軍刀。

　　我推薦做法是在你需要精確控制定時(比如 重繪，暫停/恢復)和運動(比如貝塞爾曲線路徑)的時候用 GSAP 。這些特性在游戲開發和某些特殊應用中是至關重要的，但是通常不需要用在網頁應用的 UI中。

　　Velocity.js

　　引用 GSAP 豐富的特性並不代表Velocity自身在特性上是輕量級的. 相反，在壓縮後僅有的7kb中，Velocity不僅僅復制了jQuery