requestAnimationFrame是如何看头

作者: 计算机网络技术  发布:2019-09-15

再看人家达成粒子效果的时候会有以下代码

复制代码 代码如下:

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,一千/60),可是:
1.所有人家浏览器及时精度是差别的。
2.对于setTimeout 和setInterval 实现机制并非我们供给的那么,当经过一定的时辰后,浏览器会将那部分代码出席到UI的绘图队列在那之中,如若那个时候UI线程很忙,有任何的天职阻塞,动画的下一帧就不会如期施行。经过长日子的总结堆加之后,或然大家距离原本的光阴点引用误差更大。

Mozilla 的 罗Bert 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咯。

你大概感兴趣的作品:

  • 缓动函数requestAnimationFrame 越来越好的兑现浏览器经动画
  • 选取requestAnimationFrame完结js动画品质好
  • BOM系列第二篇之放大计时器requestAnimationFrame
  • JS动画效果代码3
  • 用js完毕的模拟jquery的animate自定义动画(2.5K)
  • 在AngularJS应用中落实部分动画效果的代码
  • JS剖断页面加载状态以及丰硕遮罩和缓冲动画的代码
  • js动画(animate)轻松引擎代码示例
  • 深刻精通requestAnimationFrame的卡通循环

本文由今晚买四不像发布于计算机网络技术,转载请注明出处:requestAnimationFrame是如何看头

关键词:

上一篇:轻松表明介绍
下一篇:没有了