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 相关文章推荐
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
jQuery常见开发技巧详细整理
Jan 02 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
JavaScript中return false的用法
Mar 12 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
angular2中使用第三方js库的实例
Feb 26 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
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对象递归引用造成内存泄漏分析
2014/08/28 PHP
Php-Redis安装测试笔记
2015/03/05 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
为javascript添加String.Format方法
2020/08/11 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
React Router基础使用
2017/01/17 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020/05/18 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
python strip()函数 介绍
2013/05/24 Python
python实现无证书加密解密实例
2014/10/27 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
Python的Tkinter点击按钮触发事件的例子
2019/07/19 Python
Python实现打印实心和空心菱形
2019/11/23 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
python 绘制场景热力图的示例
2020/09/23 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
采购经理岗位职责
2014/02/16 职场文书
婚纱店策划方案
2014/05/22 职场文书
学习雷锋标语
2014/06/25 职场文书
2014年小学班主任工作总结
2014/11/08 职场文书
Java对文件的读写操作方法
2022/04/29 Java/Android
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python