2、帧率核心概念：帧率定义、人眼视觉暂留、60fps与120fps差异、帧率与流畅度关系

2.1 帧率到底是什么？

帧率，说白了就是「每秒能翻多少张画」。

专业点讲，帧率（FPS，Frames Per Second）表示显示设备每秒刷新的画面数量。比如 60fps，就是一秒钟闪过 60 张静态画面。

我刚开始做动效时，总觉得帧率就是个数字。直到有一次，我在一个低端机上跑动画，卡得跟幻灯片似的。嗯，从那以后，我再也不敢小看帧率了。

帧率的单位是 fps，常见的有：

• 24fps：电影标准，人眼觉得「嗯，挺流畅」
• 30fps：早期电视、直播常用
• 60fps：现代 UI 动效的黄金标准
• 120fps：高端手机、电竞显示器的追求

2.2 人眼视觉暂留——为什么动效看起来是「动」的？

你想想看，电影其实就是一张张静态图片快速闪过。为什么我们觉得它在动？

这就要说到人眼的「视觉暂留」效应了。

人眼看到一幅画面后，图像会在视网膜上停留大约 1/24 秒（约 41.7ms）。如果下一帧在这个时间内出现，大脑就会自动「脑补」成连续运动。

我记得在做一个滚动列表的动效时，发现 30fps 下文字边缘有轻微抖动。后来查资料才明白，30fps 的帧间隔是 33.3ms，已经接近视觉暂留的极限了。一旦超过 41.7ms，人眼就能明显感知到「卡顿」。

2.3 60fps vs 120fps——差在哪？

很多人问：60fps 已经很流畅了，120fps 有必要吗？

我的回答是：看场景。

咱们直接看数据对比：

指标	60fps	120fps
帧间隔	16.67ms	8.33ms
人眼感知	流畅	极其丝滑
适合场景	日常 UI、列表滚动	高速运动、游戏、VR
性能开销	较低	较高（CPU/GPU 负载翻倍）

我个人习惯是：日常动效用 60fps 就够了，但涉及到快速滑动、拖拽、3D 变换时，我会尽量往 120fps 靠。

为什么会这样？因为 60fps 下，如果一帧卡了 30ms，用户能明显感觉到「顿了一下」。但 120fps 下，即使卡了一帧，下一帧 8ms 后就来了，人眼几乎察觉不到。

2.4 帧率与流畅度的真实关系

很多人以为「帧率越高越流畅」，其实不完全对。

流畅度 = 帧率 × 帧稳定性

什么意思？我举个例子：

• 场景 A：稳定 60fps，每帧 16.67ms，没有波动
• 场景 B：平均 90fps，但有时 8ms，有时 30ms，忽快忽慢

你猜哪个更流畅？

答案是场景 A。因为人眼对「抖动」特别敏感。帧率忽高忽低，比稳定低帧率更让人难受。

我在项目中遇到过这种情况：一个动画在 iPhone 上跑 120fps，但在某安卓机上只有 40-60fps 来回跳。用户反馈「看着头晕」。后来我强制锁了 60fps，反而好评如潮。

2.5 实际开发中的帧率监控

说了这么多理论，怎么落地？

我个人习惯用 Chrome DevTools 的 Performance 面板，或者直接在代码里打点：

// 一个简单的帧率监控
let lastTime = performance.now();
let frames = 0;

function checkFPS() {
  frames++;
  const now = performance.now();
  const delta = now - lastTime;

  if (delta >= 1000) {
    const fps = Math.round((frames * 1000) / delta);
    console.log(`当前帧率: ${fps} fps`);
    frames = 0;
    lastTime = now;
  }

  requestAnimationFrame(checkFPS);
}

checkFPS();

这段代码会每秒输出一次当前帧率。我建议你在动效开发时一直开着它，随时观察。

2.6 总结一下

帧率这东西，说白了就是「每秒能画多少帧」。人眼视觉暂留给了我们 41.7ms 的窗口期，但 UI 动效要做到 60fps（16.67ms/帧）才算合格。

60fps 和 120fps 的差异，不只是数字翻倍，而是用户体验从「流畅」到「丝滑」的质变。但前提是——帧率要稳定。

嗯，下一章我会讲「帧率瓶颈分析」，到时候咱们一起看看，到底是什么拖慢了你的动画。