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>