js 实现动画的两种方案对比：setTimeout vs RAF (requestAnimationFrame)

朝阳39

已于 2024-03-21 11:47:57 修改

阅读量515

点赞数 5

分类专栏： # JavaScript 文章标签： javascript

于 2024-03-21 11:31:49 首次发布

本文链接：https://blog.csdn.net/weixin_41192489/article/details/136903583

版权

JavaScript 专栏收录该内容

158 篇文章 24 订阅

订阅专栏

setTimeout

需手动控制频率，页面隐藏后仍会执行动画，更加耗费性能。

requestAnimationFrame

简称 RAF , 会在浏览器中每次刷新屏幕时调用一个函数，用于创建平滑的动画，因为它会自动适应屏幕的刷新率，无需手动控制频率。在页面隐藏时，自动暂停动画。

RAF动画 vs CSS动画

requestAnimationFrame通常用于需要高度控制动画的场景，例如游戏或者复杂的数据可视化。而CSS动画则更多用于简单的静态或者中等复杂度的动画设计。在性能上，当不需要高度控制或者频繁更新视图时，使用CSS动画是更好的选择，因为浏览器可以进行更多的优化。而requestAnimationFrame则更适合于需要实时更新视图的场景。

效果预览

在这里插入图片描述

演示代码

<template>
  <div>
    <div class="demoBox" :style="{ width: width + 'px' }"></div>

    <button @click="setTimeout_animate">使用 setTimeout 执行动画</button>

    <button @click="ref_animate">使用 ref 执行动画</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      width: 20,
      maxWidth: 620,
    };
  },

  mounted() {
    // 4s 把宽度从 20px 变为 620px ，即增加 600px,每次需变化  600 px / (60帧/秒 *4秒) = 15px/帧
    // 60帧/s 才能确保动画流畅, 即每 1000/60 = 16.7 ms 执行一次动画
    // 得出最终动画效果为  每 16.7 ms ， 宽度增加15px
    // this.setTimeout_animate();
  },

  methods: {
    setTimeout_animate() {
      if (this.width < this.maxWidth) {
        setTimeout(this.setTimeout_animate, 16.7); // 时间需要自己控制

        this.width += 15;
      } else {
        this.width = 20;
      }
    },
    ref_animate() {
      if (this.width < this.maxWidth) {
        requestAnimationFrame(this.ref_animate); // 时间不用自己控制
        this.width += 15;
      } else {
        this.width = 20;
      }
    },
  },
};
</script>
<style scoped>
.demoBox {
  height: 30px;
  background-color: red;
  margin: 20px;
}
</style>