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

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


代码如下:

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咯。

赞 (0)

相关推荐

  • 深入理解requestAnimationFrame的动画循环

    一.初识requestAnimationFrame requestAnimationFrame解决了浏览器不知道javascript动画什么时候开始.不知道最佳循环间隔时间的问题.它是跟着浏览器的绘制走的,如果浏览器绘制间隔是16.7ms,它就按这个间隔绘制:如果浏览器绘制间隔是10ms, 它就按10ms绘制.这样就不会存在过度绘制的问题,动画不会丢帧. 内部是这么运作的: 浏览器页面每次要重绘,就会通知requestAnimationFrame; 这是资源非常高效的一种利用方式. 怎么讲呢?

  • js动画(animate)简单引擎代码示例

    用惯了jquery的同学,相信都很欣赏其动画引擎.确实相对比较完善!如果,如果想像力足够丰富的话,相信可以做出超出想像的效果.当然,跟2d库比起来,还是相差相当一段距离.jquery压根也不是专门为动画而设计的.模拟真实世界方面,还是不足的.但在web世界里还是游刃有余的.动画其实一直是flash的专属领地(web区哉).只是它常常沦为黑客攻击的漏洞所在,而且要装插件,有时候文件实在太大,而且性耗实在是高啊.html5出现后,其实adobe自己都转移阵地到html5了.当然,我觉得很长一段时间内

  • 用js实现的模拟jquery的animate自定义动画(2.5K)

    后来发现还不错.不如继续写下去. 这个版本基本上跟jquery的animate一样了. 我是说效果基本上一样了.(效率还没测试过.): 如果有专业测试人员 帮我测试下. 1:功能说明 兼容主流浏览器. 1:支持回调函数: 2:支持级联动画调用: 3:支持delay动画队列延迟: 4:支持stop停止动画: 5:支持opacity透明度变化: 6:支持+= -= *= /=操作: 7:支持单位操作(px, %); 2:使用说明 jelle(A).animate(B, C, D); A:需要执行动画

  • JS动画效果代码3

    慢慢来,这次实现了向任意方向扩展! 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  &l

  • 在AngularJS应用中实现一些动画效果的代码

    在Angular当中,CSS和JavaScript之间唯一的区别就是它们的定义.没有什么区别妨碍到被定义的动画被使用.首先,我们需要加载ngAnimate模块到我们应用的root模块当中. angular.module('coursesApp', ['ngAnimate']); 而所有将被处理的JavaScript动画事件依然保持不变.以下是一个直接支持的动画列表和它们对应的不同行为: 指令事件集 ng-view ng-include ng-switch ng-if  enter leave n

  • 使用requestAnimationFrame实现js动画性能好

    使用requestAnimationFrame实现js动画性能好.先给大家简单介绍下requestAnimationFrame比起setTimeout.setInterval有哪些优势? 示例一: requestAnimationFrame 比起 setTimeout.setInterval的优势主要有两点: 1.requestAnimationFrame 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说,这个频率为每秒6

  • BOM系列第二篇之定时器requestAnimationFrame

    BOM系列第二篇之定时器requestAnimationFrame

    引入 计时器一直是javascript动画的核心技术.而编写动画循环的关键是要知道延迟时间多长合适.一方面,循环间隔必须足够短,这样才能让不同的动画效果显得平滑流畅:另一方面,循环间隔还要足够长,这样才能确保浏览器有能力渲染产生的变化 大多数电脑显示器的刷新频率是60Hz,大概相当于每秒钟重绘60次.大多数浏览器都会对重绘操作加以限制,不超过显示器的重绘频率,因为即使超过那个频率用户体验也不会有提升.因此,最平滑动画的最佳循环间隔是lOOOms/60,约等于16.6ms 而setTimeout和

  • JS判断页面加载状态以及添加遮罩和缓冲动画的代码

    复制代码 代码如下: function initialize() { addcloud(); //为页面添加遮罩 document.onreadystatechange = subSomething; //监听加载状态改变 } function addcloud() { var bodyWidth = document.documentElement.clientWidth; var bodyHeight = Math.max(document.documentElement.clientHei

  • 缓动函数requestAnimationFrame 更好的实现浏览器经动画

    写缓动函数用到requestAnimationFrame函数,之前了解过一些,但总觉得又不是很了解,所以翻译一篇老外的文章,以便学习分享. requestAnimationFrame是什么? 以前我们做动画需要一个定时器,每间隔多少毫秒就做出一些改变.现在有个好消息:浏览器厂商已经决定提供一个专门做动画的方法,即requestAnimationFrame(),而且基于浏览器的层面也能更好的进行优化.但是呢,这只是一个做动画的基础API,即不基于DOM元素的style变化,也不基于canvas,或

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

    再看别人实现粒子效果的时候会有以下代码: 复制代码 代码如下: window.requestAnimationFrame || (window.requestAnimationFrame = window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callb

  • JS使用window.requestAnimationFrame()实现逐帧动画

    JS使用window.requestAnimationFrame()实现逐帧动画

    window.requestAnimationFrame() 方法告诉浏览器您希望执行动画,并请求浏览器调用指定的函数在下一次重绘之前更新动画.该方法使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用. 如果你想做逐帧动画的时候,你应该用这个方法.这就要求你的动画函数执行会先于浏览器重绘动作.通常来说,被调用的频率是每秒60次,但是一般会遵循W3C标准规定的频率.如果是后台标签页面,重绘频率则会大大降低. 基本语法: requestID = window.requestAnimatio

  • JavaScript requestAnimationFrame动画详解

    JavaScript requestAnimationFrame动画详解

    进入web2.0时代,在网页中实现动画已经不再局限于一种方法 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition; 你还可以用通过在canvas上作图来实现动画,也可以借助jQuery动画相关的API方便地实现; 当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来实现动画,前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果. 认识JavaScrip

  • 详解requestAnimationFrame和setInterval该如何选择

    目录 正文 requestAnimationFrame的工作方式 setInterval的工作方式 requestAnimationFrame和setInterval之间的区别 适用场景 写在后面 正文 在Web前端开发中,使用计时器是实现动画效果.周期性任务.定时器等常见操作的核心.JavaScript提供了两种计时器:requestAnimationFrame和setInterval.虽然它们看起来很相似,但它们的工作方式却有很大的不同. requestAnimationFrame的工作方式

  • promise结合requestAnimationFrame用法示例

    目录 promise基础用法 promise结合requestAnimationFrame 理解requestAnimationFrame 结合promise与requestAnimationFrame promise基础用法 js为了解决单线程的异步执行问题,引入了事件循环队列体系,这个体系里的队列中都是一个个排着队等待执行的宏任务,settimeout就是一个宏任务,promise是典型的微任务,微任务概念是相对宏任务而言的,可以把微任务理解为宏任务中的队列.因为宏任务是按序执行,所以如果当

  • 深究AngularJS中ng-drag、ng-drop的用法

    1.相关地址: 插件下载:https://github.com/fatlinesofcode/ngDraggable/blob/master/ngDraggable.js 2.讲解 <div ng-drop="true" ng-drop-success="dropComplete($index,$data,$event)" ng-repeat="item in content"> <li ng-drag="true&q

随机推荐