WHAT - 前端动画的前世今生

“动画的前世今生”其实是前端发展史中非常有代表性的一个切面。

动画从早期的纯图片切换 → Flash → CSS → JS → GPU 加速 → 现代动画框架 → WebGPU/WebGL → 原生合成动画，整个演进过程本质上是浏览器渲染能力、硬件加速、交互体验以及标准化程度不断提升的缩影。

今天系统性梳理一下这段历史，并穿插技术变迁、优劣对比与趋势预判。

---

一、萌芽期：GIF 与 Flash 的时代（1990s–2000s）

1. GIF 动画（静态网页时代）

时代背景

• 90 年代中后期，网页大多是静态 HTML + 图片。
• 浏览器对动画的支持非常有限，没有 DOM 动画概念。
• 想要动画效果，只能通过 GIF 图片 或者 <marquee> 标签实现。

实现方式

• 一张多帧 GIF 图循环播放。
• 浏览器原生渲染，无需脚本。

优点

• 简单、兼容性好。
• 不依赖 JS 或复杂环境。

缺点

• 无法与用户交互。
• 帧率低、文件大、加载慢。
• 不能控制动画逻辑（速度、暂停、跳转等）。

---

2. Flash 动画（富媒体网页的兴起）

时代背景

• 1996 年 Macromedia 推出 Flash（后被 Adobe 收购）。
• 网页开始追求炫酷动画、交互式体验。
• Flash Player 插件几乎成为标配。

实现方式

• 使用 Flash 工具（如 Flash MX）制作动画，导出 SWF 文件。
• 嵌入网页 <object> 或 <embed> 中播放。

优点

• 功能强大，支持时间轴、补间动画、音视频、交互脚本（ActionScript）。
• 跨浏览器一致性好，动画流畅度高。
• 很多早期游戏和交互网站都依赖 Flash（如 QQ 空间小游戏）。

缺点

• 依赖 Flash 插件（安全问题、性能消耗大）。
• 对 SEO 不友好。
• 不兼容移动端。
• 后期因安全问题、移动设备崛起（iPhone 不支持 Flash）而逐渐被淘汰。
• Adobe 宣布 2020 年正式停止支持 Flash Player。

Flash 的消亡，也直接推动了 Web 原生动画能力的崛起。

---

二、标准化时代：CSS 与 JS 动画的崛起（2000s–2010s）

1. CSS Transition / Animation

时代背景

• CSS2/3 推出了 transition 和 animation 属性。
• 浏览器逐渐支持硬件加速。
• Flash 退出历史舞台，CSS 动画成为轻量方案。

实现方式

• 使用 transition 实现状态变化动画（如 hover）。
• 使用 @keyframes + animation 实现多阶段动画。

优点

• 语法简单，纯样式控制，性能较好。
• 浏览器原生优化，部分属性（如 transform/opacity）会走 GPU 加速。
• 不依赖 JS，易于维护。

缺点

• 动画逻辑有限，难以控制复杂交互。
• 时间轴不可动态控制（暂停、跳转不灵活）。
• 缺乏事件响应的灵活度。

常见的动画属性：opacity、transform、top/left（但后者性能差）

---

2. JavaScript 动画（JS 驱动）

时代背景

• AJAX、jQuery、HTML5 的普及，Web 开发进入动态时代。
• 对复杂交互的需求迅速增加。
• 浏览器引入 requestAnimationFrame（rAF），替代 setInterval 驱动动画。

实现方式

• 使用 JS 控制 DOM 样式（如 element.style.left）。
• 或使用 Canvas 绘制动画。
• 或使用第三方库（如 GSAP、anime.js、Velocity.js）。

优点

• 灵活可编程，可控制任意属性和时机。
• 与事件绑定紧密，适合交互式动画。
• 可与物理引擎结合，支持缓动、弹性、时间线控制。

缺点

• 不当使用可能导致性能瓶颈（频繁重排 / 重绘）。
• 需要手动处理帧同步与节流。
• 代码复杂度比 CSS 高。

requestAnimationFrame 的出现是 JS 动画的重要转折点，让动画更精准地同步浏览器刷新节奏，提升流畅度和功耗表现。

---

三、硬件加速与现代化：GPU 合成、WebGL、Lottie（2010s–2020s）

1. GPU 加速 + 合成层优化

时代背景

• 浏览器开始广泛支持硬件加速（GPU compositing）。
• 前端性能优化进入精细化阶段。

实现方式

• 使用 transform、opacity，将元素提升为合成层。
• CSS will-change 提前 hint 浏览器。
• 避免 layout、paint 的开销，只在合成层中移动。

优点

• 帧率大幅提升。
• 适用于移动端高帧动画。
• 与 CSS / JS 配合使用。

缺点

• 滥用合成层可能导致显存占用大。
• 仍需开发者理解渲染机制。关于合成层和渲染机制我们在 WHAT - CSS Animationtion 动画系列（三）- 动画卡顿分析 进行了详细介绍。

---

2. Canvas / WebGL / Three.js

时代背景

• HTML5 带来了 <canvas>。
• WebGL 让前端拥有了真正的 3D 渲染能力。
• 游戏、可视化、粒子特效成为高端动画应用场景。

实现方式

• 使用 Canvas 2D 绘制逐帧动画。
• 使用 WebGL/Three.js 实现 3D 场景。
• 使用 Shader（GLSL）实现炫酷特效。关于 Shader 的介绍 https://thebookofshaders.com/01/?lan=ch

优点

• 高性能、灵活，接近原生游戏渲染。
• 适合大规模动画、复杂场景。
• 可与物理引擎结合，构建沉浸式交互。

缺点

• 学习成本高。
• DOM 体系之外，不好与 UI 混用。这是关键。
• 开发复杂度远高于 CSS/JS 动画。

---

3. Lottie 动画（AE 动画的 Web 时代）

时代背景

• 移动端（尤其 App）对精致动画的需求激增。
• Lottie（Airbnb 开源）让 AE 动画能直接在 Web/App 中播放。

实现方式

• AE 导出 JSON 文件（通过 Bodymovin 插件）。
• Lottie Web 或 Lottie Player 解析 JSON，使用 SVG / Canvas / WebGL 渲染动画。

优点

• 设计师与开发解耦。
• 可移植性强，跨平台一致。
• 文件小、性能好。

缺点

• 适合装饰性动画，不适合复杂逻辑交互。
• 支持范围受限（AE 特效太复杂的无法导出）。

---

四、未来趋势：Web Animations API、WebGPU 与合成动画（2020s–）

1. Web Animations API（WAAPI）

时代背景

• W3C 标准正在让浏览器提供原生 JS 动画 API，减少手动管理帧。
• 浏览器直接在合成层执行动画（不走 JS 主线程），性能更高。

实现方式

element.animate([{ transform: 'translateX(0)' },{ transform: 'translateX(200px)' }
], {duration: 1000,easing: 'ease-out'
});

优点

• 原生支持、无需第三方库。
• 能充分利用浏览器合成动画能力（更节能流畅）。
• 提供 Timeline 控制、Promise 机制、事件监听。
• 与 CSS Animation 互通。

缺点

• 仍在发展中，不是所有浏览器特性都完全统一。
• API 相对底层，需要封装。

---

2. WebGPU 与实时渲染动画

时代背景

• WebGPU 是 WebGL 的升级版，更接近原生 GPU API。
• 支持高性能计算、实时渲染、AI + 动画混合场景。
• 动画从“视觉装饰”变成“交互引擎”。

潜力方向

• 游戏级动画（与 Unity、Unreal 引擎集成）。
• WebXR / WebAR / WebVR。
• 大型数据可视化 + 实时交互。
• AI 驱动的生成式动画。

---

五、动画技术演进与选择建议

阶段	技术	优势	缺点	典型场景
GIF	静态帧动画	简单	体积大、不可交互	Banner、老旧网页
Flash	插件动画	功能强	插件依赖、安全隐患	早期网站
CSS	过渡/关键帧	简洁高效	逻辑不灵活	简单动效
JS + rAF	精准控制	灵活	性能需手动管理	交互动画
GPU 合成	硬件加速	高性能	图层管理复杂	移动端、性能优化
Canvas / WebGL	图形动画	高自由度	开发复杂	游戏、特效
Lottie	设计驱动	跨端一致	不适交互	装饰性动画
WAAPI / WebGPU	未来标准	合成动画、性能极高	API 还在完善	高级动画

---

六、总结与展望

• 前端动画经历了从「GIF 静态帧」→「Flash 插件」→「CSS/JS 原生」→「GPU/Canvas」→「Web Animations / WebGPU」的演变。

• 核心驱动力：标准化 + 性能优化 + 交互体验。

• 越往现代化发展，动画越靠近浏览器底层渲染引擎，性能越高、控制越精细。

• 未来趋势：

  • 更多动画将运行在合成线程，脱离主线程干扰；
  • 设计师与开发的协作门槛将进一步降低（如 Lottie / Motion Design 工具链）；
  • WebGPU 将带来“网页 = 游戏引擎”的新时代；
  • AI 与动画的结合也会带来更多自动化和生成式动效。

---

一句话总结

Web 动画的发展史，就是 Web 渲染与交互能力进化史。
技术在变，体验不变 —— 动画的核心始终是让用户感受到“顺畅、自然、愉悦”。