requestAnimationFrame 等同于定時器

1竭缝、在我們學習 requestAnimationFrame 我們縣里啊了解下這個新興的動畫制作方法

HTML5/CSS3時代,我們要在web里做動畫選擇其實已經很多了:
你可以用CSS3的 animattion+keyframes;
你也可以用css3的 transition;
你還可以用通過在 canvas上作圖來實現動畫
也可以借助 jQuery動畫相關的API方便地實現;
當然最原始的你還可以使用window.setTimout()或者window.setInterval()通過不斷更新元素的狀態(tài)位置等來
實現動畫哪廓,前提是畫面的更新頻率要達到每秒60次才能讓肉眼看到流暢的動畫效果。
現在又多了一種實現動畫的方案璧南,那就是還在草案當中的window.requestAnimationFrame()方法逸贾。

2、window.requestAnimationFrame() 將告知瀏覽器你馬上要開始動畫效果了舔痪,后者需要在下次動畫前調用相應方法來更新畫面寓调。這個方法就是傳遞給window.requestAnimationFrame()的回調函數。

也可這個方法原理其實也就跟setTimeout/setInterval差不多锄码,通過遞歸調用同一方法來不斷更新畫面以達到動起來的效果夺英,

3、requestAnimationFrame 比起 setTimeout滋捶、setInterval的優(yōu)勢主要有兩點:

1痛悯、requestAnimationFrame 會把每一幀中的所有DOM操作集中起來,在一次重繪或回流中就完成重窟,并且重繪或回流的時間間隔緊緊跟隨瀏覽器的刷新頻率载萌,一般來說,這個頻率為每秒60幀。
2扭仁、在隱藏或不可見的元素中垮衷,requestAnimationFrame將不會進行重繪或回流,這當然就意味著更少的的cpu乖坠,gpu和內存使用量搀突。
3、優(yōu)于setTimeout/setInterval的地方在于它是由瀏覽器專門為動畫提供的API熊泵,在運行時瀏覽器會自動優(yōu)化方法的調用描姚,并且如果頁面不是激活狀態(tài)下的話,動畫會自動暫停戈次,有效節(jié)省了CPU開銷轩勘。

舉一個例子來證明下 requestAnimationFrame 強大吧 !

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<style type="text/css">
    #box{
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>
</head>
<body>
<div id="box"></div>


    <script type="text/javascript">
    
    // 做瀏覽器適配
        window.requestAnimationFrame =
                    window.requestAnimationFrame ||
                    window.webkitrequestAnimationFrame  ||
                    window.mozrequestAnimationFrame  ||
                    window.msrequestAnimationFrame  ||
                    window.orequestAnimationFrame;
        window.cancelAnimationFrame =
                    window.cancelAnimationFrame ||
                    window.webkitCancelAnimationFrame  ||
                    window.mozCancelAnimationFrame  ||
                    window.msCancelAnimationFrame  ||
                    window.oCancelAnimationFrame;
// 獲取box
                 var   box  = document.querySelector("#box");

// 有返回值  取消時使用
                  var   _id  =  window.requestAnimationFrame(run);
 
                  console.log(_id)

// 每秒60幀    不用去考慮性能問題
                   function run(time){

                    // console.log(time);
                   var  width  = parseFloat(getComputedStyle(box).width);

                   if(width>=600){
                    window.cancelAnimationFrame(_id);

                   }else{

                    window.requestAnimationFrame(run);

                    box.style.width = width + 1 + "px";
                   }
               }
    </script>

</body>
</html>

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末怯邪,一起剝皮案震驚了整個濱河市绊寻,隨后出現的幾起案子,更是在濱河造成了極大的恐慌悬秉,老刑警劉巖澄步,帶你破解...
    沈念sama閱讀 218,941評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異和泌,居然都是意外死亡村缸,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 93,397評論 3 395
  • 文/潘曉璐 我一進店門武氓,熙熙樓的掌柜王于貴愁眉苦臉地迎上來梯皿,“玉大人,你說我怎么就攤上這事县恕《” “怎么了?”我有些...
    開封第一講書人閱讀 165,345評論 0 356
  • 文/不壞的土叔 我叫張陵忠烛,是天一觀的道長属提。 經常有香客問我,道長美尸,這世上最難降的妖魔是什么冤议? 我笑而不...
    開封第一講書人閱讀 58,851評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮师坎,結果婚禮上恕酸,老公的妹妹穿的比我還像新娘。我一直安慰自己屹耐,他們只是感情好尸疆,可當我...
    茶點故事閱讀 67,868評論 6 392
  • 文/花漫 我一把揭開白布椿猎。 她就那樣靜靜地躺著,像睡著了一般寿弱。 火紅的嫁衣襯著肌膚如雪犯眠。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,688評論 1 305
  • 那天症革,我揣著相機與錄音筐咧,去河邊找鬼。 笑死噪矛,一個胖子當著我的面吹牛量蕊,可吹牛的內容都是我干的。 我是一名探鬼主播艇挨,決...
    沈念sama閱讀 40,414評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼残炮,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了缩滨?” 一聲冷哼從身側響起势就,我...
    開封第一講書人閱讀 39,319評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎脉漏,沒想到半個月后苞冯,有當地人在樹林里發(fā)現了一具尸體,經...
    沈念sama閱讀 45,775評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡侧巨,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年舅锄,在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片司忱。...
    茶點故事閱讀 40,096評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡皇忿,死狀恐怖,靈堂內的尸體忽然破棺而出烘贴,到底是詐尸還是另有隱情禁添,我是刑警寧澤,帶...
    沈念sama閱讀 35,789評論 5 346
  • 正文 年R本政府宣布桨踪,位于F島的核電站,受9級特大地震影響芹啥,放射性物質發(fā)生泄漏锻离。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,437評論 3 331
  • 文/蒙蒙 一墓怀、第九天 我趴在偏房一處隱蔽的房頂上張望汽纠。 院中可真熱鬧,春花似錦傀履、人聲如沸虱朵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,993評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽碴犬。三九已至絮宁,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間服协,已是汗流浹背绍昂。 一陣腳步聲響...
    開封第一講書人閱讀 33,107評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留偿荷,地道東北人窘游。 一個月前我還...
    沈念sama閱讀 48,308評論 3 372
  • 正文 我出身青樓,卻偏偏與公主長得像跳纳,于是被迫代替她去往敵國和親忍饰。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,037評論 2 355

推薦閱讀更多精彩內容