动画与交互体验

好的动画不是装饰——它传达空间关系、引导注意力、提供操作反馈。但过度动画会让应用变得浮夸且缓慢。本章讲解 Next.js 中的动画技术栈选型、View Transitions API、加载状态设计、微交互实现，以及如何在性能和体验之间找到平衡。

1. 动画基础原则

1.1 动画的目的

1.2 动画的性能模型

浏览器渲染管道：

JS → Style → Layout → Paint → Composite

核心原则：只动画 transform 和 opacity——它们可以直接在 GPU 上完成，不触发 Layout 和 Paint。

1.3 动画时长参考

快于 100ms：用户感觉不到动画 慢于 500ms：用户感觉卡顿

2. CSS 动画

2.1 何时使用纯 CSS

2.2 CSS 原生动画能力（2025）

2.3 @starting-style：CSS 进入动画

解决了一个长期痛点——纯 CSS 实现元素从 display: none 到可见的过渡：

之前（需要 JS）：
1. 设置 display: block
2. 等待一帧
3. 添加 .visible class 触发过渡

现在（纯 CSS）：
@starting-style {
  .dialog { opacity: 0; transform: scale(0.95); }
}
.dialog { opacity: 1; transform: scale(1); transition: all 0.2s; }

3. Framer Motion

3.1 为什么选择 Framer Motion

3.2 Framer Motion 的核心概念

3.3 Framer Motion 在 Next.js 中的注意事项

3.4 motion/react 轻量版

2025 年 Framer Motion 推出了 motion/react——更小的包体积：

建议：先用 CSS transition，不够用再上 motion/react，极少数复杂场景才用完整的 framer-motion。

4. View Transitions API

4.1 什么是 View Transitions

View Transitions API 是浏览器原生的页面切换动画——在两个 DOM 状态之间自动生成过渡效果：

旧页面状态 → 截图
    ↓
DOM 更新
    ↓
新页面状态 → 截图
    ↓
浏览器自动在两个截图之间做交叉淡入淡出

关键优势：不需要 JS 动画库，浏览器在 Compositor 层面做动画——性能极佳。

4.2 Next.js 中的 View Transitions

4.3 View Transitions 的使用场景

4.4 浏览器支持

渐进增强策略：View Transitions 不支持的浏览器直接跳过动画——用户看到的是正常的页面切换，不会出错。

5. 加载状态设计

5.1 加载状态类型

5.2 骨架屏设计原则

5.3 Next.js 的 loading.tsx

App Router 的 loading.tsx 是路由级别的 Suspense 边界：

app/
├── dashboard/
│   ├── loading.tsx  ← 路由加载时显示
│   └── page.tsx     ← 实际页面内容

层级关系：

layout.tsx（始终显示）
├── loading.tsx（加载中显示）← Suspense boundary
└── page.tsx（加载完成显示）

5.4 避免 Loading 瀑布

❌ 瀑布式加载：
  加载 Layout → 加载 Sidebar → 加载 Content → 加载 Comments
  总时间：400ms + 300ms + 500ms + 200ms = 1400ms

✅ 并行加载 + 独立 Suspense：
  Layout 立即渲染
  ├── Sidebar（独立 Suspense）→ 300ms
  ├── Content（独立 Suspense）→ 500ms
  └── Comments（独立 Suspense）→ 200ms
  总时间：500ms（最慢的那个）

6. 微交互设计

6.1 常见微交互

6.2 滚动动画

Intersection Observer 是实现"元素进入可视区时播放动画"的最佳方式——不阻塞主线程，性能优秀。

6.3 拖拽交互

7. 无障碍与动画

7.1 prefers-reduced-motion

部分用户对动画敏感（前庭障碍），浏览器提供了 prefers-reduced-motion 媒体查询：

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Tailwind v4 提供了 motion-reduce: 变体：motion-reduce:transition-none。

7.2 动画无障碍清单

8. 动画选型决策树

需要动画吗？
├── 简单过渡（hover/focus/颜色变化）
│   → CSS transition（Tailwind 工具类）
├── 进入/退出动画
│   ├── 简单淡入淡出 → CSS @starting-style
│   └── 复杂编排 → Framer Motion AnimatePresence
├── 布局动画
│   → Framer Motion layout
├── 页面切换
│   → View Transitions API
├── 滚动驱动
│   ├── 简单视差 → CSS scroll-timeline
│   └── 复杂联动 → Intersection Observer / useScroll
├── 手势/拖拽
│   → @dnd-kit 或 Framer Motion drag
└── 物理弹簧
    → Framer Motion spring

本章小结

• 核心原则：只动画 transform 和 opacity，100-300ms 时长，ease-out 缓动
• CSS 优先：简单交互用 Tailwind transition，@starting-style 解决进入动画
• Framer Motion：复杂场景的首选——AnimatePresence、layout、弹簧物理，注意包体积
• View Transitions：浏览器原生页面切换动画，渐进增强，Chrome/Safari 已支持
• 加载状态：骨架屏 + 独立 Suspense 边界，避免 Loading 瀑布
• 微交互：hover/click/滚动/拖拽，每个都有最适合的实现方式
• 无障碍：尊重 prefers-reduced-motion，动画不是信息的唯一传达方式
• 选型：CSS → motion/react → framer-motion，按需升级复杂度