CSS動畫 vs JavaScript動畫對比

CSS3的動畫的優點：

• 在效能上會稍微好一些，瀏覽器會對CSS3的動畫做一些最佳化（例如專門新建一個圖層用來跑動畫）

• 程式碼相對簡單

但其缺點也很明顯：

• 在動畫控制上不夠靈活

• 兼容性

部分動畫功能無法實現（如同動畫，視差正好彌補了這兩個缺點，控制能力很強，可以單幀的控制、變換，同時寫得好完全可以相容IE6，而且功能強大。但想想CSS動畫的transform矩陣是C++級的運算，必然要比javascript級的運算還要快。另外對函式庫的依賴也是一個很讓人頭痛的問題。

對於一些複雜控制的動畫，使用javascript會比較可靠。而在實現一些小的交互動效的時候，就多考慮考慮CSS。

以實際專案經驗而言，同一個上下文，兩個方案做動畫的效率差異不大，更加影響效率的是：

是否導致layout

• repaint的面積
• repaint的面積

• repaint有高消耗的屬性（css shadow等）

是否啟用硬體加速

動態改變常規流元素的margin、height，將導致大面積layout過程，用JS或CSS3是一樣慢的。
動態改變元素的translate3D，自然開啟了3D加速，用setTimeout/setInterval/requestAnimationFrame和CSS3沒有很大的幀速差異。

現今主要的不同點是

• 1. 功能涵蓋面，JS比CSS3大

• 定義動畫過程的@keyframes不支援遞歸定義，如果有多種類似的動畫過程，需要調節多個參數來產生的話，將會有很大的冗餘（例如jQuery Mobile的動畫方案），而JS則天然可以以一套函數實現多個不同的動畫過程

• 時間尺度上，@keyframes的動畫粒度粗，而JS的動畫粒度控制可以很細

• CSS3動畫裡被支援的時間函數非常少，不夠靈活

以現有的接口，CSS3動畫無法做到支援兩個以上的狀態轉化

2. 實現/重構難度不一，CSS3比JS更簡單，性能調優方向固定

3. 對於幀速表現不好的低版本瀏覽器，CSS3可以做到自然降級，而JS則需要寫額外程式碼

4. CSS3有相容性問題，而JS大多時候沒有相容性問題

以下會一步步告訴你為什麼基於Javascript 的DOM 動畫庫（例如Velocity.js 和GSAP）能夠比jQuery 和基於CSS 的動畫庫更有效率。

jQuery

• 　　讓我們從基本開始說起： Javascript 和 jQuery 兩者不能混為一談。 Javascript 動畫很快，而 jQuery 動畫很慢。為什麼呢？因為儘管jQuery 異常強大，但是它的設計目標並不是一個高效的動畫引擎：

• jQuery 不能避免 layout thrashing （有人喜歡將其翻譯為“佈局顛簸”，會導致多餘relayout/reflow），因為它的程式碼不僅用於動畫，它還用於許多其他場景。

• jQuery的記憶體消耗較大，常會引發垃圾回收。而垃圾回收觸發時很容易讓動畫卡住。

jQuery使用了setInterval而不是 reqeustAnimationFrame(RAF)，因為 RAF 會在視窗失去焦點時停止觸發，這會導致jQuery的bug。 （目前jQuery已經使用了RAF）

　　注意 layout thrashing 會導致動畫在開始的時候卡頓，垃圾回收的觸發會導致動畫運行過程中的卡頓，不使用 RAF 則會導致動畫幀率低。

實作範例

　　為了避免layout thrashing，我們需要大量存取和更新DOM。

var currentTop,
    currentLeft;
/* 有 layout thrashing. */
currentTop = element.style.top; /* 访问 */
element.style.top = currentTop + 1; /* 更新 */
currentLeft = element.style.left; /* 访问 */
element.style.left = currentLeft + 1; /* 更新 */
/* 没有 layout thrashing. */
currentTop = element.style.top; /* 访问 */
currentLeft = element.style.left; /* 访问 */
element.style.top = currentTop + 1; /* 更新 */
element.style.left = currentLeft + 1; /* 更新 */

在更新作業之後的存取操作會強制瀏覽器重新計算頁面元素的樣式（因為要將更新的樣式套用上去才能取得正確的值）。這在一般操作下沒多大的效能損失，但是放在間隔僅16ms的動畫中則會導致顯著的效能開銷。只需要稍微改動下操作的順序就可以大幅提升動畫的效能。 🎜🎜　　類似地，使用 RAF 也不會讓你大量重構程式碼。讓我們來比較下使用 RAF 和使用 setInterval 的差異：🎜

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 Transition

　　CSS transition 的动画逻辑是由浏览器来执行，所以它的性能能够比 jQuery 动画好。它的优势体现在：

1. 通过优化 DOM 操作，避免内存消耗来减少卡顿

2. 使用与 RAF 类似的机制

3. 强制使用硬件加速 （通过 GPU 来提高动画性能）

　　然而实际上Javascript也可以使用这些优化。GSAP 已经做这些优化很久了。Velocity.js 是一个新兴的动画引擎，它不仅仅做了这些优化，甚至走的更远些。我们稍后会谈到这些。

　　面对事实，让 Javascript 动画得以媲美 CSS 动画的性能只是我们伟大计划的第一步。第二步才是重头戏，要让 Javascript 动画比 CSS 动画还要快！

　　让我们来看看 CSS 动画库的缺陷吧：

1. Transition 强制使用了 GPU 的硬件加速。导致浏览器一直处于高负荷运转的状态，这反而会让动画变的卡顿。这在移动浏览器上更为严重。（特别要说明的是，当数据在浏览器的主线程和合成线程之间频繁传输的时候特别消耗性能，故容易导致卡顿。某些 CSS 属性，不会受到影响。Adobe 的博客谈到过这个问题。

2. IE 10以下的浏览器不支持 transition。而目前 IE8 和 IE9 还是很流行的。

3. transition 不能完全被 Javascript 控制（只能通过 Javascript 来触发 transition），因为浏览器不知道如何同时让 Javascript 控制动画又同时优化动画的性能。

　　反过来说： 基于 Javascript 可以决定什么时候启用硬件加速，它可以支持全版本的 IE，并且它完全可以进行批量动画的优化。

Javascript 动画

　　所以 Javascript 可以比 CSS transition 性能更好。但是它到底有多块呢？它快到足够可以构建一个3D 动画的demo，通常需要用到 WebGL 才能完成。并且它快到足够搭建一个多媒体小动画，通常需要 Flash 或者 After Effects 才能完成。并且它还快到可以构建一个虚拟世界，通常需要 canvas 才能完成。

　　为了更直接的来比较主流动画库的性能，包括 Transit（使用了 CSS transition），让我们打开Velocity的官方文档。

　　之前那个问题还在：Javascript 是如何达到高性能的呢？下面是一个列表，列举了基于 Javascript 的动画库能做的事情：

1. 同步DOM -> 在整个动画链中微调堆栈以达到最小的layout thrashing。

2. 缓存链式操作中的属性值，这样可以最小化DOM的查询操作（这就是高性能 DOM 动画的阿喀琉斯之踵）

3. 在同一个跨同层元素的调用中缓存单位转化比率（例如px转换成%、em等等单位）

4. 忽略那些变动小到根本看不出来的DOM更新

　　让我们重新温习下之前学到的关于layout thrashing的知识点。Velocity.js 运用了这些最佳实践，缓存了动画结束时的属性值，在紧接的下一次动画开始时使用。这样可以避免重新查询动画的起始属性值。

$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%。

　　浏览器也可以使用与此类似的优化，但是要做这些事情太过激进，使用场景也会受到限制，开发者就有可能会写出有bug的动画代码。jQuery就是因为这个原因没有使用RAF（如上所说），浏览器永远不会强行实施可能打破规范或者可能偏离期望行为的优化。

　　最后，让我们来比较下两个Javascript框架（velocity.js 和 GSAP）。

• GASP 是一个快速且功能丰富的动画平台。Velocity则更为轻量级，它大大地改善了UI动画性能和工作流程。

• GSAP 需要付费才能用于商业产品。Velocity 是完全免费的，它使用了自由度极高的 MIT 协议。

• 性能方面，两者几乎相当，很难区分胜负。

Velocity.js

　　之前提到了 GSAP 有着丰富的功能，但这不代表 Velocity 的功能简单。相反的，Velocity 在 zip 压缩之后只有 7kb，它不仅仅实现了 jQuery animate 方法的所有功能，还包含了 颜色、transforms、loop、easings、class 动画和滚动动画等功能。

　　简单的说就是 Velocity 包含了 jQuery、 jQuery UI 和 CSS transition 的功能。

　　更进一步从易用性的角度来讲，Velocity 使用了 jQuery 的$.queue() 方法，因此可以无缝过渡到 jQuery 的$.animate()、$.fade()和$.delay()方法。并且 Velocity 的语法和$.animate()一摸一样，所以我们根本不需要修改页面的现有代码。

　　让我们快速过一下 Velocity.js 的例子：

$element
    .delay(1000)
    /* Use Velocity to animate the element's top property over a duration of 2000ms. */
    .velocity({ top: "50%" }, 2000)
    /* Use a standard jQuery method to fade the element out once Velocity is done animating top. */
    .fadeOut(1000);

　　如下是一个高级用法：滚动网页到当前元素并且旋转元素。这样的动画只需要简单的几行代码：

$element
    /* Scroll the browser to the top of this element over a duration of 1000ms. */
    .velocity("scroll", 1000)
    /* Then rotate the element around its Y axis by 360 degrees. */
    .velocity({ rotateY: "360deg" }, 1000);

Velocity 的目标是成为 DOM 动画领域性能最好易用性最高的库。这篇文章主要关注了性能方面。易用性方面可以前往 VelocityJS.org 了解。

请记住一个高性能的 UI 绝不仅仅是选择一个正确的动画库。页面上的其他代码也需要优化。