這篇文章主要介紹了使JavaScript動畫流暢的一些方法,包括與CSS動畫效果的一些對比,需要的朋友可以參考下
基于Javascript的動畫暗中同CSS過渡效果一樣，甚至更加快，這怎么可能呢?而Adobe和Google持續(xù)發(fā)布的富媒體移動網(wǎng)站的性能可媲美本地應(yīng)用，這又怎么可能呢?
本文逐一遍覽了基于Javascript的DOM動畫庫，如Velocity.js和GSAP，看其是如何比jQuery和CSS動畫效果更具性能的.
jQuery
讓我們先從基礎(chǔ)的開始: JavaScript 和 jQuery 被錯誤的混為一談了. JavaScript 動畫是很快的. jQuery 把它放慢了下來。為什么?因?yàn)?— 盡管jQuery非常強(qiáng)大 — 但成為一個性能強(qiáng)勁的動畫引擎從來都不是jQuery的設(shè)計(jì)目標(biāo):
jQuery 不能避免 布局顛簸 ，這得歸因于它的代碼庫提供了動畫之外的多種用途.
jQuery 的內(nèi)存消耗經(jīng)常會觸發(fā)垃圾回收，那樣會 時不時的讓動畫定格下來.
jQuery 使用 setInterval 而不是 requestAnimationFrame (RAF) 來 保護(hù)新技術(shù)不受其自身的影響.
應(yīng)該注意到布局顛簸就是在動畫開始部分的不順暢，垃圾回收就是造成動畫期間不順暢的元兇, 而沒有使用RAF則會導(dǎo)致低幀率.
實(shí)現(xiàn)示例
避免造成布局顛簸的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 */發(fā)生在更新之后的查詢會強(qiáng)制瀏覽器對頁面的計(jì)算式數(shù)據(jù)進(jìn)行重新計(jì)算 (同時會把新的更新效果考慮在內(nèi)). 這樣就會對動畫產(chǎn)生顯著的開銷，而這只是16毫秒微小間隔的運(yùn)行超時.
類似的，實(shí)現(xiàn) RAF 并不必須是對你的現(xiàn)有代碼庫的顯著返工. 讓我們拿RAF的基礎(chǔ)實(shí)現(xiàn)同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);新聞熱點(diǎn)
疑難解答
圖片精選
