前端开发必知:requestAnimationFrame的用法、优势和应用场景
前端开发必知:requestAnimationFrame的用法、优势和应用场景
前言
如果你是一名前端开发,那么你多少有了解过
requestAnimationFrame
吧?如果没有也接着往下看,会有详细用法说明。其实很多人会局限于把
requestAnimationFrame
应用于一些纯动画相关的需求上,但其实在前端很多业务场景下requestAnimationFrame
都能用于性能优化,下面将细说一下requestAnimationFrame
的具体用法
和几种应用场景
。
requestAnimationFrame作用与用法
requestAnimationFrame简述
「MDN
官方说法是这样的」
基本示例
console.log('您好,我是requestAnimationFrame'); requestAnimationFrame(init)
「效果如下」
但是例子上面是最基本的调用方式,并且只简单执行了一次,而对于动画是要一直执行的。
下面直接上图看看官方的文档对这个的说明,上面说具体用法应该要递归调用,而不是单次调用。
递归调用示例
console.log('您好,递归调用requestAnimationFrame'); requestAnimationFrame(init) requestAnimationFrame(init)
「执行动图效果如下」
requestAnimationFrame
会一直递归调用执行,并且调用的频率通常是与当前显示器的刷新率相匹配
(这也是这个API
核心优势),例如屏幕75hz
就1
秒执行75
次。
而且如果使用的是定时器实现此功能是无法适应各种屏幕帧率的。
回调函数
requestAnimationFrame
执行后的回调函数有且只会返回一个参数,并且返回的参数是一个毫秒数
,这个参数所表示是的上一帧渲染的结束时间,直接看看下面代码示例与打印效果。
console.log('您好,requestAnimationFrame回调:', val); requestAnimationFrame(init); requestAnimationFrame(init);
「注意:」 如果我们同时调用了很多个requestAnimationFrame
,那么他们会收到相同的时间戳,因为与屏幕的帧率相同所以并不会不一样。
终止执行
终止此API
的执行,官方提供的方法是window.cancelAnimationFrame()
,语法如下
ancelAnimationFrame(requestID)
直接看示例更便于理解,用法非常类似定时器的clearTimeout()
,直接把 requestAnimationFrame
返回值传给 cancelAnimationFrame()
即可终止执行。
<button @click="stop">停止</button> console.log('您好,requestAnimationFrame回调:', val); myReq = requestAnimationFrame(init); requestAnimationFrame(init); cancelAnimationFrame(myReq);
requestAnimationFrame优势
动画更丝滑,不会出现卡顿
对比传统的setTimeout
和 setInterval
动画会更流畅丝滑。
主要 「原因」 是由于运行的浏览器会监听显示器返回的VSync
信号确保同步,收到信号后再开始新的渲染周期,因此做到了与浏览器绘制频率绝对一致。所以帧率会相当平稳,例如显示屏60hz
,那么会固定1000/60ms
刷新一次。
但如果使用的是setTimeout
和 setInterval
来实现同样的动画效果,它们会受到事件队列宏任务、微任务影响会导致执行的优先级顺序有所差异,自然做不到与绘制同频。
所以使用setTimeout
和 setInterval
不但无法自动匹配显示屏帧率,也无法做到完全固定的时间去刷新。
性能更好,切后台会暂停
当我们把使用了requestAnimationFrame
的页面切换到后台运行时,requestAnimationFrame
会暂停执行从而提高性能,切换回来后会马上提着执行。
效果如下动图,隐藏后停止运行,切换回来接着运行。
应用场景:常规动画
用一个很简单的示例:用requestAnimationFrame
使一张图片动态也丝滑旋转,直接看示例代码和效果。
「思路」 :首先在页面初始化时执行window.requestAnimationFrame(animate)
使动画动起来,实现动画一直丝滑转运。在关闭页面时用window.cancelAnimationFrame(rafId)
去终止执行。
<div :style="imgStyle" class="earth"></div> import { ref, onMounted, reactive, onUnmounted } from 'vue'; const imgStyle = reactive({ transform: 'rotate(0deg)', const angle = (time % 10000) / 5; // 控制转的速度 imgStyle.transform = `rotate(${angle}deg)`; rafId = window.requestAnimationFrame(animate); rafId = window.requestAnimationFrame(animate); window.cancelAnimationFrame(rafId); background-image: url('@/assets/images/about_advantage_3.png'); /* 替换为实际的路径 */
看看动图效果
应用场景:滚动加载
在滚动事件中用requestAnimationFrame
去加载渲染数据使混动效果更加丝滑。主要好久有几个
「提高性能」 : 添加
requestAnimationFrame
之后会在下一帧渲染之前执行,而不是每次在滚动事件触发的时候就立即执行。这可以减少大量不必要的计算,提高性能。「用户体验更好」 :确保在绘制下一帧时再执行,使帧率与显示屏相同,视觉上会更丝滑。
代码示例和效果如下:
<div class="container" ref="scrollRef"> <div v-for="(item, index) in items" :key="index" class="item"> <div v-if="loading" class="loading">数据加载中...</div> import { ref, onMounted, onUnmounted } from 'vue'; const loading = ref(false); let rafId: number | null = null; const items = ref<string[]>(Array.from({ length: 50 }, (_, i) => `Test ${i + 1}`)); const scrollRef = ref<HTMLElement | null>(null); return new Promise<void>((resolve) => { const newItems = Array.from({ length: 50 }, (_, i) => `Test ${items.value.length + i + 1}`); items.value.push(...newItems); const checkScrollPosition = () => { if (loading.value) return; const container = scrollRef.value; const scrollTop = container.scrollTop; const clientHeight = container.clientHeight; const scrollHeight = container.scrollHeight; if (scrollHeight - scrollTop - clientHeight <= 100) { const startLoading = async () => { const handleScroll = () => { window.cancelAnimationFrame(rafId); rafId = window.requestAnimationFrame(checkScrollPosition); scrollRef.value.addEventListener('scroll', handleScroll); window.cancelAnimationFrame(rafId); scrollRef.value.removeEventListener('scroll', handleScroll); border-bottom: 1px solid #ccc;
看看下面动图效果
小结
通过代码示例配合动图讲解后,再通过两个简单的事例可能大家会发现,只要在页面需要运动的地方其实都可以用到 requestAnimationFrame
使效果变的更加丝滑。
除了上面两个小示例其它非常多地方都可以用到requestAnimationFrame
去优化性能,比较常见的例如游戏开发、各种动画效果和动态变化的布局等等。