今天小猪在看一个html5的demo时一直在找他的动画是怎么实现的,按照我的理解就应该是调用setInterval来循环调用动画函数来实现。但是在Demo中就是找不到这个函数。干着急的小猪只好一步一步的来看是怎么实现的,之后发现了这么一句代码:

window.RAF = (function () {
return window.requestAnimationFrame ||
           window.webkitRequestAnimationFrame || 
           window.mozRequestAnimationFrame || 
           window.oRequestAnimationFrame || 
           window.msRequestAnimationFrame || 
           function (callback) { window.setTimeout(callback, 1000 / 60); };
})();

原来是这样。

window.requestAnimationFrame 告诉浏览器您要执行的动画并且请求浏览器的在下一个动画帧重绘窗口,方法在浏览器重绘之前作为一个回调函数被调用,就是告诉浏览器在刷新屏幕的时候,调用这个方法。

在90年代,那个互联网做广告的年代,window上面各种走马灯,各种状态文字都是用setTimeout来时实现的。

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

window.requestAnimationFrame的更多相关文章

  1. window.requestAnimationFrame() ,做逐帧动画,你值得拥有

    window.requestAnimationFrame() 方法告诉浏览器您希望执行动画,并请求浏览器调用指定的函数在下一次重绘之前更新动画.该方法使用一个回调函数作为参数,这个回调函数会在浏览器重 ...

  2. window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果

    window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作 ...

  3. WebGL中使用window.requestAnimationFrame创建主循环

    今天总结记录一下WebGL中主循环的创建和作用.我先说明什么是主循环,其实单纯的webgl不存在主循环这个概念,这个概念是由渲染引擎引入的,主循环就是利用一个死循环或无截止条件的递归达到定时刷新can ...

  4. 网页性能管理详解:浅谈chrome-Timeline及window.requestAnimationFrame()方法

    你遇到过性能很差的网页吗? 这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅. 你会有什么反应?我猜想,大多数用户会关闭这个页面,改为访问其他网站.作为一个开发 ...

  5. window.requestAnimationFrame()的使用,处理更流畅的动画效果

    https://blog.csdn.net/w2765006513/article/details/53843169 window.requestAnimationFrame()的使用 2016年12 ...

  6. Window.requestAnimationFrame()动画更新

    概述 Window.requestAnimationFrame()方法告诉浏览器你希望执行动画,并且再下一次重绘之前要求浏览器调用一个特定的函数去更新动画.该方法把一个回调函数作为参数,该回调函数会在 ...

  7. 动画requestAnimationFrame

    前言 在研究canvas的2D pixi.js库的时候,其动画的刷新都用requestAnimationFrame替代了setTimeout 或 setInterval 但是jQuery中还是采用了s ...

  8. 深入理解定时器系列——被誉为神器的requestAnimationFrame

    与setTimeout和setInterval不同,requestAnimationFrame不需要设置时间间隔.这有什么好处呢?为什么requestAnimationFrame被称为神器呢?本文将详 ...

  9. 我的前端故事----疯狂倒计时(requestAnimationFrame)

    很久没有更新博客了...为了双十一准备了不少活动,终于结束了,有时间静静的坐下来总结一下了,在活动中最常用的就是倒计时了,晚上也有很多倒计时的例子了,那么今天带来的是一个新的方法和思路. 既然要介绍新 ...

随机推荐

  1. Netty中的坑(下篇)

    其实这篇应该叫Netty实践,但是为了与前一篇名字保持一致,所以还是用一下坑这个名字吧. Netty是高性能Java NIO网络框架,在很多开源系统里都有她的身影,而在绝大多数互联网公司所实施的服务化 ...

  2. JAVA编程“性能说”(java编程需要做的26件事)

    转载于 http://www.csdn.net/article/2012-06-01/2806249 最近的机器内存又爆满了,除了新增机器内存外,还应该好好review一下我们的代码,有很多代码编写过 ...

  3. JavaBean基础转载

    JavaWeb:JavaBean基础 JavaBean基础 JavaBean简介: 1.JavaBean是一种可以重复使用的类,可以没有用户界面,主要负责业务数据或者处理事物(数据运算.操作数据库) ...

  4. Editplus中使用正则表达式压缩代码

    快捷键ctrl+H打开查找与替换窗口,勾上使用正则表达式选项,查找项输入\t|^( )+,替换范围选当前文档,选择全部替换按钮,然后查找项在输入\n,再选择全部替换按钮. 大功告成!

  5. js之checkbox的代码全选/全不选,使用id获取元素,而不是name

    每当有多个选项的时候,都会有一种想法是:全选,全不选,如果子选项有被选,父选项也得被选. 注意:这里是根据id来获取元素的,但是不能直接用getElementById,因为那只能返回一个,而不是集合. ...

  6. IIS Tomcat共享80端口

    为什么有这种需求, 原因是这样的, 公司有一个Java的web项目,在另一台服务器A上,最近老板一时兴起,想把他合并到这台稳定点的服务器B上,服务器B上使用IIS来寄宿asp.net 网站, 怎么办呢 ...

  7. Python作业-选课系统

    目录 Python作业-选课系统 days6作业-选课系统: 1. 程序说明 2. 思路和程序限制 3. 选课系统程序目录结构 4. 测试帐户说明 5. 程序测试过程 title: Python作业- ...

  8. char varchar

    对于字符类型的有:char:固定长度,存储ANSI字符,不足的补英文半角空格.nchar:固定长度,存储Unicode字符,不足的补英文半角空格varchar:可变长度,存储ANSI字符,根据数据长度 ...

  9. S2算法应用

    需求:计算不同区域范围,X公里半径内实体店或场站覆盖率. 实现思路: 为了便于理解,将地球看成一个基于经纬度线的坐标系.将经度和纬度看成二维坐标系中的两个纬度,横轴表示经度[-180o, 0o),(0 ...

  10. UWP 使用Windows Community Toolkit 的OneDrive service上传下载文件

    上一年年底写过两篇文章 UWP 使用OneDrive云存储2.x api(一)[全网首发] UWP 使用OneDrive云存储2.x api(二)[全网首发] 没想到半年之后,VS编译提示方法已经过时 ...