50 行代碼實現的高性能動畫定時器 raf-interval

寫在前面

raf-interval 是基於 window.requestAnimationFrame() 封裝的定時器。

• Github: github.com/dntzhang/ra…

window.requestAnimationFrame() 方法告訴瀏覽器您但願執行動畫，並請求瀏覽器調用指定的函數在下一次重繪以前更新動畫。該方法將在重繪以前調用的回調做爲參數。因此

若是您想在下一個重繪時爲另外一個框架設置動畫，您的回調例程必須調用 requestAnimationFrame()。
若是你想作逐幀動畫的時候，你應該用這個方法。這就要求你的動畫函數執行會先於瀏覽器重繪動做。一般來講，被調用的頻率是每秒60次，可是通常會遵循W3C標準規定的頻率。若是是後臺標籤頁面，重繪頻率則會大大下降。

經過 raf-interval 咱們能夠把抽象的對象的自身的循環邏輯經過 setRafInterval 書寫在自身的代碼裏，可是卻執行在惟一的 ticker，這樣邏輯不會被拆得支離破碎，更好易維護可擴展。

API

• setRafInterval 開啓定時器
• clearRafInterval 清除定時器

和setInterval 和 clearInterval 用法一致！超級簡便

特性

• 和 setInterval clearInterval 同樣的使用方式
• 當用戶切到其餘tab自動中止循環，低功耗，更省電
• 簡單的API就能製做高性能絲般順滑的的動畫效果
• 智能地中止的開啓循環

使用

沒有 raf-interval 以前:

var i = 0
var interval = setInterval(function() {
    console.log(i++)
    if (i > 6) {
        clearInterval(interval)
    }
},1000)複製代碼

有了 raf-interval 以後:

var i = 0
var rafInterval = setRafInterval(function() {
    console.log(i++)
    if (i > 6) {
        clearRafInterval(rafInterval)
    }
},1000)複製代碼

安裝

$ npm install raf-interval複製代碼

或者從 CDN 拉取:

• unpkg.com/raf-interva…

License

This content is released under the MIT License.