一个系统化梳理 Web 动画技术体系的可交互演示站。从 CSS、DOM、SVG、Canvas 到 WebGL/GPU 的底层能力，再到 Motion、GSAP、Lottie、Three.js 等编排框架——每个主题都附带实时可交互演示、示例代码与移动端（iOS / Flutter / Android）类比，帮助开发者（尤其是移动端背景的同学）快速建立 Web 动画的完整心智模型。
核心观点：Web 动画不是单一技术，而是一套分层体系。
- 两大维度 × 16 个主题：8 个浏览器底层技术 + 8 个框架 / 类库，覆盖从声明式到 GPU 渲染的全光谱
- 实时演示：每个主题都配有可亲手操作的 Demo，而非静态截图
- 代码片段：提炼每个技术最典型的用法，可直接复制借鉴
- 移动端类比：把 Web 技术映射到
UIView.animate、AnimatedContainer、Hero、SceneKit等熟悉概念，降低跨端理解成本 - 场景与取舍：标注适用场景、优点与局限，帮助技术选型
| 类别 | 技术 |
|---|---|
| 框架 | React 19 + TypeScript |
| 构建 | Vite 7 |
| 样式 | Tailwind CSS 3.4 + shadcn/ui（40+ 组件） |
| 动画 / 渲染 | Motion、GSAP、Anime.js、Lottie、Three.js、PixiJS |
| 图表 | ECharts、Recharts |
| 主题 | 一句话定位 |
|---|---|
| CSS Transition | 状态 A -> 状态 B 的平滑过渡 |
| CSS Animation + @keyframes | 多阶段、循环和自动播放动画 |
| Web Animations API (WAAPI) | 浏览器原生 JS 动画 API，支持暂停 / 反向 / 速率控制 |
| requestAnimationFrame | Web 动画的底层逐帧驱动机制 |
| SVG 动画 | 矢量图形的描边、Morph 与生长动画 |
| Canvas 2D | 像素画布，逐帧重绘，适合大量运动对象 |
| WebGL / WebGPU | GPU 加速的 2D / 3D 大规模视觉动画 |
| View Transition API | 页面 / DOM 状态切换的原生过渡 |
| 主题 | 一句话定位 |
|---|---|
| Motion（原 Framer Motion） | React / Vue 声明式动画框架 |
| GSAP | Web 复杂动画编排最强方案之一，Timeline 编排能力突出 |
| Anime.js | 轻量、API 直观的通用动画引擎 |
| Lottie | 跨端设计动画资产播放（AE -> JSON） |
| Rive | 可交互的动画组件与状态机 |
| Three.js | Web 3D 最主流的底层框架之一 |
| PixiJS | 高性能 2D GPU 渲染框架 |
| 图表动画框架 | ECharts / D3 / Chart.js / AntV / Highcharts |
# 安装依赖
npm install
# 启动开发服务器（默认端口 3000）
npm run dev
# 构建生产产物
npm run build
# 本地预览构建产物
npm run preview
# 代码检查
npm run lintsrc/
├── App.tsx # 主应用：首页 + 分类切换 + 页面视图
├── main.tsx # 应用入口
├── data/
│ └── pages.ts # 16 个主题的元数据（描述 / 场景 / 类比 / 代码）
├── demos/
│ ├── TechDemos.tsx # 8 个底层技术的实时演示
│ └── LibDemos.tsx # 8 个框架 / 类库的实时演示
├── components/
│ ├── Footer.tsx
│ └── ui/ # shadcn/ui 组件库（40+）
├── hooks/
│ └── use-mobile.ts
└── lib/
└── utils.ts # cn() 等工具函数
路径别名 @ 指向 src/，例如 import { Button } from '@/components/ui/button'。
Vite 配置中 base: './' 使用相对路径，构建产物（dist/）可直接托管到任意静态站点，包括 GitHub Pages、Vercel、Netlify 或对象存储，无需额外配置子路径。
- 部分主题（如 Rive）为概念演示，真实项目需加载设计师导出的资产文件与对应 Runtime。
- 移动端类比为帮助理解的概念映射，并非一一对应的等价 API。