JS 动画实现原理剖析 - requestAnimationFrame 与 CSS 变换的性能对比

狼影

发布时间：2025-09-18 20:33:01

532人浏览过

来源于php中文网

原创

requestAnimationFrame 与 CSS 变换各有优势：rAF 提供精准控制，适合复杂交互和动态计算；CSS 变换依赖硬件加速，适用于声明式、高性能的简单动效。实际开发中应根据动画复杂度、交互需求及性能要求选择，常结合使用以兼顾灵活性与流畅性。

js 动画实现原理剖析 - requestanimationframe 与 css 变换的性能对比

在前端动画的世界里，性能始终是绕不开的话题。当我们谈及流畅的用户体验，尤其是在动画这块，

requestAnimationFrame

和 CSS 变换（CSS Transforms）无疑是两个核心玩家。说到底，这两种技术各有千秋，并没有绝对的优劣之分，关键在于你的动画场景和对性能的考量。简单来说，如果你追求极致的帧同步和复杂的、基于物理或用户交互的动画逻辑，

requestAnimationFrame

是你的不二之选；而对于那些声明式、相对简单的 UI 动效，比如元素的位移、缩放、旋转或透明度变化，CSS 变换凭借其天然的 GPU 加速优势，往往能提供更丝滑的体验。

解决方案

要深入理解并选择合适的动画技术，我们得先剖析它们各自的工作机制和性能特点。这不仅仅是技术栈的选择，更是对浏览器渲染管线的一次深入理解。

requestAnimationFrame

(rAF) 是浏览器提供的一个 API，它本质上是告诉浏览器：“嘿，我准备在下一次浏览器重绘之前执行一些动画操作。” 它的核心优势在于与浏览器自身的绘制周期高度同步。这意味着你的动画代码会在浏览器准备好更新屏幕内容时执行，避免了不必要的重绘和丢帧，从而减少了“卡顿”（jank）。通过 rAF，开发者可以完全掌控动画的每一帧，实现各种复杂的、基于时间或物理引擎的动画逻辑。比如，你需要一个元素根据用户的鼠标移动轨迹进行复杂的跟随，或者实现一个模拟重力的抛物线运动，rAF 配合 JavaScript 的强大计算能力就能轻松搞定。然而，这种强大的控制力也意味着你需要自己管理动画的状态、时间、缓动函数等等，对开发者的要求相对较高。而且，所有的计算都在 JavaScript 主线程进行，如果动画逻辑过于复杂或耗时，仍然有可能阻塞主线程，影响页面响应。

相比之下，CSS 变换则走的是另一条路。当浏览器处理 CSS 动画或过渡时，如果涉及的是

transform

(位移

translate

、缩放

scale

、旋转

rotate

、倾斜

skew

) 和

opacity

这些属性，浏览器往往能够将其提升到独立的合成层（compositor layer）进行处理。这意味着这些动画可以直接在 GPU 上完成，绕过了 CPU 的布局（layout）和绘制（paint）阶段。这对于性能来说是一个巨大的飞跃，因为布局和绘制通常是前端性能瓶颈的重灾区。CSS 变换的优势在于其声明性：你只需要定义动画的起始状态、结束状态、持续时间、缓动函数等，剩下的交给浏览器去优化。这对于实现按钮悬停效果、图片轮播的切换、模态框的弹出等常见的 UI 动效来说，简直是完美。它的局限性也很明显，比如难以实现复杂的交互逻辑，动态调整动画参数不如 JavaScript 灵活，也无法轻松地中断动画到任意中间状态。

立即学习“前端免费学习笔记（深入）”；

所以，在实际项目中，我们往往会看到这两种技术的结合使用。对于那些纯粹的视觉效果，比如一个元素简单的淡入淡出或者从左到右滑入，CSS 变换是首选。而当动画需要与用户交互深度绑定，或者涉及到复杂的数学计算、物理模拟时，

requestAnimationFrame

则能提供无与伦比的灵活性和控制力。

为什么 requestAnimationFrame 被认为是实现高性能 JavaScript 动画的关键？

在我看来，

requestAnimationFrame

之所以能成为高性能 JS 动画的基石，核心就在于它“懂”浏览器。它不是简单地在某个时间点执行你的代码，而是主动去“询问”浏览器：什么时候是执行动画操作的最佳时机？这个时机，就是浏览器即将进行下一次重绘之前。

设想一下，如果你的动画逻辑是使用

setTimeout

或

setInterval

来实现的，你可能会设定一个固定的时间间隔，比如每 16 毫秒执行一次（为了达到 60 帧/秒的视觉效果）。但问题是，浏览器自身的绘制周期并不是固定不变的，它会受到系统负载、其他任务等因素的影响。这样一来，你的动画更新可能与浏览器的实际重绘不同步，导致两种糟糕的情况：

过度绘制 (Over-painting): 你的动画更新频率高于浏览器重绘频率，导致有些帧的计算白费了，浪费了 CPU 资源。
丢帧 (Dropped Frames): 你的动画更新频率低于浏览器重绘频率，或者更新正好错过了重绘窗口，导致用户看到的是不连贯的画面，也就是我们常说的“卡顿”。

requestAnimationFrame

彻底解决了这个问题。它保证了回调函数在浏览器下一次重绘之前执行，而且只执行一次。这意味着你的动画操作会与浏览器的刷新率保持一致，无论是 60Hz 还是更高刷新率的显示器，都能充分利用。这样一来，不仅减少了不必要的计算，还确保了每一帧都尽可能地被渲染出来，从而实现最流畅、最省电的动画效果。

// 一个简单的 requestAnimationFrame 动画示例
let start = null;
const element = document.getElementById('myElement');

function animate(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;

  // 假设动画持续 2000 毫秒 (2秒)
  const duration = 2000;
  const percentage = Math.min(progress / duration, 1); // 动画进度从 0 到 1

  // 线性缓动，将元素从左边移动到右边 200px
  element.style.transform = `translateX(${percentage * 200}px)`;

  if (progress < duration) {
    requestAnimationFrame(animate); // 继续下一帧
  } else {
    console.log('动画结束！');
  }
}

requestAnimationFrame(animate); // 启动动画

这个例子就很好地展示了

rAF

如何基于时间戳来精确控制动画进度，确保动画的平滑过渡。

CSS 动画在性能优化方面有哪些独特优势，又有哪些局限性？

CSS 动画的优势，在我看来，主要体现在其“声明式”和“硬件加速”这两个点上。

首先是声明式。你不需要编写复杂的 JavaScript 逻辑来控制每一帧，只需要用 CSS 语法描述动画的起始状态、结束状态、关键帧（

@keyframes

）、持续时间、缓动函数（

transition-timing-function

）等。这种方式让动画的实现变得异常简洁和直观，代码可读性强，也更容易维护。对于前端开发者来说，它降低了动画实现的门槛，很多时候甚至设计师都能直接在 CSS 中调整动画效果。

Outwrite

AI写作浏览器插件，将您的想法变成有力的句子

下载

其次，也是最关键的优势，是硬件加速。当 CSS 动画涉及到

transform

、

opacity

这类属性时，浏览器引擎会非常智能地将其提升到 GPU 进行处理。这意味着这些动画的计算和渲染工作会从 CPU 转移到专门处理图形的 GPU 上。GPU 在处理并行计算和图形渲染方面有着天然的优势，效率远高于 CPU。这种优化通常被称为“合成层动画”（Composited Animations），它能够跳过浏览器渲染流程中的布局（Layout）和绘制（Paint）阶段，直接在合成（Composite）阶段完成。布局和绘制是浏览器渲染中最耗时的两个环节，一旦跳过，性能提升是显而易见的。这也就是为什么很多时候，即使 JavaScript 动画逻辑再精妙，也可能因为触发了布局或绘制而显得不如 CSS 动画流畅。

为了进一步优化 CSS 动画性能，我们有时会用到

will-change

属性。这个属性可以提前告诉浏览器，某个元素将要发生哪些变化（比如

will-change: transform;

），浏览器就可以提前做好优化准备，比如为这个元素创建独立的合成层。但这个属性也要谨慎使用，过度使用反而可能导致内存占用增加，甚至降低性能。

然而，CSS 动画的局限性也同样突出。最明显的一点是缺乏编程控制力。你很难在动画进行中动态地改变它的行为，比如根据用户输入实时调整动画方向、速度，或者实现复杂的物理碰撞效果。CSS 动画更像是一个“预设好的电影”，一旦开始播放，就很难干预。如果你想在动画播放到一半时暂停、反向播放、或者根据某个条件跳到动画的某个特定时间点，CSS 自身就显得力不从心了。

再者，缓动函数（Easing Functions）的选择也相对有限。虽然 CSS 提供了

ease

linear

ease-in-out

等常用选项，也支持

cubic-bezier

自定义曲线，但与 JavaScript 中丰富的缓动函数库（如 GreenSock 的 EasePack）相比，灵活性还是差了一截。对于一些需要高度定制化缓动效果的场景，CSS 动画就显得捉襟见肘了。

在实际项目中，我们该如何选择合适的动画技术，甚至结合使用？

这其实是一个非常实际的问题，我在做项目的时候也经常思考。我的经验是，没有一劳永逸的答案，但可以根据几个核心点来做决策：动画复杂度、交互需求、性能预算和开发效率。

简单 UI 动效，首选 CSS 变换。
- 比如按钮的 hover 效果、导航菜单的展开收起、图片轮播的平移切换、模态框的淡入淡出或缩放。这些动画通常是声明式的，不需要复杂的逻辑控制。使用 CSS
```
transition
```
  或
```
@keyframes
```
  来实现，不仅代码简洁，而且能最大限度地利用 GPU 加速，确保动画的流畅性。这是最经济实惠且高效的选择。
复杂交互、物理效果或数据驱动的动画，交给
```
requestAnimationFrame
```
。
- 想象一下一个拖拽排序的列表，元素在拖拽过程中要跟随鼠标移动，释放后还要根据新的位置优雅地“归位”。或者一个数据可视化图表，数据更新时柱状图或折线图需要平滑过渡。再比如游戏中的角色移动、粒子效果、模拟重力的物体下落等。这些场景下，动画的每一帧都需要根据实时数据或用户输入进行精确计算和调整，CSS 动画是无能为力的。这时，
```
requestAnimationFrame
```
  配合 JavaScript 的强大计算能力，才能提供所需的控制力和灵活性。
混合使用，取长补短。
- 这其实是很多中等复杂度动画的“甜点区”。例如，你可以用 JavaScript（可能通过
```
requestAnimationFrame
```
  ）来管理动画的状态和逻辑，比如计算元素的新位置或新的缩放比例。然后，将这些计算结果作为 CSS 属性值（如
```
transform: translateX(...)
```
  ）应用到元素上，让浏览器利用 CSS 变换的硬件加速来实际渲染动画。
- 一个常见的模式是：JS 负责触发动画（例如添加/移除一个 CSS 类），然后 CSS 类里面定义了
```
transition
```
  或
```
animation
```
  来实现具体的视觉效果。这样既享受了 JS 的控制力，又利用了 CSS 的渲染效率。
- 另一个例子是，你可以用 JS 监听用户的滚动事件，然后通过
```
requestAnimationFrame
```
  来平滑地更新页面上某个元素的
```
transform
```
  属性，实现视差滚动效果。这里 JS 负责计算滚动量和触发更新，而实际的位移渲染则由 CSS
```
transform
```
  和 GPU 完成。
利用动画库。
- 对于更复杂的动画，特别是那些需要高级缓动、时间轴控制、链式动画等功能的，我个人倾向于使用成熟的动画库，比如 GreenSock (GSAP) 或 Popmotion。这些库在底层已经很好地封装了
```
requestAnimationFrame
```
  和 CSS 变换的优点，提供了更高级的 API，大大简化了开发难度，同时还能保证出色的性能。它们会智能地判断哪些属性可以通过 CSS 变换优化，哪些需要 JS 精确控制，并帮你处理好各种浏览器兼容性问题。

最后，不管你选择哪种方案，性能分析工具都是你的好朋友。Chrome DevTools 的 Performance 面板能清晰地展示动画过程中 CPU 和 GPU 的占用情况、帧率、布局和绘制耗时等关键指标。通过这些数据，你可以验证自己的选择是否正确，并找出潜在的性能瓶颈。实践出真知，多尝试，多分析，才能找到最适合你项目的动画解决方案。

JavaScript如何实现滚动动画_JavaScript中滚动库有哪些推荐

JavaScript如何实现移动端开发_JavaScript如何适配不同屏幕尺寸

JavaScript如何进行移动端适配_JavaScript中响应式布局怎样实现

javascript中的标签模板字面量是什么_它有什么高级用法

JavaScript如何实现数据可视化_怎样使用D3.js绘制图表