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

寫在前面

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

• Github: https://github.com/dntzhang/raf-interval

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 拉取:

• https://unpkg.com/raf-interval@0.3.0/raf-interval.js

License

This content is released under the MIT License.