1. 动画基础认知：移动端动画分类、动画性能指标、60fps与120fps的差异

大家好，我是你们这门课的主讲。今天咱们来聊聊动画最基础的东西。

说实话，做了这么多年移动端开发，我见过太多人一上来就怼动画代码，结果卡成PPT。嗯，这其实不是技术问题，是基础没打牢。你想想看，连动画分哪几类、性能怎么看都不清楚，怎么可能写出丝滑的效果？

所以这一章，咱们先把地基夯实。我会结合我踩过的坑，把动画分类、性能指标、还有60fps和120fps到底差在哪，一次性给你讲透。

1.1 移动端动画的三大分类

我个人习惯把移动端动画分成三类。为什么这么分？因为每一类的实现原理和性能开销完全不同。

• UI过渡动画：说白了就是页面元素的状态变化。比如按钮点击后的缩放、列表项的淡入淡出、页面切换的滑动。这类动画通常由系统框架（如iOS的UIKit或Android的View系统）直接驱动，性能开销最小。
• 属性动画：对视图的某个属性（位置、大小、透明度、旋转角度）进行持续变化。比如一个图片从屏幕左边飞到右边。这类动画需要开发者手动控制起始值和结束值，系统负责中间帧的插值计算。
• 逐帧动画：像放电影一样，一帧一帧地切换图片。比如加载时的转圈菊花、人物行走的连续动作。这类动画最吃性能，因为每一帧都是一张完整的位图。

1.2 动画性能的核心指标

判断一个动画好不好，不是看它炫不炫，而是看它卡不卡。我总结了三个核心指标，你记牢了：

指标	含义	理想值
帧率（FPS）	每秒渲染的画面数量	≥60fps（稳定）
帧时间	渲染一帧所花费的时间	≤16.67ms（60fps时）
丢帧率	超过帧时间阈值的帧占比	≤5%

为什么会这样？因为人眼对画面流畅度的感知是有阈值的。低于30fps你会明显感觉卡顿，30-60fps之间算勉强能接受，稳定在60fps以上才叫丝滑。

1.3 60fps vs 120fps：到底差在哪？

这个问题我经常被问到。很多人觉得120fps就是60fps的两倍流畅，其实没那么简单。

先看一组数据：

帧率	每帧时间	人眼感知	适用场景
30fps	33.33ms	明显卡顿	低端设备、静态页面
60fps	16.67ms	流畅	绝大多数UI动画
90fps	11.11ms	非常流畅	游戏、VR
120fps	8.33ms	极致丝滑	高刷屏、专业应用

你看，从60fps到120fps，每帧时间从16.67ms压缩到了8.33ms。这意味着你的渲染线程必须在更短的时间内完成所有工作——布局计算、绘制、合成、提交。

我曾经在一个高刷屏项目里踩过坑。当时觉得120fps很牛，就把所有动画都往120fps怼。结果呢？CPU和GPU直接拉满，手机烫得能煎鸡蛋。后来我学乖了：

• 普通UI动画（按钮、列表、弹窗）：60fps完全够用，别浪费性能
• 滚动列表：尽量保持60fps，120fps对滚动提升不大
• 游戏或手绘：才值得上120fps

1.4 如何测量动画性能？

光说不练假把式。我教你两个最实用的方法：

方法一：使用系统工具

• iOS：用Xcode的Core Animation工具，能看到每一帧的渲染耗时
• Android：用Profile GPU Rendering，绿色条代表16ms内完成，红色就是超时
• Web：Chrome DevTools的Rendering面板，勾选FPS Meter

方法二：代码埋点

我习惯在动画回调里打时间戳，自己算帧率。代码很简单：

// 伪代码示例
let lastTime = performance.now()
let frameCount = 0

function onAnimationFrame() {
  frameCount++
  const now = performance.now()
  const elapsed = now - lastTime
  
  if (elapsed >= 1000) {
    const fps = frameCount / (elapsed / 1000)
    console.log(`当前帧率: ${fps.toFixed(1)}`)
    frameCount = 0
    lastTime = now
  }
  
  requestAnimationFrame(onAnimationFrame)
}

这个方法的好处是，你能精确知道每一帧的耗时分布。比如布局花了多少、绘制花了多少、合成花了多少。嗯，这里要注意，别在动画循环里做太重的计算，否则会影响测量结果。

1.5 本章小结

好了，这一章的内容就这些。咱们回顾一下重点：

• 动画分三类：UI过渡、属性动画、逐帧动画，性能开销依次递增
• 核心指标：帧率≥60fps、帧时间≤16.67ms、丢帧率≤5%
• 60fps和120fps的差异：不是简单的两倍关系，120fps对硬件要求极高，普通场景用60fps更稳妥
• 测量工具：系统工具+代码埋点，双管齐下

下一章，咱们会深入CSS动画和JS动画的性能对比。到时候我会拿一个真实项目里的案例，给你拆解为什么有些动画在低端机上卡成狗。敬请期待。

公众号:蓝海资料掘金营，微信deep3321