JavaScript requestAnimationFrame動畫詳解
進(jìn)入web2.0時代,在網(wǎng)頁中實(shí)現(xiàn)動畫已經(jīng)不再局限于一種方法
- 你可以用CSS3的animattion+keyframes;
- 你也可以用css3的transition;
- 你還可以用通過在canvas上作圖來實(shí)現(xiàn)動畫,也可以借助jQuery動畫相關(guān)的API方便地實(shí)現(xiàn);
- 當(dāng)然最原始的你還可以使用window.setTimout()或者window.setInterval()通過不斷更新元素的狀態(tài)位置等來實(shí)現(xiàn)動畫,前提是畫面的更新頻率要達(dá)到每秒60次才能讓肉眼看到流暢的動畫效果。
認(rèn)識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 license if (!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) { //對于支持的瀏覽器直接統(tǒng)一接口 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; } }());
相信那一點(diǎn)點(diǎn)源碼的閱讀對大家都沒有問題,就算讀不懂也沒關(guān)系,會調(diào)用api就可以了
requestAnimationFrame的優(yōu)點(diǎn)
瀏覽器可以優(yōu)化并行的動畫動作,更合理的重新排列動作序列,并把能夠合并的動作放在一個渲染周期內(nèi)完成,從而呈現(xiàn)出更流暢的動畫效果。比如,通過requestAnimationFrame(),JS動畫能夠和CSS動畫/變換或SVG SMIL動畫同步發(fā)生。另外,如果在一個瀏覽器標(biāo)簽頁里運(yùn)行一個動畫,當(dāng)這個標(biāo)簽頁不可見時,瀏覽器會暫停它,這會減少CPU,內(nèi)存的壓力,節(jié)省電池電量。
用法示例:
function animate() { console.log("animation"); window.requestAnimationFrame(animate); } animate();
requestAnimationFrame(animate)是關(guān)鍵,它為要執(zhí)行的函數(shù)設(shè)置了動畫,所以瀏覽器控制臺會一直執(zhí)行animate()函數(shù)。
瀏覽器兼容性
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等屬性學(xué)
這篇文章主要介紹了JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等屬性學(xué)習(xí)筆記,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07使用clipboard.js庫實(shí)現(xiàn)復(fù)制剪切功能
這篇文章介紹了clipboard.js實(shí)現(xiàn)復(fù)制功能的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06select下拉框插件jquery.editable-select詳解
本篇文章主要介紹了select下拉框插件jquery.editable-select。具有很好的參考價值,下面跟著小編一起來看下吧2017-01-01js獲取或設(shè)置當(dāng)前窗口url參數(shù)的小例子
這篇文章介紹了js獲取或設(shè)置當(dāng)前窗口url參數(shù)的小例子,有需要的朋友可以參考一下2013-10-10