问小白 wenxiaobai
资讯
历史
科技
环境与自然
成长
游戏
财经
文学与艺术
美食
健康
家居
文化
情感
汽车
三农
军事
旅行
运动
教育
生活
星座命理

前端开发必知:requestAnimationFrame的用法、优势和应用场景

创作时间:
2025-03-16 04:09:24
作者:
@小白创作中心

前端开发必知:requestAnimationFrame的用法、优势和应用场景

引用
CSDN
1.
https://m.blog.csdn.net/LuckyWinty/article/details/144921445

前言

如果你是一名前端开发,那么你多少有了解过requestAnimationFrame吧?如果没有也接着往下看,会有详细用法说明。

其实很多人会局限于把requestAnimationFrame应用于一些纯动画相关的需求上,但其实在前端很多业务场景下requestAnimationFrame都能用于性能优化,下面将细说一下requestAnimationFrame的具体用法和几种应用场景

requestAnimationFrame作用与用法

requestAnimationFrame简述

MDN官方说法是这样的」

基本示例

      console.log('您好,我是requestAnimationFrame');    requestAnimationFrame(init)

「效果如下」

但是例子上面是最基本的调用方式,并且只简单执行了一次,而对于动画是要一直执行的。

下面直接上图看看官方的文档对这个的说明,上面说具体用法应该要递归调用,而不是单次调用。

递归调用示例

      console.log('您好,递归调用requestAnimationFrame');      requestAnimationFrame(init)    requestAnimationFrame(init)

「执行动图效果如下」

requestAnimationFrame会一直递归调用执行,并且调用的频率通常是与当前显示器的刷新率相匹配(这也是这个API核心优势),例如屏幕75hz1秒执行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优势

动画更丝滑,不会出现卡顿

对比传统的setTimeoutsetInterval动画会更流畅丝滑。

主要 「原因」 是由于运行的浏览器会监听显示器返回的VSync信号确保同步,收到信号后再开始新的渲染周期,因此做到了与浏览器绘制频率绝对一致。所以帧率会相当平稳,例如显示屏60hz,那么会固定1000/60ms刷新一次。

但如果使用的是setTimeoutsetInterval来实现同样的动画效果,它们会受到事件队列宏任务、微任务影响会导致执行的优先级顺序有所差异,自然做不到与绘制同频。

所以使用setTimeoutsetInterval不但无法自动匹配显示屏帧率,也无法做到完全固定的时间去刷新。

性能更好,切后台会暂停

当我们把使用了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去优化性能,比较常见的例如游戏开发、各种动画效果和动态变化的布局等等。

© 2023 北京元石科技有限公司 ◎ 京公网安备 11010802042949号