浏览器动画window.requestAnimationFrame

新手发帖，很多方面都是刚入门，有错误的地方请大家见谅，欢迎批评指正

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

 

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

 这个是底到什么意思，它又是怎么用的呢？

 

 

     window.requestAnimationFrame  告知览浏器您要执行的动画并且请求览浏器的在下一个动画帧重绘窗口。该方法在览浏重器绘之前作为一个回调数函被调用。

    就是告知览浏器在刷新屏幕的时候，调用这个方法。

    /*********************************我是分割线***********************************/

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

    每日一道理
如果说生命是一座庄严的城堡，如果说生命是一株苍茂的大树，如果说生命是一只飞翔的海鸟。那么，信念就是那穹顶的梁柱，就是那深扎的树根，就是那扇动的翅膀。没有信念，生命的动力便荡然无存；没有信念，生命的美丽便杳然西去。（划线处可以换其他词语）

 1 (function(){
 2     function update(){
 3 
 4         setTimeout(update,1000)
 5 
 6     } 
 7     setTimeout(update,1000)
 8 
 9 })();
10 
11 (function(){
12 
13     function update(){
14         //
15 
16     }
17     setInterval(update,1000)
18 
19 })();

动画的问题最辣手的是延时问题，对于显示器说来，每一秒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咯。

 

文章结束给大家分享下程序员的一些笑话语录： 刹车失灵
有一个物理学家，工程师和一个程序员驾驶着一辆汽车行驶在阿尔卑斯山脉 上，在下山的时候，忽然，汽车的刹车失灵了，汽车无法控制地向下冲去， 眼看前面就是一个悬崖峭壁，但是很幸运的是在这个悬崖的前面有一些小树 让他们的汽车停了下来， 而没有掉下山去。 三个惊魂未定地从车里爬了出来。
物理学家说， “我觉得我们应该建立一个模型来模拟在下山过程中刹车片在高 温情况下失灵的情形”。
工程师说， “我在车的后备厢来有个扳手， 要不我们把车拆开看看到底是什么 原因”。
程序员说，“为什么我们不找个相同的车再来一次以重现这个问题呢？”