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

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

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>

目录
打赏
0
2
2
0
64
分享
相关文章
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响,如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中,需要根据具体情况选择合适的动画技术。
如何使用时间切片来优化JavaScript动画的性能?
如何使用时间切片来优化JavaScript动画的性能?
在 golang 中执行 javascript 代码的方案详解
本文介绍了在 Golang 中执行 JavaScript 代码的四种方法:使用 `otto` 和 `goja` 嵌入式 JavaScript 引擎、通过 `os/exec` 调用 Node.js 外部进程以及使用 WebView 嵌入浏览器。每种方法都有其适用场景,如嵌入简单脚本、运行复杂 Node.js 脚本或在桌面应用中显示 Web 内容。
363 15
在 golang 中执行 javascript 代码的方案详解
Next.js 实战 (五):添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Framer Motion,一个为React设计的动画库,提供了声明式API处理动画和页面转换,适合创建响应式用户界面。文章包括首屏加载动画、路由加载Loading、路由进场和退场动画等主题,并提供了使用Framer Motion和next.js实现这些动画的示例代码。最后,文章总结了这些效果,并邀请读者探讨更好的实现方案。
194 7
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
399 5
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
如何在不影响性能的前提下使用JavaScript库来实现复杂的动画效果?
|
8月前
ractive.js联系表单动画效果源码
一款ractive.js联系表单动画效果,很有创意的发送邮件、联系内容等表单,基于ractive.js实现的动画效果,以发送信件的方式。
77 1
|
8月前
|
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画,js循环动画,简单的画面设计。非常丝滑有意思,欢迎对此代码感兴趣的朋友前来下载参考。
71 2
一文梳理JavaScript中常见的七大继承方案
该文章系统地概述了JavaScript中七种常见的继承模式,包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承等,并探讨了每种模式的实现方式及其优缺点。
一文梳理JavaScript中常见的七大继承方案
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
154 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等