今天小猪在看一个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. 动画requestAnimationFrame

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

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

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

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

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

  9. 深入理解定时器系列第二篇——被誉为神器的requestAnimationFrame

    × 目录 [1]引入 [2]特点 [3]使用[4]兼容[5]应用 前面的话 与setTimeout和setInterval不同,requestAnimationFrame不需要设置时间间隔.这有什么好 ...

随机推荐

  1. Java Web之网上购物系统(提交订单、查看我的订单)

    作业终于做完了,好开心......虽然这一周经历不是那么顺利,但是觉得还是收获了不少,有过想哭的冲动,代码不会写,事情办不好,各种发愁.空间里发小发了带父母出去游玩的照片,瞬间能量值不知道是被击退的多 ...

  2. 实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  3. 使用jsvc启动tomcat

    1.在/usr/local/apache-tomcat-7.0.68/bin中有commons-daemon-native.tar.gz  压缩包 2.解压commons-daemon-native. ...

  4. java 程序中添加socks 5代理

    在需要使用代理的地方添加如下code: System.getProperties().put("socksProxySet","true"); System.g ...

  5. python笔记 - day4-之装饰器

                 python笔记 - day4-之装饰器 需求: 给f1~f100增加个log: def outer(): #定义增加的log print("log") ...

  6. 一个不错的JavaScript解析浏览器路径方法(转)

    JavaScript中有时需要用到当前的请求路径等涉及到url的情况,正常情况下我们可以使用location对象来获取我们需要的信息,本文从另外一个途径来解决这个问题,而且更加巧妙 方法如下: fun ...

  7. Windows下的Nessus安装与启动

    Windows下的Nessus安装与启动 一.安装 在https://www.tenable.com/downloads/nessus下载对应windows版本 双击安装,完成后,访问 https:/ ...

  8. TeamCity 创建jar构建步骤

    1 创建工程 2 配置工程代码来源信息 2.1 From a repository URL 表示从代码仓库创建工程. 2.1.1 parent project 指定父工程,默认是root projec ...

  9. 代理模式——用AOP测试业务层方法的执行时间

    代理模式 对代理模式的理解,通过http://www.runoob.com/design-pattern/proxy-pattern.html 对AOP的代理模式,参考https://www.cnbl ...

  10. 快速准备(复制替换)一套新测试环境,CentOS7 MySQL相关配置

    拿到一个新环境,需要找相关配置,我有一个办法,相对能比较快速地复制一套环境出来. 修改机器配置: virsh 相关几条命令,已完成,后续我再整理补充... 虚拟化相关,参考:https://www.c ...