但事實是基於javascript的動畫效果通常和基於css的動畫一樣快，有些甚至更快一些。CSS動畫通常被覺得比較快，因為我們總是拿它和jQuery動畫相比，其實慢的是jQuery的$.animate()，然而javascript的動畫庫避免了DOM操作，常常比jQuery快20倍左右。
所以，讓我們一起粉碎那個謠言，寫一些真實的例子，來評估一下javascript動畫的效能。
為什麼要使用JavaScript?
把屬性轉換到樣式中的時候用CSS非常方便，而且在不使用其它庫的情況下，它們也能提供出色的表現。但是當你使用CSS來實現複雜的設計時，它們變的非常麻煩。
總而言之，CSS一定會限制你的設計。但是如果你使用javascript，就可以從邏輯上解決這些問題。javascript的動畫引擎提供如下功能：
- 跨瀏覽器的 SVG 支援
- 基於物理學的動畫載入
- 時間軸控制,
- Bezier translations
提示：如果你對javascript的展示效果比較感興趣，可以讀一下Julian Shapiro的 “CSS vs. JS Animation: Which Is Faster?”和Jack Doyle的 “Myth Busting: CSS Animations vs. JavaScript.” 。如果想看一些演示，可以看看 performance pane 和 “Library Speed Comparison” 。Velocity 和 GSAP
兩個最常用的javascript動畫庫是 Velocity.js 和 GSAP。這些庫在使用jQuery的時候並沒有效能損耗，因為它們都沒有使用jQuery的動畫棧。
如果你在頁面中必須使用jQuery，你可以用Velocity和GSAP來代替你的jQuery $.animate()。比如
$element.animate({ opacity: 0.5 });
可以寫成：
$element.velocity({ opacity: 0.5 }).
這兩個庫也當然也可以在沒有jQuery的時候使用：
/* Working without jQuery */
Velocity(element, { opacity: 0.5 }, 1000); // Velocity
TweenMax.to(element, 1, { opacity: 0.5 }); // GSAP
像上面的例子一樣，即全不使用jQuery，Velocity也保留了和jQuery的$.animate()類似的語法。GSAP和它相反，通過物件導向的設計，更方便了對靜態方法的呼叫。你可以對動畫進行全面的控制。
在這兩種解決方案中，你都不會用到jQuery的物件元素，但是如果是要操作原始的DOM結點呢？你可以通過
document.getElementByID document.getElementsByTagName document.getElementsByClassName document.querySelectorAll這些類似於jQuery’s selector的實現。下面我們會對這些方法進行簡單的介紹。
杜絕jQuery
提示：如果你需要了解jQuery的$.animate()，可以看看 Velocity’s documentation.。讓我們看看querySelectorAll的功能：:
document.querySelectorAll("body"); // Get the body element
document.querySelectorAll(".squares"); // Get all elements with the "square" class
document.querySelectorAll("div"); // Get all divs
document.querySelectorAll("#main"); // Get the element with an id of "main"
document.querySelectorAll("#main div"); // Get the divs contained by "main"
向程式碼展示的一樣，你可以通過querySelectorAll簡單的進行對CSS的選擇。它會在陣列中返回所有匹配的元素：
/* Get all div elements. */
var divs = document.querySelectorAll("div");
/* Animate all divs at once. */
Velocity(divs, { opacity: 0.5 }, 1000); // Velocity
TweenMax.to(divs, 1, { opacity: 0.5 }); // GSAP
因為我們沒有使用jQuery的物件元素，你可能會好奇我們應該怎麼把動畫連結起來，其實我們可以這樣做：
$element // jQuery element object
.velocity({ opacity: 0.5 }, 1000)
.velocity({ opacity: 1 }, 1000);
在 Velocity中，你可以像這樣簡化你的程式碼：
/* These animations automatically chain onto one another. */
Velocity(element, { opacity: 0.5 }, 1000);
Velocity(element, { opacity: 1 }, 1000);
這樣來處理動畫就不會存在效能上的浪費。你會發現它javascript的效能真的和CSS差不多，而且操作更方便。
評論(2)