CSS动画帧率控制：requestAnimationFrame与CSS的结合

当 requestAnimationFrame 遇上 CSS：一场关于丝滑动画的恋爱

各位看官，咱们今天聊点什么好呢？不如聊聊动画吧！不过，咱们今天要聊的不是那种拿着铅笔一帧一帧画出来的老式动画，而是前端开发中让人又爱又恨的 CSS 动画。爱它是因为它简单易上手，恨它嘛……嘿嘿，有时候跑起来真的有点“卡顿”，像喝了假酒一样。

咱们前端er，追求的可是丝滑般的动画体验，要让用户感觉像是在用冰淇淋勺挖丝绸一样。那么，如何才能让 CSS 动画摆脱“卡顿”的阴影，变得更加流畅呢？今天的主角就要登场了，它就是——requestAnimationFrame，咱们就叫它“rAF”吧，听起来更亲切。

CSS 动画：便捷与局限并存的小可爱

CSS 动画，说白了就是通过 transition 或者 animation 属性，让元素在一段时间内，从一个状态平滑过渡到另一个状态。这玩意儿确实方便，写几行代码就能让你的网页“动”起来。比如：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 0.5s ease-in-out;
}

.box:hover {
  transform: translateX(200px);
}

这段代码的意思是：当鼠标悬停在 .box 元素上时，它会在 0.5 秒内平滑地向右移动 200 像素。简单粗暴，效果立竿见影。

但是，CSS 动画也有它的局限性。它就像一个被安排好的演员，只能按照既定的剧本演出。一旦动画开始，它的执行就交给浏览器了。我们无法精确控制每一帧的渲染时机，也无法在动画过程中动态地修改属性。

这就导致了一个问题：如果浏览器的性能不够好，或者页面上还有其他复杂的任务在运行，CSS 动画就可能会出现卡顿、掉帧的情况。就像你精心打扮了一番，准备在舞池里大放异彩，结果却被旁边的人绊了一脚，瞬间失去了优雅。

requestAnimationFrame：动画界的“时间管理大师”

这时候，requestAnimationFrame 就该闪亮登场了。它是一个浏览器提供的 API，专门用来处理动画相关的任务。它的作用就像一个“时间管理大师”，能够告诉你什么时候才是最佳的渲染时机。

requestAnimationFrame 的工作原理很简单：它会告诉浏览器，你希望执行一个动画，浏览器会在下一次重绘之前调用你提供的回调函数。也就是说，你的动画代码会在浏览器最合适的时机执行，从而最大限度地保证动画的流畅性。

你可以这样理解：CSS 动画就像坐公交车，你不知道什么时候会到站，只能被动等待。而 requestAnimationFrame 就像预约了专车，它会准时准点地来接你，让你在最合适的时间到达目的地。

用代码来表示的话，大概是这样：

let box = document.querySelector('.box');
let start = null;

function animate(timestamp) {
  if (!start) start = timestamp;
  let progress = timestamp - start;
  box.style.transform = `translateX(${Math.min(progress / 10, 200)}px)`;

  if (progress < 2000) { // 2秒
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);

这段代码的效果和上面的 CSS 动画类似，也是让 .box 元素向右移动 200 像素。但是，这次我们使用了 requestAnimationFrame 来控制动画的每一帧，可以更精确地控制动画的执行过程。

rAF + CSS：强强联手，天下无敌？

既然 requestAnimationFrame 这么厉害，那我们是不是可以完全抛弃 CSS 动画，全部用 JavaScript 来实现动画呢？

当然不是！CSS 动画和 requestAnimationFrame 并不是非此即彼的关系，它们可以完美地结合在一起，发挥各自的优势。

CSS 动画的优势在于：

声明式： 代码简洁易懂，更容易维护。
性能优化： 浏览器会对 CSS 动画进行优化，例如使用硬件加速。

requestAnimationFrame 的优势在于：

控制力强： 可以精确控制动画的每一帧，实现更复杂的动画效果。
灵活性高： 可以在动画过程中动态地修改属性。

所以，最佳的策略是：对于简单的动画，可以使用 CSS 动画；对于复杂的动画，可以使用 requestAnimationFrame 来辅助 CSS 动画，或者完全使用 requestAnimationFrame 来实现。

举个例子：你想做一个弹跳的小球动画。

如果只是简单的上下弹跳： 可以使用 CSS 动画的 animation-timing-function 属性来实现，例如 cubic-bezier 函数。
如果需要更真实的物理效果，例如加入重力、摩擦力等： 就需要使用 requestAnimationFrame 来模拟物理运动，并动态地修改小球的位置和速度。

具体怎么结合呢？

利用 CSS transition 触发硬件加速，并用 rAF 来控制具体的变化。 比如说，你想让一个元素旋转，可以通过 transition 来触发硬件加速，然后用 requestAnimationFrame 来动态地修改 transform 属性的 rotate 值。

let element = document.querySelector('.element');
let angle = 0;

function rotate() {
  angle += 1; // 每次旋转 1 度
  element.style.transform = `rotate(${angle}deg)`;
  requestAnimationFrame(rotate);
}

// 先触发 transition, 激活硬件加速
element.style.transition = 'transform 0.1s linear';
requestAnimationFrame(rotate);

使用 CSS animation 定义动画的关键帧，然后用 JavaScript 来控制动画的播放和暂停。 比如说，你想做一个复杂的动画序列，可以使用 CSS animation 来定义关键帧，然后用 JavaScript 来监听动画的 animationiteration 事件，并在每次循环时执行一些额外的操作。

.element {
  animation: myAnimation 2s infinite;
}

@keyframes myAnimation {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

let element = document.querySelector('.element');

element.addEventListener('animationiteration', () => {
  // 每次动画循环时执行一些操作
  console.log('Animation iteration');
});

优化小技巧：让你的动画更上一层楼

除了使用 requestAnimationFrame 之外，还有一些其他的技巧可以帮助你优化动画的性能：

避免频繁地修改 DOM。 每次修改 DOM 都会导致浏览器重新渲染页面，这会消耗大量的性能。尽量减少 DOM 操作的次数，或者使用虚拟 DOM 来提高性能。
使用 transform 和 opacity 属性来实现动画。 这两个属性不会触发浏览器的重排（reflow）和重绘（repaint），性能更高。
避免使用复杂的 CSS 选择器。 复杂的 CSS 选择器会增加浏览器的计算负担，影响动画的性能。
使用 Chrome DevTools 来分析动画的性能。 Chrome DevTools 提供了强大的性能分析工具，可以帮助你找到动画的瓶颈，并进行优化。

总结：动画之路，永无止境

好了，说了这么多，相信大家对 requestAnimationFrame 和 CSS 动画的结合已经有了一定的了解。记住，动画的优化是一个持续不断的过程，需要我们不断地学习和实践。

就像谈恋爱一样，你需要了解你的伴侣（CSS 动画和 requestAnimationFrame）的优点和缺点，找到最适合你们的相处方式，才能让你们的爱情（动画）更加甜蜜美好！

希望这篇文章能帮助大家在动画的道路上更进一步，创造出更加流畅、精美的用户体验。最后，祝大家写码愉快，bug 退散！