requestAnimationFrame动画的另一种方式

最新推荐文章于 2024-01-18 10:35:50 发布

风儿轻丶

最新推荐文章于 2024-01-18 10:35:50 发布

阅读量197

点赞数 1

本文链接：https://blog.csdn.net/qq_21423689/article/details/82851027

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>requestAnimationFrame</title>
</head>
<body>
	<script>
		function animate () {
			requestAnimationFrame(animate);
			document.getElementsByTagName('body')[0].innerHTML+='22';
		}
		animate();
	</script>
</body>
</html>

window.requestAnimationFrame() 将告知浏览器你马上要开始动画效果了，后者需要在下次动画前调用相应方法来更新画面。这个方法就是传递给window.requestAnimationFrame()的回调函数。

也可这个方法原理其实也就跟setTimeout/setInterval差不多，通过递归调用同一方法来不断更新画面以达到动起来的效果，但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销。

更多请点击