廣義說：一切通過js改變的視覺呈現(xiàn)都叫動(dòng)畫；例如，按鈕，鏈接等元素交互反饋。

狹義說：通過定時(shí)器連續(xù)調(diào)用js函數(shù)進(jìn)行元素屬性改變產(chǎn)生的視覺動(dòng)畫效果。

定時(shí)器

定時(shí)器是JavaScript動(dòng)畫的核心技術(shù)；

setTimeout(),setInterval()是大家熟知的，以前經(jīng)常使用的；

一般都是做些輔助性，錦上添花的事；

細(xì)心的人可能會(huì)發(fā)現(xiàn)一個(gè)現(xiàn)象，從其他標(biāo)簽頁(yè)切換到有循環(huán)動(dòng)畫頁(yè)面會(huì)有卡頓和急速幀切換現(xiàn)象；

問題就在于他們的內(nèi)在運(yùn)行機(jī)制；

認(rèn)識(shí)setTimeout

第一個(gè)參數(shù)推薦用函數(shù)形式，字符串形式會(huì)兩次解析，還有eval一樣的問題；

不止兩個(gè)參數(shù)，可以更多，見示例1；

this指向問題，見示例2；

返回值是個(gè)整數(shù)；

clearTimeout(timer)取消定時(shí)器；

setInterval,clearInterval同上；

示例1：

setTimeout(function(a,b){ 
 console.log(a+b); 
},1000,1,1)；

示例2：

var a = 0;
function foo(){
 console.log(this.a);
};
var obj = {
 a : 2,
 foo:foo
}
setTimeout(obj.foo,100);

運(yùn)行機(jī)制

示例：

setTimeout(function(){ 
 console.log(1); 
}); 
console.log(0);

原因：加入隊(duì)列，阻塞執(zhí)行。

setTimeout圖例：

setInterval圖例：

存在即合理

父子元素事件冒泡，需要先執(zhí)行父元素，見示例3；

用戶自定義的回調(diào)函數(shù)，通常在瀏覽器的默認(rèn)動(dòng)作之前觸發(fā)，見示例4；

示例3：

<div id="myDiv" style="height: 100px;width: 100px;background-color: pink;"></div>
<script>
myDiv.onclick = function(){
 setTimeout(function(){
  alert(0);
 })
}
document.onclick = function(){
 alert(1);
}
</script>

示例4：

<input type="text" id="myInput">
<script>
myInput.onkeypress = function(event) {
 setTimeout(function(){
  myInput.value = myInput.value.toUpperCase();
 });
}
</script>

認(rèn)識(shí)requestAnimationFrame

用法與setTimeout類似，只是不需要時(shí)間參數(shù)；

機(jī)制完全不同：

1，setTimeout是異步操作，加入任務(wù)隊(duì)列（ event loop ），當(dāng)js引擎線程中同步代碼執(zhí)行完才會(huì)從任務(wù)隊(duì)列中取出執(zhí)行；

2，raf是用戶代理（瀏覽器）專門針對(duì)動(dòng)畫開發(fā)的接口，用戶代理會(huì)以合適的頻率進(jìn)行動(dòng)畫幀更新（一般同顯示器刷新頻率，1000/60ms），在隱藏或者非活動(dòng)頁(yè)面會(huì)停止幀更新，節(jié)省CPU資源；

3，raf示例

raf簡(jiǎn)單兼容

window.requestAnimFrame = (function(){ 
 return window.requestAnimationFrame || 
   window.webkitRequestAnimationFrame ||   
   window.mozRequestAnimationFrame || 
   function( callback ){  
    window.setTimeout(callback, 1000 / 60);
    };
  })();

最新評(píng)論