zoukankan      html  css  js  c++  java
  • 50行代码实现的高性能动画定时器 raf-interval

    写在前面

    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.

  • 相关阅读:
    Node.js核心模块-net
    ie8兼容rgba写法
    Node.js核心模块-http
    Node.js核心模块-fs文件系统
    js监听滚动结束
    mac本地安装全局包报错npm WARN checkPermissions
    安全测试回顾(一)
    python学习笔记(二):python数据类型
    python学习笔记(一):python简介和入门
    Centos下安装Redis
  • 原文地址:https://www.cnblogs.com/iamzhanglei/p/7209924.html
Copyright © 2011-2022 走看看