转场是什么意思？一文搞懂UI动效底层逻辑

版本升级后 API 全变了？别慌，很多开发者卡在“转场”这个概念上，导致重构时手忙脚乱。今天不扯虚的，我们直接拆解核心机制，一文搞懂转场背后的原理。

一句话原理：状态机的平滑过渡

转场（Transition）的本质，不是简单的“动画”，而是视图状态从 A 到 B 的连续插值过程。

在底层渲染引擎中，转场被定义为一个时间轴上的状态映射。当触发转场事件时，系统不会瞬间替换 DOM 或图层，而是捕获当前帧的状态（位置、透明度、缩放等），计算目标帧状态，并在指定时长内，通过缓动函数（Easing Function）逐帧生成中间状态。

这就好比电影里的“叠化”：前一帧是 A，后一帧是 B，中间有 N 帧是 A 和 B 的混合。转场代码的任务，就是精确控制这 N 帧的混合比例。

类比解释：快递包裹的“无缝交接”

为了让你更直观地理解，我们把 UI 视图想象成一个快递包裹，把转场想象成物流交接过程。

1. 传统切换（硬切）

就像快递员把包裹从旧仓库直接扔进新仓库，中间没有过渡。用户看到的是：包裹突然消失，下一秒突然出现在新位置。

用户体验：割裂感强，不知道包裹去了哪里。
代码表现：View A 移除，View B 添加。无中间帧。

2. 普通转场（动画）

就像快递员拿着包裹，从旧仓库走到新仓库，路上还走了个 S 型。

用户体验：知道包裹在移动，但路径可能很怪。
代码表现：使用 transform 或 opacity 进行关键帧动画。

3. 高级转场（状态映射/Shared Element）

就像包裹本身被“传送”了，但它的外观保持不变，背景从旧仓库平滑过渡到新仓库。用户感知不到“移动”，只感知到“场景变化”。

用户体验：连贯、流畅、高级感。
代码表现：两个视图共享同一套样式属性，通过 will-change 和合成层提升，实现像素级对齐。

关键点：真正的“转场”，核心在于连续性（Continuity）。用户的大脑需要建立“这个元素还在”的认知，而不是“这个元素消失了，另一个元素出现了”。

源码解析：从伪代码看底层插值

很多人只停留在调用 fade() 或 slide() 的层面，却不懂底层是如何计算每一帧的。下面我们用伪代码模拟一个标准的转场引擎核心逻辑。

// 伪代码：模拟转场引擎核心循环
class TransitionEngine {constructor(duration, easing) {this.duration = duration; // 转场时长，如 300msthis.easing = easing; // 缓动函数，如 easeInOutCubicthis.startState = null;this.endState = null;this.startTime = null;this.isAnimating = false;}// 启动转场start(startState, endState, onUpdate, onComplete) {this.startState = startState;this.endState = endState;this.isAnimating = true;this.startTime = performance.now();this._loop(onUpdate, onComplete);}// 核心循环：利用 requestAnimationFrame 逐帧计算_loop(onUpdate, onComplete) {if (!this.isAnimating) return;const now = performance.now();const elapsed = now - this.startTime;let progress = elapsed / this.duration;// 关键步骤1：限制进度在 0-1 之间if (progress > 1) progress = 1;// 关键步骤2：应用缓动函数，计算非线性进度// 例如：前快后慢，或先慢后快const easedProgress = this.easing(progress);// 关键步骤3：插值计算（Interpolation）// 对每一个属性进行线性插值const currentState = {opacity: this._interpolate(this.startState.opacity, this.endState.opacity, easedProgress),x: this._interpolate(this.startState.x, this.endState.x, easedProgress),y: this._interpolate(this.startState.y, this.endState.y, easedProgress),scale: this._interpolate(this.startState.scale, this.endState.scale, easedProgress)};// 关键步骤4：更新视图onUpdate(currentState);if (progress < 1) {// 未结束，请求下一帧requestAnimationFrame(() => this._loop(onUpdate, onComplete));} else {// 结束转场this.isAnimating = false;onComplete();}}// 线性插值公式：A + (B - A) * t_interpolate(a, b, t) {return a + (b - a) * t;}
}

逐行拆解重点：

performance.now()：这是高精度时间戳。不要用 Date.now()，它精度只有毫秒级，在低帧率设备上会导致抖动。
easing（缓动函数）：这是转场“手感”的灵魂。
- linear：匀速，机械感，极少用于 UI。
- ease-out：快进慢出，适合进入动画，给用户“被吸引”的感觉。
- ease-in-out：慢进慢出，适合位移，模拟物理惯性。
requestAnimationFrame：这是浏览器提供的最佳定时器。它会自动同步显示器的刷新率（通常是 60Hz 或 120Hz），确保每一帧都恰好在屏幕刷新前完成计算，避免掉帧。
插值公式 a + (b - a) * t：这是所有转场的基础。无论是透明度、位置还是缩放，都是通过这个公式，根据当前时间进度 t，算出当前该显示的值。

常见误区：很多初学者试图用 setTimeout 或 setInterval 来做转场。这在低端手机上必崩。因为 setTimeout 是异步且不保证精度的，当主线程繁忙时，定时器会被延迟，导致转场卡顿、跳跃。

流程描述：一次转场发生的完整生命周期

当用户点击按钮触发页面切换时，底层发生了什么？我们把这个过程拆解为五个阶段：

阶段 1：事件捕获与准备

用户点击按钮。
框架捕获点击事件，判断是否需要转场。
如果启用转场，冻结当前视图状态（Capture State）。
关键点：此时必须确保当前视图是稳定的，不能有未完成的动画。如果有，需要先完成或中断前一个动画。

阶段 2：合成层提升（Layer Promotion）

浏览器引擎将参与转动的元素从 DOM 树中提取出来，创建独立的合成层（Composited Layer）。
这一步是为了性能。如果直接在主线程操作 DOM 属性（如 top, left），会触发重排（Reflow）和重绘（Repaint），非常耗时。
提升为合成层后，后续的位置、透明度变化可以在 GPU 上进行，不阻塞主线程。

阶段 3：插值计算与渲染

进入 requestAnimationFrame 循环。
每一帧（约 16.6ms），计算当前时间进度。
应用缓动函数，得到非线性进度。
对所有参与转动的属性进行插值计算。
将计算出的样式值应用到合成层。

阶段 4：GPU 合成与显示

GPU 读取合成层的最新状态。
将多个合成层（背景、前景、文字等）进行光栅化（Rasterization）。
将最终画面发送到屏幕缓冲区。
显示器刷新，用户看到新的帧。

阶段 5：清理与状态同步

转场进度达到 100%。
移除临时生成的合成层（如果不再需要）。
更新 DOM 树，确保 DOM 结构与最终视觉状态一致。
触发 onComplete 回调，执行后续逻辑（如加载新页面数据）。

特别注意：在阶段 2 和阶段 5 之间，DOM 结构可能并未改变，改变的只是合成层的变换矩阵。这就是为什么转场可以做得如此流畅——因为它避开了最耗时的 DOM 操作。

实战验证：如何检测你的转场是否合格

理论讲完了，怎么在实际项目中验证？这里提供三个可落地的检测标准。

1. 帧率监控（FPS）

工具：Chrome DevTools -> Performance 面板，或 iOS Safari 的 FPS 显示。
合格标准：全程稳定在 60FPS（或 120FPS，取决于设备）。
不合格表现：出现明显的红色尖刺（Jank），帧率掉到 30FPS 以下。
原因排查：通常是主线程被长任务阻塞，或者布局抖动（Layout Thrashing）。

2. 视觉连续性（Visual Continuity）

方法：录制屏幕，放大到 4K，逐帧播放。
合格标准：
- 没有闪烁（Flicker）。
- 没有位置跳变（Jump）。
- 边缘没有模糊（Blur）。
不合格表现：元素在转场中途突然消失再出现，或者边缘出现锯齿。
原因排查：可能是 will-change 未正确设置，导致合成层未及时提升；或者是 transform 和 top/left 混用。

3. 交互响应性（Responsiveness）

方法：在转场进行到 50% 时，尝试点击屏幕其他区域或滑动。
合格标准：
- 如果设计允许，转场应能被中断并反向播放（Interruptible）。
- 如果不允许中断，界面应能正确忽略或排队后续输入，而不是无响应。
不合格表现：转场期间整个 App 卡死，无法操作。
原因排查：转场逻辑写在了主线程同步阻塞代码中，或者状态管理混乱。

常见避坑指南

避免动画 top, left, width, height
- 这些属性会触发重排（Reflow），开销巨大。
- 正确做法：使用 transform: translate() 和 transform: scale()。
慎用 filter 和 box-shadow 动画
- 虽然它们不触发重排，但会触发重绘（Repaint），在低端机上依然很慢。
- 正确做法：如果必须使用，确保元素已提升为合成层，并控制动画区域大小。
will-change 不要滥用
- will-change 会提前分配内存。如果所有元素都设置，内存会爆炸。
- 正确做法：只在转场开始前几帧动态添加，转场结束后立即移除。