這篇文章主要介紹了使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);新聞熱點
疑難解答
