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 ...
随机推荐
- Mysql数据库二进制安装
MySQL数据库有四种安装方法: 源码包编译安装 RPM包安装 二进制文件安装 官方yum源安装 这里我们主要介绍二进制包的安装方法 在MySQL官网下载二进制包并且上传到服务器上 解压二进制包 [r ...
- poj3417
poj3417 题意 给出一颗 n 个节点, n - 1 条边的树,再加上 m 条新边,允许删掉树边和新边各一条,问能使树分为两部分的方案数. 分析 在树的基础上加上不重复的新边一定会构成环,那么考虑 ...
- Spring的<context:property-placeholder.../>在junit中不起作用,失效,解决方法
大家都知道,我们使用spring框架的时候喜欢把可以配置的变量放入一个properties配置文件中,然后在spring的applicationContext.xml配置文件中加入配置: <co ...
- 作为前端,我为什么选择 Angular 2?
转自:https://sanwen8.cn/p/2226GkX.html 没有选择是痛苦的,有太多的选择却更加痛苦.而后者正是目前前端领域的真实写照.新的框架层出不穷:它难吗?它写得快吗?可维护性怎样 ...
- OC对象之旅 weak弱引用实现分析
Runtime学习 -- weak应用源码学习 Runtime源码分析,带你了解OC实现过程.其中参考了大量的大神的代码以及文献,里面也有个人的见解,欢迎拍砖,欢迎交流. 两种常见使用场景 /// ...
- java基础(六章)
一.for循环的使用场合 l while循环--先判断,再循环 while(1.条件表达式){ //2.循环操作 //3.更改循环条件表达式 } l do-while--先循环 ...
- js获取地址栏某个参数
一.获取单个参数: 若地址栏URL为:abc.html?id=123 function getString(){ var locurl=location.href; var sta ...
- ES6 常用总结——第一章(简介、let、const)
ES6整理 1. ECMAScript 6简介 ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准.它的目标,是使得 JavaScript 语言可以用来编写复杂 ...
- thinkphp5.0学习笔记(二)
本文为公司制作API接口后台的小结! 1.命名注意事项: 不要使用易混淆的名字,如index,index01... 我喜欢用拼音... 比如: public function zhuce(Reques ...
- C#基础知识-XML介绍及基本操作(十)
在讲了一系列的基础文档之后,现在开始讲一些实例.对于一些数据不是很大的程序,或者只是一些配置文件,需要本地存储的,完全可以使用XML代替数据库,因为只是去操作单个文件会比操作数据库要简单很多,在程序中 ...