50行代码实现的高性能动画定时器 raf-interval

最新推荐文章于 2024-03-21 11:31:49 发布

wangyunfeis

最新推荐文章于 2024-03-21 11:31:49 发布

阅读量350

点赞数

raf-interval是一款基于window.requestAnimationFrame()封装的定时器库，它可以帮助开发者制作高性能且平滑的动画效果，同时具备自动暂停及恢复的功能，以节省资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在前面

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.