帧动画requestAnimationFrame

最新推荐文章于 2024-03-25 17:35:21 发布

已转行此号停用

最新推荐文章于 2024-03-25 17:35:21 发布

阅读量317

点赞数

分类专栏：大数据学习

本文链接：https://blog.csdn.net/qianfeng_dashuju/article/details/108467660

版权

本文探讨了JavaScript中的requestAnimationFrame方法，通过对比setTimeout，解释了requestAnimationFrame如何根据浏览器刷新频率自动调节执行时间，确保动画的流畅性。同时，介绍了requestAnimationFrame在后台标签页自动暂停以节省资源的特性，以及在不同浏览器中60Hz的帧率表现，进一步说明其在防止掉帧方面的优势。

摘要由CSDN通过智能技术生成

requestAnimationFrame

来看一个小例子

<body>
	<div id="box"></div>
</body>
<script type="text/javascript">
	var box = document.getElementById("box");
	function run(){
		box.innerHTML = new Date().getTime();
		setTimeout(run, 16);
	}
	setTimeout(run, 16);
</script>

这个例子当中, 我们通过setTimeout让run函数每秒执行60次.

想要按照浏览器的刷新频率来执行函数, 其实不需要这么麻烦.

另外, 如果浏览器的刷新频率不是60, 甚至低于60, 那么我们的动画就可能出现掉帧情况.

啥叫掉帧?

一般情况下, 浏览器的帧率跟屏幕帧率一致, 基本都是60, 也就是16ms左右会刷新一次
如果, 你的定时器时间过短, 就会出现上图的现象.
在浏览器两次刷新画面中间, 定时器函数执行了2次
而这2次操作都是在内存完成的动作, 浏览器只有刷新才能看到效果
也就是说, 用