JS動畫之定時器詳解

vvpvvp 發布于2019-08-01 18:44 / 1751人閱讀

摘要：廣義說一切通過改變的視覺呈現都叫動畫例如，按鈕，鏈接等元素交互反饋。狹義說通過定時器連續調用函數進行元素屬性改變產生的視覺動畫效果。

廣義說：一切通過js改變的視覺呈現都叫動畫；例如，按鈕，鏈接等元素交互反饋。
狹義說：通過定時器連續調用js函數進行元素屬性改變產生的視覺動畫效果。

定時器

定時器是JavaScript動畫的核心技術；
setTimeout(),setInterval()是大家熟知的，以前經常使用的；
一般都是做些輔助性，錦上添花的事；
細心的人可能會發現一個現象，從其他標簽頁切換到有循環動畫頁面會有卡頓和急速幀切換現象；
問題就在于他們的內在運行機制；

認識setTimeout

第一個參數推薦用函數形式，字符串形式會兩次解析，還有eval一樣的問題；
不止兩個參數，可以更多，見示例1；
this指向問題，見示例2；
返回值是個整數；
clearTimeout(timer)取消定時器；
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);

運行機制

示例：

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

原因：加入隊列，阻塞執行。

setTimeout圖例：

setInterval圖例：

存在即合理

父子元素事件冒泡，需要先執行父元素，見示例3；
用戶自定義的回調函數，通常在瀏覽器的默認動作之前觸發，見示例4；

示例3：

示例4：

認識requestAnimationFrame

用法與setTimeout類似，只是不需要時間參數；
機制完全不同：
1， setTimeout是異步操作，加入任務隊列（ event loop ），當js引擎線程中同步代碼執行完才會從任務隊列中取出執行；
2，raf是用戶代理（瀏覽器）專門針對動畫開發的接口，用戶代理會以合適的頻率進行動畫幀更新（一般同顯示器刷新頻率，1000/60ms），在隱藏或者非活動頁面會停止幀更新，節省CPU資源；
3，raf示例

raf簡單兼容

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

參考：
setTimeout詳細介紹

GPU云服務器云服務器 js原生動畫詳解看動畫學算法之:hashtable 定時器詳解 js 暫停動畫

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52076.html

JS動畫之定時器詳解

摘要：廣義說一切通過改變的視覺呈現都叫動畫例如，按鈕，鏈接等元素交互反饋。狹義說通過定時器連續調用函數進行元素屬性改變產生的視覺動畫效果。廣義說：一切通過js改變的視覺呈現都叫動畫；例如，按鈕，鏈接等元素交互反饋。狹義說：通過定時器連續調用js函數進行元素屬性改變產生的視覺動畫效果。定時器定時器是JavaScript動畫的核心技術；setTimeout(),setInterval()是...

justjavac 2019-08-22 15:38 評論0 收藏0
【連載】前端個人文章整理-從基礎到入門

摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理從最開始萌生寫文章的想法，到著手...

madthumb 2019-08-23 14:15 評論0 收藏0
小菊花課堂之JS的防抖與節流

摘要：文章來源詳談防抖和節流輕松理解函數節流和函數防抖函數防抖和節流好啦，今天的小菊花課堂之的防抖與節流的內容就告一段落啦，感各位能耐心看到這里。前言陸游有一首《冬夜讀書示子聿》——古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學習或工作中，不斷的印證著這首詩的內涵。所以，又有了此篇小菊花文章。詳解在前端開發中，我們經常會碰到一些會持...

leoperfect 2019-08-23 13:53 評論0 收藏0