提升用户体验之requestAnimationFrame实现前端动画

1)requestAnimationFrame是什么?

1.MDN官方解释

2.解析这段话：

1、那么浏览器重绘是指什么呢？
——大多数电脑的显示器刷新频率是60Hz，1000ms/60=16.66666667ms的时间刷新一次
2、重绘之前调用指定的回调函数更新动画？
——requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来，在一次重绘或回流中 紧跟随浏览器的刷新频率 去完成操作。

2)基础用法

<script setup>let animationRef
const goStart =()=>{
  const cb =()=>{
      // 写入DOM 操作会在每一次浏览器刷新之前执行❤
    requestAnimationFrame(cb)}
  // 开启动画
  animationRef = requestAnimationFrame(cb)}
const goEnd =()=>{
  // 取消动画
  cancelAnimationFrame(animationRef)}</script>

3)requestAnimationFrame的优点

1.传统实现JS动画

通常情况下，实现动画能使用css实现的就使用css，不能的css实现的再使用JS实现。
我们实现JS动画，会使用setTimeout和setInterval。
而setTimeout和setInterval的使用是存在问题的，导致丢帧。

①间隔时间不好确定，前面也提到大多数电脑的显示器刷新频率是60Hz，1000ms/60，定时器的间隔时间设置过长或者过短都无法匹配上刷新频率，推荐的最佳循环间隔17ms。
②MDN指出定时器实际延长时间比设定值长一些。常见的几种情况，嵌套超时、非活动标签的超时、追踪型脚本的节流、超时延迟等…一个浏览器的线程队列中任务
这里就不过多赘述，可以到以下链接阅读 https://developer.mozilla.org/zh-CN/docs/Web/API/setTimeout

其实就是当线程忙碌时，定时器会等待线程队列中的任务执行后再执行。
所以定时器动画，视觉上看来，就是一盹一盹…的效果。

2.requestAnimationFrame

而requestAnimationFrame由浏览器专门为动画提供的 API，就是为了解决这类问题，提升用户体验的。
且我们切换到其他页面时，requestAnimationFrame会暂停下来，直到我们回到该页面后，动画会从暂停的位置继续执行。

3.应用场景

会用一定卡顿，可以到我的github下载代码运行看效果。
https://github.com/wwaini/tao-vue3/tree/release240625

<template><div class="btn"><el-button @click="goStart">开始</el-button><el-button @click="goEnd">停止</el-button></div><div class="a-box">定时器</div><div class="b-box">requestAnimationFrame</div></template><script setup>import{ ref } from 'vue'let leftNum = ref(0)let flag = ref(false) // 定时器动画停止标识
let timmer // 定时器
let animationRef // requestAnimationFrame存储
// 定时器动画事件
const goAStart =()=>{let dom = document.getElementsByClassName('a-box')
  dom[0].style.width ='10px'
  timmer = setInterval(()=>{
    leftNum.value = parseInt(dom[0].style.width)if(leftNum.value >800|| flag.value){
      clearInterval(timmer)}else{
      dom[0].style.width =(leftNum.value + 3) + 'px'
      console.log(dom[0].style.width);}}, 17);}
const goAEnd =()=>{
  clearInterval(timmer)}
// requestAnimationFrame动画事件
const goBStart =()=>{let dom = document.getElementsByClassName('b-box')
  dom[0].style.width ='10px'
  const cb =()=>{
    leftNum.value = parseInt(dom[0].style.width)if(leftNum.value >800){}else{
      dom[0].style.width =(leftNum.value + 3) + 'px'
      console.log(dom[0].style.width);
      // 相当于递归执行
      animationRef = requestAnimationFrame(cb)}}
  // 执行动画
  requestAnimationFrame(cb)}
const goBEnd =()=>{
  // 停止动画
  cancelAnimationFrame(animationRef)}

const goEnd =()=>{
  goAEnd()
  goBEnd()}
const goStart =()=>{
  goAStart()
  goBStart()}</script><style scoped lang="scss">
.btn {
  text-align: center;
  margin-bottom: 20px;}

.a-box {
  width: 20px;
  height: 80px;
  background-color: pink;
  position: absolute;}

.b-box {
  width: 20px;
  height: 80px;
  background-color: blueviolet;
  color: #fff;
  position: absolute;
  top: 120px;}</style>

4)requestAnimationFrame兼容性