requestAnimationFrame使用示例详解
requestAnimationFrame--use是什么
告诉浏览器用来执行一个动画，并且在下一次重绘之前调用其指定的回调函数取更新动画，所以该方法的参数就是一个回调函数，在下一次重绘时候调用。
回调函数
回调函数即是传入的callback，执行后其传入的参数为DOMhighResTimeStamp，表示当前回调函数执行时时间戳，单位毫秒。
调用频率
其回调函数执行次数为每秒60次，为啥是这个呢，因为在大多数浏览器种，这个频率大多都跟屏幕帧数刷新频率保持一致，即在高刷新的屏幕中会执行的更快。
返回啥
返回的是一个非零整数值，作为唯一标识，传给window.cancelAnimationFrame(),可用来清除取消回调函数。
如何用window.requestAnimationFrame(callback);
示例
可以看到浏览器在一直打印，这也就是类似动画的持续过程，一秒钟会输出60次。
那怎样让其停止，除了使用window.cancelAnimationFrame()；官方指出了为了提高性能和电池寿命，当requestAnimationFrame（）运行在后台标签页或者隐藏的iframe里，就会被暂停调用以提升性能。
多个运行情况
当一个页面有多个requestAnimationFrame时，运行情况又是怎样的呢
执行调试输出内容为
可以看出再同一毫秒时刻，两个方法会同步执行，可见并不存在先后的情况，其每次执行隔间时间戳近似等于 1000 / 60 = 16.666毫秒，这就意味页面加载一次，会一次性执行所有的requestAnimationFrame。
停止执行
cancelAnimationFrame
动画运用
效果如下图
总结
requestAnimationFrame是浏览器的一个宏任务，其用法也跟setTimeOut很相似，其执行的步骤是根据浏览器的绘制频率来的，采用系统的刷新间隔时间，可以保证在绘制的一次过程中只执行一次，确保了性能，不会出现卡顿和掉帧的情况，这样就确保了动画加载的流畅，同时也降低了cpu的消耗和内存占用，是canvas动画里面最常用的一种api。
以上就是requestAnimationFrame使用示例详解的详细内容，更多关于requestAnimationFrame使用的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了微信小程序 跳转方式总结的相关资料,需要的朋友可以参考下2017-04-04
JQ中$(window).load和$(document).ready区别与执行顺序
JQ中的$(document).ready()大家应该用的非常多，基本每个JS脚本中都有这个函数的出现有时甚至会出现多个，那么另一个加载函数$(window).load相对出现的次数就很少了，下面为大家介绍一下两者的区别与他们的执行顺序2017-03-03
这篇文章主要介绍了微信小程序实的分类页面制作的相关资料,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了js 标签语法使用，在 JavaScript 中提供了标签语句，用于标记指定的代码块，便于跳转到指定的位置。本文来记录一下标签语句的使用方法,需要的朋友可以参考一下2021-10-10
JavaScript CSS优雅实现网页多主题风格换肤功能详解
这篇文章主要为大家介绍了JavaScript CSS优雅的实现网页多主题风格换肤功能详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了js 数组 fill() 的填充方法，初始化数组的方法，但是初始化数组之后，数组中的每一项元素默认为 empty 空位占位，如何对数组这些空位添加默认的元素，ES6提供了 fill() 方法实现这一操作。本文总结数组 fill() 方法的详细使用,需要的朋友可以参考一下2021-10-10
微信小程序上滑加载下拉刷新（onscrollLower）分批加载数据（二）
这篇文章主要介绍了微信小程序上滑加载下拉刷新（onscrollLower）分批加载数据的相关资料,需要的朋友可以参考下2017-05-05
Dom-api MutationObserver使用方法详解
这篇文章主要为大家介绍了Dom-api MutationObserver使用方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了微信小程序之滚动视图容器的实现方法的相关资料,希望通过本文能帮助到大家，让大家掌握这部分内容，需要的朋友可以参考下2017-09-09
这篇文章主要介绍了微信小程序-getUserInfo回调的实例详解的相关资料,希望通过本文能帮助到大家，让大家理解掌握这部分内容，需要的朋友可以参考下2017-10-10
最新评论