Fanvas - Flash 至 HTML5 Canvas 动画转换器

概述

Fanvas 是一款由腾讯开源的创新工具，能够将传统的 SWF（Flash）动画文件一键转换为基于 HTML5 Canvas 技术的现代动画。它为设计师和开发者搭建了一座桥梁，让经典的 Flash 动画资产能够在如今的 Web 标准（H5）环境中重生并高效运行。

核心功能

• 一键式转换：直接将 SWF 文件转换为完整的 HTML5 Canvas 动画代码包（包括 JSON 数据文件和 JS 运行库），操作极其简便。
• 全面格式支持：能够解析和处理 SWF 文件中的各种矢量图形命令和多样化的位图图像格式，确保动画细节的还原度。
• 高效运行库：内部包含一个经过高度优化的 JavaScript 运行库，该库实现了位图缓存、自动脏区识别和脏区重绘等关键技术，以保障转换后动画的播放性能。
• 开源与可扩展：工具完全开源，允许开发者根据自身需求进行二次开发和定制，为项目提供更高的灵活性。

主要优势

Fanvas 与市场上其他类似工具（如 Google 的 Swiffy 和 Adobe 的 Flash CC）相比，具有以下显著优势：

1. 直接支持 SWF 文件：无需依赖 Flash 源文件（FLA），可直接处理已发布成品的 SWF 文件，这对使用历史动画素材的项目尤其友好。
2. 超轻量的数据与运行库：
   • 转换后生成的 JSON 数据文件经过精简编排，文件尺寸通常比同类工具（如 Flash CC）小 20% 到 50%。
   • 核心 JavaScript 运行库极其轻量，混淆后仅约 35KB，经 Gzip 压缩后可降至 10KB 左右。相比之下，Swiffy 和 Flash CC 的运行库体积往往超过 100KB。
3. 卓越的转换保真度：致力于将 SWF 动画（包括矢量和位图元素）完美地复刻到 Canvas 上，保持原有的视觉效果和动画流畅性。
4. 拥抱 H5 生态：帮助设计师（“美术妹子”）一次创作，即可让动画在多种不支持 Flash 的现代终端（如移动设备、新版浏览器）上无缝运行，轻松搭乘 H5 的快车。

技术架构

Fanvas 系统由两个核心部分构成：

1. 解析器（exporter）：使用 ActionScript 3.0 编写，负责解析输入的 SWF 文件，并将其内容（图形、时间轴、动作等）转换为结构化的 JSON 数据。
2. 运行库（runtime）：使用纯 JavaScript 编写，负责在浏览器中加载并解析上一步生成的 JSON 数据，驱动 Canvas 元素来渲染和播放最终的动画。

获取与使用

• 快速开始：工具提供了图形化界面，基本流程为“导入 SWF -> 转换 -> 导出 JS 动画包”。详细的步骤请参考项目 bin 目录内的《使用说明》文档。
• 在线演示：可以通过以下链接查看由 Fanvas 转换的实际动画效果：

总结

对于拥有大量 Flash 历史动画资产，并希望将其现代化以便在 HTML5 环境中使用的团队和个人而言，Fanvas 是一个非常出色且高效的解决方案。它以其直接转换能力、极致的轻量化和开源特性，成为了连接经典 Flash 动画与当代 Web 技术的一座坚实桥梁。