window.requestAnimationFrame是什么意思,怎么用


Posted in Javascript onJanuary 13, 2013

再看别人实现粒子效果的时候会有以下代码

window.requestAnimationFrame || (window.requestAnimationFrame = window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame 
|| window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
function(callback, element) { 
return window.setTimeout(function() { 
return callback(+new Date()); 
}, 1000 / 60) 
});

这个到底是什么意思,它又是怎么用的呢?
window.requestAnimationFrame 告诉浏览器您要执行的动画并且请求浏览器的在下一个动画帧重绘窗口。该方法在浏览器重绘之前作为一个回调函数被调用。
就是告诉浏览器在刷新屏幕的时候,调用这个方法。

window.requestAnimationFrame的前世今生
在90年代,那个互联网做广告的年代,window上面各种走马灯,各种状态文字都是用setTimeout来时实现的,如下:

(function(){ 
function update(){ 
setTimeout(update,1000) 
} 
setTimeout(update,1000) 
})(); 
(function(){ 
function update(){ 
// 
} 
setInterval(update,1000) 
})();

动画的问题最棘手的是延时问题,对于显示器来说,每一秒60帧频,如果我们按照浏览器的刷新速率来控制我们的动画时间的话会有很好的效果,即17ms,setTimeout(callback,1000/60),但是:
1.各个浏览器及时精度是不一样的。
2.对于setTimeout 和setInterval 实现机制并不是我们需要的那样,当经过特定的时间后,浏览器会将那部分代码加入到UI的绘制队列当中,如果这个时候UI线程很忙,有其它的任务阻塞,动画的下一帧就不会按时执行。经过长时间的累计堆加之后,可能我们偏离原来的时间点误差越来越大。

Mozilla 的 Robert O'Callahan 在思考这个问题,并想出了一个独特的方案。他指出CSS transitions 和 animations的优势在于浏览器知道哪些动画将会发生,所以得到正确的间隔来刷新UI。而javascript动画,浏览器不知道动画正在发生。他的解决方案是创建一个mozRequestAnimationFrame()方法来告诉浏览器哪些javascript代码正在执行,这使得浏览在执行一些代码后得到优化。

mozRequestAnimationFrame()方法接受一个参数,是一个屏幕重绘前被调用的函数。这个函数用来对生成下合适的dom样式的改变,这些改变用在下一次重绘中。你可以像调用setTimeout()一样的方式链式调用mozRequestAnimationFrame()。
这个就是window.requestAnimationFrame的由来。

在Mozilla官网看到如下
Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future version of browsers as the spec changes.
由于这项技术的规范还没有稳定,正确的前缀使用在各种浏览器的兼容性表。还要注意的是语法和行为的实验技术是如有改变,在未来版本的浏览器的规格变化。

目前在Android系统下是不支持的,动画只能setTimeout咯。

Javascript 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
input框中的name和id的区别
Nov 16 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
jquery获取div宽度的实现思路与代码
Jan 13 #Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 #Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 #Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 #Javascript
关于全局变量和局部变量的那些事
Jan 11 #Javascript
jquery延迟加载外部js实现代码
Jan 11 #Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 #Javascript
You might like
Php+SqlServer实现分页显示
2006/10/09 PHP
用php+mysql一个名片库程序
2006/10/09 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
文本链接逐个出现的js脚本
2007/12/12 Javascript
JsDom 编程小结
2011/08/09 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
React实现全局组件的Toast轻提示效果
2018/09/21 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
jQuery实现回到顶部效果
2020/10/19 jQuery
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python ZipFile模块详解
2013/11/01 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
python-numpy-指数分布实例详解
2019/12/07 Python
Python批量启动多线程代码实例
2020/02/18 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
执行Python程序时模块报错问题
2020/03/26 Python
英语专业毕业生自荐信
2013/10/28 职场文书
财务部岗位职责
2013/11/19 职场文书
2014派出所所长群众路线对照检查材料思想汇报
2014/09/18 职场文书
1000字打架检讨书
2014/11/03 职场文书