一、动画基础概念：页面切换动画到底是什么

说实话，我刚入行那会儿，觉得页面切换动画就是个「花架子」。不就是从一个页面跳到另一个页面嘛，加个渐隐渐现、滑入滑出，看着炫酷就完事了。直到有一次，我负责一个数据大屏项目——用户点一个按钮，整个页面直接「啪」地闪过去，没有任何过渡。用户反馈说：「我根本不知道刚才发生了什么，数据变了没有？」

嗯，从那时候起我才真正意识到：页面切换动画不是装饰，是导航的「语言」。它告诉用户——你从哪里来，到了哪里去，中间发生了什么变化。

1.1 什么是页面切换动画

页面切换动画，说白了就是两个页面状态之间的视觉过渡。用户从 A 页面跳转到 B 页面，中间那几百毫秒的「视觉桥梁」，就是切换动画。

常见的切换动画包括：

• 平移滑动——页面像卡片一样左右滑入滑出
• 淡入淡出——透明度从 0 到 1 或从 1 到 0
• 缩放——页面从中心放大进入或缩小退出
• 翻转——模拟 3D 翻页效果
• 共享元素过渡——某个元素（比如一张图片）从 A 页「飞」到 B 页

我个人习惯把切换动画分成两类：

类型	特点	适用场景
整页切换	整个页面作为一个整体过渡	Tab 切换、路由跳转、轮播
元素级切换	页面内部分元素独立过渡	列表展开、弹窗、详情页跳转

你想想看，如果每次页面切换都「硬切」，用户会感觉像在翻一本没有页码的书——翻到哪页算哪页。而动画就是那根「手指」，带着用户的视线平滑移动。

1.2 动画与用户体验的关系

我在项目中遇到过不少「为了动画而动画」的情况。产品经理说：「这里加个翻转效果，酷！」结果用户反馈说：「转得我头晕。」——这就是典型的动画与用户体验脱节。

好的切换动画，应该做到三件事：

1. 建立空间感——让用户知道页面之间的层级关系。比如从列表页进入详情页，详情页从右侧滑入，用户就知道「我进到下一层了」。
2. 减少认知负荷——动画能引导视线，告诉用户「看这里，变化发生了」。我记得有个表单提交的场景，提交成功后按钮变成对勾并缩小消失，用户一眼就知道「操作完成了」。
3. 提升感知性能——说白了就是「让用户觉得快」。页面加载可能需要 500ms，但如果你用 200ms 的动画过渡一下，用户会觉得「嗯，挺流畅的」。这就是心理学上的「感知延迟」。

我曾经踩过一个坑：一个移动端 H5 项目，页面切换用了 600ms 的滑动动画。用户觉得「卡」，其实帧率没问题，就是动画时间太长了。后来我缩短到 300ms，用户反馈立刻变好了。所以，动画时长不是越长越好。

1.3 动画性能指标

做动画最怕什么？卡顿。一个掉帧的动画，比没有动画还糟糕。我见过一个项目，动画做得花里胡哨，结果在低端机上跑得像幻灯片——用户直接卸载了。

衡量动画性能，我主要看这几个指标：

指标	说明	合格标准
帧率（FPS）	每秒渲染的帧数	≥ 60 FPS（流畅） 30～60 FPS（可接受） < 30 FPS（卡顿）
帧时间	每帧渲染耗时	≤ 16.67ms（60FPS 对应）
丢帧率	掉帧数量占总帧数的比例	< 5%
首次绘制延迟	动画开始到第一帧渲染的时间	< 100ms

你可能会问：「我怎么知道动画卡不卡？」

嗯，浏览器自带的 DevTools 就能看。打开 Performance 面板，录制一段动画，看 FPS 图表——如果出现大面积的红色条，那就是掉帧了。

下面这张图，是我自己总结的「页面切换动画知识体系」，帮你快速理清本章的核心脉络：

这张图把本章的三个核心概念串起来了：定义 → 类型 → 体验 → 性能。你学完这一章，应该能回答三个问题：

• 页面切换动画是什么？——视觉连续性的状态过渡
• 它跟用户体验有什么关系？——建立空间感、减少认知负荷、提升感知性能
• 怎么衡量它好不好？——看 FPS、帧时间、丢帧率

嗯，这就是动画基础的全部内容。别小看这些概念，后面我们讲具体实现的时候，你会发现——所有花哨的动画效果，底层都离不开这三个问题。