requestAnimationFrame初识

一个好的名字可以让更多的GISer认识你

已于 2022-08-10 13:59:54 修改

阅读量131

点赞数

文章标签：动画

于 2022-08-10 12:20:47 首次发布

本文链接：https://blog.csdn.net/weixin_42157672/article/details/126262940

版权

requestAnimationFrame是什么？

通俗点讲就是该API能以浏览器的显示频率来作为其动画动作的频率，比如浏览器每10ms刷新一次，动画回调也每10ms调用一次，这样就不会存在过度绘制的问题，动画不会掉帧，自然流畅。

基本语法

window.requestAnimationFrame(callback)

返回值是一个整数，是回调列表中唯一的标识。是个非零值，没别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。

基本应用
用法和setTimeout差不多，执行的时间间隔是跟着系统的绘制频率走，是固定的。

<body>
	<div id="IDIDIDID"></div>
</body>

let element = document.getElementById('IDIDIDID')
let left = 0
let frameID = null
// 回调函数会被传入DOMHighResTimeStamp参数
// DOMHighResTimeStamp指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间。
function aniCallback(timeStamp) {
	console.log(timeStamp)
	left+=1
	element.style.marginLeft = left + 'px'
	
	if (left >= 500) {
		cancelAnimationFrame(frameID)
	}else {
		// 上面的动画操作完毕，再次调用新的一帧。
		frameID = requestAnimationFrame(aniCallback)
	}
}
frameID = requestAnimationFrame(aniCallback)

优点

使得动画更加流畅，防止动画失帧 requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
资源节能(Cpu、内存等)

在隐藏或不可见的元素中，requestAnimationFrame 将不会进行重绘或回流，这当然就意味着更少的 CPU、GPU 和内存使用量
requestAnimationFrame 是由浏览器专门为动画提供的 API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了 CPU 开销

注意点
要在浏览器下次重绘之前继续更新下一帧动画（动画持续起来），那么回调函数callback()自身须再次调用requestAnimationFrame(callback)，或是调用
cancelAnimationFrame(frameID)。