你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
当耐特

50行代码实现的高性能动画定时器 raf-interval 0个回复 专栏 @ 框架与库

当耐特 发布于 2 月前

写在前面

raf-interval 是基于 window.requestAnimationFrame() 封装的定时器。

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

License

This content is released under the MIT License.

等待第一条回复
登录后回复,如无账号,请使用邀请码注册