requestAnimationFrame如何使用

本篇内容主要讲解“requestAnimationFrame如何使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“requestAnimationFrame如何使用”吧!

requestAnimationFrame--use是什么

告诉浏览器用来执行一个动画，并且在下一次重绘之前调用其指定的回调函数取更新动画，所以该方法的参数就是一个回调函数，在下一次重绘时候调用。

回调函数

回调函数即是传入的callback，执行后其传入的参数为DOMhighResTimeStamp，表示当前回调函数执行时时间戳，单位毫秒。

调用频率

其回调函数执行次数为每秒60次，为啥是这个呢，因为在大多数浏览器种，这个频率大多都跟屏幕帧数刷新频率保持一致，即在高刷新的屏幕中会执行的更快。

返回啥

返回的是一个非零整数值，作为唯一标识，传给window.cancelAnimationFrame(),可用来清除取消回调函数。

如何用window.requestAnimationFrame(callback);

示例

可以看到浏览器在一直打印，这也就是类似动画的持续过程，一秒钟会输出60次。

那怎样让其停止，除了使用window.cancelAnimationFrame()；官方指出了为了提高性能和电池寿命，当requestAnimationFrame（）运行在后台标签页或者隐藏的iframe里，就会被暂停调用以提升性能。

多个运行情况

当一个页面有多个requestAnimationFrame时，运行情况又是怎样的呢

执行调试输出内容为

可以看出再同一毫秒时刻，两个方法会同步执行，可见并不存在先后的情况，其每次执行隔间时间戳近似等于 1000 / 60 = 16.666毫秒，这就意味页面加载一次，会一次性执行所有的requestAnimationFrame。

停止执行

cancelAnimationFrame

动画运用

到此，相信大家对“requestAnimationFrame如何使用”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！