進入web2.0時代，在網頁中實現動畫已經不再局限于一種方法
認識JavaScript requestAnimationFrame
首先我們來看一下它的源碼
requestAnimationFrame on github
// Adapted from https://gist.github.com/paulirish/1579671 which derived from // http://paulirish.com/2011/requestanimationframe-for-smart-animating/// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating// requestAnimationFrame polyfill by Erik Möller.// Fixes from Paul Irish, Tino Zijdel, Andrew Mao, Klemen Slavič, Darius Bacon// MIT licenseif (!Date.now) Date.now = function() { return new Date().getTime(); };(function() { 'use strict'; var vendors = ['ms', 'moz', 'webkit', 'o']; //瀏覽器兼容 for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) { //對于支持的瀏覽器直接統一接口 var vp = vendors[i]; window.requestAnimationFrame = window[vp+'RequestAnimationFrame']; window.cancelAnimationFrame = (window[vp+'CancelAnimationFrame'] || window[vp+'CancelRequestAnimationFrame']); } if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy || !window.requestAnimationFrame || !window.cancelAnimationFrame) { //對于不支持的瀏覽器退而使用setTimeout和clearTimeout var lastTime = 0; window.requestAnimationFrame = function(callback) { var now = Date.now(); var nextTime = Math.max(lastTime + 16, now); return setTimeout(function() { callback(lastTime = nextTime); }, nextTime - now); }; window.cancelAnimationFrame = clearTimeout; }}());相信那一點點源碼的閱讀對大家都沒有問題，就算讀不懂也沒關系，會調用api就可以了
requestAnimationFrame的優點
瀏覽器可以優化并行的動畫動作，更合理的重新排列動作序列，并把能夠合并的動作放在一個渲染周期內完成，從而呈現出更流暢的動畫效果。比如，通過requestAnimationFrame()，JS動畫能夠和CSS動畫/變換或SVG SMIL動畫同步發生。另外，如果在一個瀏覽器標簽頁里運行一個動畫，當這個標簽頁不可見時，瀏覽器會暫停它，這會減少CPU，內存的壓力，節省電池電量。
用法示例：
function animate() { console.log("animation"); window.requestAnimationFrame(animate); }animate();
requestAnimationFrame(animate)是關鍵，它為要執行的函數設置了動畫，所以瀏覽器控制臺會一直執行animate()函數。
瀏覽器兼容性
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
