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.
50行代码实现的高性能动画定时器 raf-interval的更多相关文章
- HTML5游戏实战(1):50行代码实现正面跑酷游戏
前段时间看到一个"熊来了"的HTML5跑酷游戏,它是一个典型的正面2D跑酷游戏,这里借用它来介绍一下用Gamebuilder+CanTK开发正面跑酷游戏的基本方法. CanTK(C ...
- python爬虫实战:利用scrapy,短短50行代码下载整站短视频
近日,有朋友向我求助一件小事儿,他在一个短视频app上看到一个好玩儿的段子,想下载下来,可死活找不到下载的方法.这忙我得帮,少不得就抓包分析了一下这个app,找到了视频的下载链接,帮他解决了这个小问题 ...
- 50行代码实现python计算器主要功能
实现功能:计算带有括号和四则运算的式子 3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 基本思路:使用正则表达式提取出每一层 ...
- 50行代码实现缓存,JAVA内存模型原理
遇见这样的高人怎么办??下面是一个简单缓存的实现,相当牛叉!自己看吧,只有50行代码. 摘自:http://www.oschina.net/code/snippet_55577_3887 import ...
- 50行代码实现GAN | 干货演练
2014年,Ian Goodfellow和他的同事发表了一篇论文,向世界介绍了生成对抗网络(GAN).通过对计算图和博弈论的创新性组合,他们表明如果有足够的建模能力,两个相互对抗的模型可以通过普通的反 ...
- 基于requirejs+bluebird,50行代码实现轻巧实用的前端CMD加载器
首先是github地址,可以用git克隆命令也可以直接在git页面下载 https://github.com/kazetotori/js-requireAsync 下载下来后目录结构是这样的 -pac ...
- [Lua]50行代码的解释器,用来演示lambda calculus
嗯,来写写经过: 在知乎上看见用Belleve牛用javascript写了一个精简的lisp解释器 => 我也想写一个,用lua写,能多简单呢? => 写了一个阉割的scheme解释器,包 ...
- OpenCV图像识别初探-50行代码教机器玩2D游戏【华为云技术分享】
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/detai ...
- 50行代码写的一个插件,破解一个H5小游戏
小游戏链接:测测你的眼睛对色差的辨识度http://www.webhek.com/post/color-test.html?from=timeline 废话不多说,先放代码: window.onloa ...
随机推荐
- VR全景项目领导者,VR全景智慧城市
在互联网大趋势下,实体商家都迫切需要一个好的线上广告宣传方式,来推广自己的店铺及产品,传统的线上宣传方式已经无法满足消费者需求,360度全景展示能更真实直观的把商家展示给用户消费者,给商家带来客流及收 ...
- 香港科技大学的VINS_MONO初试
简介 VINS-Mono 是香港科技大学开源的一个VIO,我简单的测试了,发现效果不错.做个简单的笔记,详细的内容等我毕设搞完再弄. 代码主要分为前端(feature tracker),后端(slid ...
- PHP初体验
PHP初体验 提笔写初体验总不知道从何说起,直接聊PHP中的函数.PHP网络技术.数据库操作.PHP模板等感觉又不是初体验.最后还是决定从PHP的面向对象.PHP的魔术方法.PHP的反射.PHP中的异 ...
- linux 系统备份日志
题目: 备份日志 小明是一个服务器管理员,他需要每天备份论坛数据(这里我们用日志替代),备份当天的日志并删除之前的日志.而且备份之后文件名是年-月-日的格式.alternatives.log在/var ...
- Python 操作 Azure Blob Storage
笔者在<Azure 基础:Blob Storage>一文中介绍了 Azure Blob Storage 的基本概念,并通过 C# 代码展示了如何进行基本的操作.最近笔者需要在 Linux ...
- FreeMaker开发教程
FreeMaker简介 FreeMaker其实是一种比较简单的网页展示技术,说白了就是网页模板和数据模型的结合体.这种结合模式的好处就是,分离了网页界面设计人员和编程人员的工作,让他们各司其职. 据个 ...
- python 标准库 -- signal
signal 的核心是 : 设置信号处理函数. 预定义信号 signal.SIG_DFL signal.SIGBUS signal.SIGFPE signal.SIGIO signal.SIGPOLL ...
- Qt WebEngine版本要求
WebEngine是Qt5.4之后加入的新特性,用Qt WebEngine取代之前的Qt Webkit http://wiki.qt.io/QtWebEngine windows版本 windows版 ...
- php中的XML转数组
/** * 最简单的XML转数组 * @param string $xmlstring XML字符串 * @return array XML数组 */ function simplest_xml_to ...
- (cljs/run-at (JSVM. :browser) "命名空间就这么简单")
前言 一个cljs文件定义一个命名空间,通过命名空间可以有效组织代码,这是构建大型系统必备的基础设施.本篇我们就深入理解cljs中的命名空间吧! 好习惯从"头"开始 每个cljs ...