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 相关文章推荐
js变量作用域及可访问性的探讨
Nov 23 Javascript
JavaScript 事件对象的实现
Jul 13 Javascript
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
读jQuery之十四 (触发事件核心方法)
Aug 23 Javascript
使用jquery实现简单的ajax
Jul 08 Javascript
jquery+css3打造一款ajax分页插件(自写)
Jun 18 Javascript
浅析JS动态创建元素【两种方法】
Apr 20 Javascript
jQuery返回定位插件详解
May 15 jQuery
jQuery判断网页是否已经滚动到浏览器底部的实现方法
Oct 27 jQuery
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 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
基于mysql的论坛(2)
2006/10/09 PHP
上传多个文件的PHP脚本
2006/11/26 PHP
PHP 木马攻击防御技巧
2009/06/13 PHP
smarty简单入门实例
2014/11/28 PHP
PHP如何实现跨域
2016/05/30 PHP
PHP析构函数destruct与垃圾回收机制的讲解
2019/03/22 PHP
一些常用的Javascript函数
2006/12/22 Javascript
JQuery 常用操作代码
2010/03/14 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
javascript 动态样式添加的简单实现
2016/10/11 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
微信小程序 选项卡的简单实例
2017/05/24 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
python基础教程之udp端口扫描
2014/02/10 Python
Python最长公共子串算法实例
2015/03/07 Python
实例说明Python中比较运算符的使用
2015/05/13 Python
python实现Zabbix-API监控
2018/09/17 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
Python过滤序列元素的方法
2020/07/31 Python
python实现KNN近邻算法
2020/12/30 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
自我鉴定的范文
2013/10/03 职场文书
销售实习自我鉴定
2013/12/07 职场文书
增员口号大全
2014/06/18 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL