requestAnimationFrame 简介
requestAnimationFrame
requestAnimationFrame是浏览器用于定时循环操作的一个接口,类似于setTimeout,主要用途是按帧对网页进行重绘。
设置这个API的目的是为了让各种网页动画效果(DOM动画、Canvas动画、SVG动画、WebGL动画)能够有一个统一的刷新机制,从而节省系统资源,提高系统性能,改善视觉效果。代码中使用这个API,就是告诉浏览器希望执行一个动画,让浏览器在下一个动画帧安排一次网页重绘。
requestAnimationFrame的优势,在于充分利用显示器的刷新机制,比较节省系统资源。显示器有固定的刷新频率(60Hz或75Hz),也就是说,每秒最多只能重绘60次或75次,requestAnimationFrame的基本思想就是与这个刷新频率保持同步,利用这个刷新频率进行页面重绘。此外,使用这个API,一旦页面不处于浏览器的当前标签,就会自动停止刷新。这就节省了CPU、GPU和电力。
不过有一点需要注意,requestAnimationFrame是在主线程上完成。这意味着,如果主线程非常繁忙,requestAnimationFrame的动画效果会大打折扣。
requestAnimationFrame使用一个回调函数作为参数。这个回调函数会在浏览器重绘之前调用。
requestID = window.requestAnimationFrame(callback);
Polyfill
目前,高版本浏览器Firefox 23 / IE 10 / Chrome / Safari)都支持这个方法。可以用下面的方法,检查浏览器是否支持这个API。如果不支持,则自行模拟部署该方法。
window.requestAnimFrame = (function(){return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){window.setTimeout(callback, 1000 / 60);};
})();
上面的代码按照1秒钟60次(大约每16.7毫秒一次),来模拟requestAnimationFrame。
使用requestAnimationFrame的时候,只需反复调用它即可。
function repeatOften() {// Do whateverrequestAnimationFrame(repeatOften);
}requestAnimationFrame(repeatOften);
取消重绘可以用 cancelAnimationFrame。
window.cancelAnimationFrame(requestID);
转载自:
https://blog.csdn.net/sinat_34930640/article/details/78177430?utm_source=copy
requestAnimationFrame 简介相关推荐
- JS 动画基础: 细说 requestAnimationFrame
JS 动画基础: 细说 requestAnimationFrame 文章目录 JS 动画基础: 细说 requestAnimationFrame 简介 参考 完整示例代码 正文 `setInterva ...
- window.requestAnimationFrame Web3D渲染帧率控制
目录 window.requestAnimationFrame简介 定义 语法 参数 返回值 使用注意 两种方式控制帧率 默认帧数中取适当次数更新 用延时控制帧率更新的频率 总结 注意: window ...
- python pandas n行求和,Python 的 Pandas 对矩阵的行进行求和
简单socket()编程 客户端: 1.socket( int af, int type, int protocol) socket()函数用于根据指定的地址族.数据类型和协议来分配一个套接口的描述字 ...
- mysql8.0创建dbcp_dbcp_c3p0连接mysql8.0.13
背景 学习数据库的使用,上次没有记录,现在都回忆不起来了,所以这次重新学的时候顺便记录下. 配置环境 win10 jdk11 idea mysql8.0.13 DBCP连接使用 用配置文件目前我连接不 ...
- HTML5 requestAnimationFrame( ) 动画API
简介 当用JS做动画效果时,一般用setTimeout()或setInterval()来进行动画效果的制作,现在好了,出现了一个专门用于处理动画的API--requestAnimationFrame( ...
- RxJS异步编程的简介
RxJs.RxJava.RxAndroid.RxSwift等是异步编程框架,对于前端工程师来说,RxJs框架是比较新颖. 中文官网地址:http://cn.rx.js.org/ RxJs简介 RxJS ...
- html作品简介代码,HTML5的标签的代码的简单介绍 HTML5标签的简介
HTML5的标签的代码的简单介绍 HTML5标签的简介 发布时间:2012-05-28 14:43:34 作者:佚名 我要评论 本文主要介绍了HTML5的标签.不同于以前的标签.更简单.更方便 ...
- requestAnimationFrame动画控制详解
前端开发whqet,csdn,王海庆,whqet,前端开发专家 还在使用setInterval吗,你out了,requestAnimationFrame可以实现更为经济.更加准确的控制动画,今天来看看 ...
- html5是什么意思,HTML5是什么 HTML5是什么意思 HTML5简介
HTML5是什么 HTML5是什么意思 HTML5简介 发布时间:2012-10-26 15:04:00 作者:佚名 我要评论 随着Windows8正式版发布的脚步近在咫尺,近来关于Win8. ...
最新文章
- UITextView左边距为0
- OpenCV凸凹面函数convexHull使用的实例(附完整代码)
- YOLOV3 --BUG---No labels in D:\yolov5\train_data\train.cache. Can not train without labels.
- 哔哩哔哩2019年Q4及全年财报:全年营收67.8亿元,同比增长64%
- Cocos2d-x建工程时避免copy文件夹和库
- 买基金你们都亏了多少钱?
- Python 标准库 —— json
- mysql必知必会的数据_MySQL必知必会---数据过滤
- 微pe工具箱 系统安装教程_【微pe安装系统教程】微pe安装系统教程win7_微pe装系统教程...
- 嵌入式Linux开发环境搭建
- 触摸屏下的MFC程序
- 如何在ppt中生成柱状图_在PPT中怎么制作图表?PPT制作图表的方法
- XP IIS下配置.net的问题总结与简单解决方法
- LTE下行传输机制——PHICH信道
- 《卓有成效程序员》第四章
- python加上子类的特性_Python 中 Meta Classes详解
- Solaris IPMP配置
- PTA 天梯赛L1-079 天梯赛的善良 (20 分)
- C++中set容器的基本使用----在B站听黑马程序员c++课程的记录
- 八成互联网电视系统非法采集用户数据;前亚马逊工程师被定罪;雅虎将在香港测试元宇宙技术 | 每日大事件...
热门文章
- 搭建一个简单的FTP服务器
- MATLAB GUI不同控件函数间变量传递方法
- 春节前51Aspx源码发布详情
- 2012 依赖注入框架
- Javascript中的事件冒泡
- mysql clickhouse_通过mysql操作clickhouse
- php获得对象的类型,php 类型(对象)提示
- centos linux怎么安装mysql_CentOS-Linux系统下安装MySQL
- 制作简单的java应用程序_使用exe4j工具制作简单的java应用程序
- 大数据技术之 Kafka (第 4 章 Kafka API ) Producer API