MeeWoo - SVGA、双通道MP4、Lottie 动画在线预览与转换工具

MeeWoo 是一个面向设计师与前端工程师的 在线动画预览与格式转换工具，支持 SVGA、双通道 MP4（YYEVA 风格）、Lottie 多种动画格式，并提供素材替换与导出能力。

---

在线地址

• 页面入口：https://www.meewoo.me/

（打开即用，无需安装或下载依赖。）

---

功能概览

1. SVGA 模块

• 在线预览：拖入 SVGA 文件即可实时预览动画效果
• 播放控制：
  • 播放 / 暂停
  • 进度条拖拽、当前帧 / 总帧数显示
  • 循环播放
• 素材替换：
  • 右侧「素材图替换」侧边栏
  • 展示所有图片素材缩略图与 imageKey
  • 支持搜索、复制名称、单个素材替换
  • 替换后可实时预览并导出新的 SVGA 文件
• 素材编辑器：
  • 基于 Konva.js 的可视化编辑器
  • 支持底图和文案的选中、拖拽、缩放操作
  • Transformer 手柄支持比例缩放，选中后才可移动
  • 显示区域与导出区域分离，提供更大操作空间
  • 蓝色虚线参考线标识导出边界
  • 文案支持动态尺寸、对齐方式切换
  • Konva 命令系统支持撤销/重做
  • 容器尺寸自适应，延迟初始化确保 CSS 动画完成
  • 修复图层选择后另一图层仍可拖动的问题
• 素材编辑器服务化：
  • 将编辑能力抽象为独立服务，支持多种调用方式
  • TextRenderer：文字渲染服务，支持渐变填充、文字阴影、文字描边
  • ImageTransformer：图片变换服务，支持缩放、位移、cover/contain 填充模式
  • MaterialComposer：素材合成服务，支持底图与文字层叠加
  • MaterialEditorService：编辑器服务主类，统一入口
  • MaterialEditorUI：可复用编辑器弹窗组件
  • 支持其他页面（如 YYEVA）独立调用编辑能力
• 导出 GIF：
  • 基于 gif.js 与 Web Worker，在浏览器端完成编码
  • 显示导出进度，支持取消
  • 支持背景色处理，避免黑底
• 导出 WebP：
  • 基于 webpxmux.js 编码动画 WebP
  • 支持透明背景
  • 显示导出进度，支持取消
  • 支持自定义尺寸和帧率设置
  • 使用 TimerService 管理 URL 清理，避免内存泄漏
• 转换为双通道 MP4：
  • 将 SVGA 按帧渲染到 Canvas
  • 合成「彩色 + Alpha 灰度」双通道画面
  • 通过 ffmpeg.wasm 编码为 MP4 文件
  • 优化：修复 Web Worker 加载问题，实现内联代码方式加载 Worker，解决内存配额问题，添加分批处理机制，支持大量帧（如 719 帧）的合成
  • 使用 TimerService 管理内存池定期清理，优化内存使用

---

2. 双通道 MP4（YYEVA 风格）模块

• 文件加载与预览：
  • 支持左右并排或上下并排的双通道 MP4 视频
  • 自动探测 Alpha 通道位置（左/右 或 上/下）
  • 合成带透明通道的最终画面
• 播放控制：
  • 播放 / 暂停、进度条拖拽
  • 帧数与时间显示
  • 循环播放
• 音频支持：
  • 保留并播放视频原始音轨
  • 支持静音开关
• 格式互转：
  • 双通道 MP4 → SVGA（按帧提取并打包）
  • 双通道 MP4 → GIF（通过序列帧）
  • 双通道 MP4 → WebP（通过序列帧）
• key 素材替换：
  • 支持图片和文本 key 的实时替换
  • 可视化 key 列表，支持搜索和筛选
  • 图片 key 支持预览和即时替换
  • 文本 key 支持在线编辑
  • 蒙版自动提取和应用（针对图片 key）
  • 响应式更新，确保替换后立即生效
• 资源管理：
  • 模块切换时自动清理 <video>、Canvas 等资源

---

3. Lottie 模块（进行中）

• 当前能力：
  • 拖入 .json 文件自动切换到 Lottie 模块
  • 作为占位模块用于后续扩展
• 计划能力（ROADMAP 中规划）：
  • 使用 lottie-web 渲染动画
  • 播放 / 暂停、进度控制、帧数显示
  • 导出为 GIF / MP4 / SVGA（长远规划）

---

4. 通用交互与 UI 设计

• 画布与视图控制：
  • 鼠标滚轮缩放（约 20% ~ 500%）
  • 1:1 显示、一键居中显示
  • 支持拖拽画布查看大尺寸动画
• 背景样式：
  • 默认浅色点阵背景
  • 支持透明棋盘格、纯色背景等模式
• 底部控制面板：
  • 模块切换（SVGA / 双通道 MP4 / Lottie）
  • 文件信息展示（名称、尺寸、时长、帧率等）
  • 播放 / 静音 / 缩放 / 导出 / 转换等操作按钮
• 侧边功能面板：
  • 素材图替换面板
  • SVGA → MP4 转换配置面板
  • 双通道 MP4 → SVGA 转换配置面板
  • GIF 导出配置面板
  • 序列帧导出配置面板
  • WebP 导出配置面板
  • 右侧面板互斥显示，点击同一按钮可开/关
• 主题与帮助：
  • 顶部导航支持暗黑 / 亮色主题切换
  • Help 按钮点击弹出浮层，居中显示（宽度 70%）
  • 帮助文档重构为五大板块：快捷操作、格式转换、格式支持情况、特色功能、使用注意
  • 遮罩层和关闭按钮，提升用户体验
  • 补充 SVGA 导出序列帧/WebP、MP4 绿幕抠图、多段变速等功能说明
• 用户登录：
  • 顶部导航支持用户登录功能
  • 与 www.imghlp.com 实现跨域登录集成
  • 登录状态管理和下拉菜单
  • 支持退出登录功能

---

技术栈

• 前端框架：Vue 2.7.15
• 构建工具：Vite 5.0.0
• 开发语言：JavaScript
• 样式管理：原生 CSS
• 核心库：
  • svgaplayerweb：SVGA 动画解析与播放
  • lottie-web：Lottie 动画渲染
  • konva：Canvas 操作和图形处理，用于素材编辑器（Transformer、拖拽缩放、图层管理）
  • gif.js：GIF 编码
  • webpxmux.js：WebP 动画编码/解码
  • @ffmpeg/ffmpeg：浏览器端视频编码
  • jszip：ZIP 文件处理
  • pako：压缩库
  • protobufjs：Protocol Buffers 解析
• 构建优化：
  • Terser：JavaScript 压缩
  • clean-css：CSS 压缩
  • 多页应用配置

---

技术特点

• 架构：

  • 纯前端实现，基于 Vue 2
  • 单页应用结构，核心逻辑集中在 src/assets/js/core/app.js
  • 采用 Vite 作为构建工具，优化开发体验和构建性能

• 构建系统：

  • 使用 Vite 5 进行项目构建和开发服务器
  • 支持代码压缩（Terser）和 CSS 压缩（clean-css）
  • 多页应用配置，支持主页面和小工具页面

• 核心依赖：

  • svgaplayerweb：SVGA 动画解析与播放
  • gif.js：GIF 编码（配合 gif.worker.js Web Worker）
  • webpxmux.js：WebP 动画编码/解码（无损 WebP）
  • @ffmpeg/ffmpeg（ffmpeg.wasm）：在浏览器中进行 MP4 编码
  • lottie-web：Lottie 动画渲染
  • konva：Canvas 操作和图形处理
  • jszip：ZIP 文件处理
  • pako：压缩库
  • protobufjs：Protocol Buffers 解析
  • howler：音频处理库
  • html2canvas：HTML 转 Canvas 库

• 运行方式：

  • 所有计算和文件处理均在浏览器本地完成，不上传到服务器
  • 适合对隐私与素材安全有要求的设计与开发场景

• 性能优化：

  • 双通道MP4转SVGA：使用FFmpeg批量提取帧，替代逐帧跳转等待，显著提升提取速度
  • Web Workers：使用Web Workers进行并行处理，避免阻塞主线程
  • 内存优化：使用OffscreenCanvas减少DOM开销，优化内存使用
  • 批处理策略：每处理10帧让出一次UI线程，改善UI流畅度
  • 库加载优化：打开转SVGA弹窗时插队加载FFmpeg，提高响应速度
  • 帧捕获服务：新增 FrameCaptureService，统一处理动画帧的跳转、等待、捕获逻辑，提供流式回调接口，支持 WebP/GIF/序列帧导出，解决渲染延迟和内存占用问题
  • 错误处理：固定使用FFmpeg核心路径，移除备用方案，添加详细的调试日志，方便错误检查

---

状态与规划概览

• 阶段1：基础预览功能 —— 已完成
• 阶段2：SVGA 高级功能（素材替换 / GIF 导出 / 转双通道 MP4） —— 已完成
• 阶段3：双通道 MP4 与 Lottie 模块 —— 双通道 MP4 已完成，Lottie 模块进行中
• 阶段4：代码质量与结构优化 —— 已完成
• 阶段5：普通MP4模式与导出功能增强 —— 已完成
• 阶段6：代码模块化与广告系统 —— 已完成
• 阶段7：SVGA播放器重构与音频同步修复 —— 已完成
• 阶段8：沉浸模式 —— 已完成
• 阶段9：SVGA素材压缩与导出优化 —— 已完成
• 阶段10：变速编辑器（K帧时间轴） —— 已完成
• 阶段11：代码模块化第二阶段 —— 已完成
• 阶段12：核心重构与稳定性优化 —— 已完成
  • 模式策略表：重构 switchMode，使用配置映射表 (modeStrategies) 替代硬编码 if-else，提升可维护性。
  • 资源管理器：引入 ResourceManager，统一接管 ObjectURL 生命周期，按组自动追踪与释放，彻底解决内存泄漏与时序问题。
  • 音频稳定性：修复 GlobalAudioManager 初始化竞态条件，确保在快速操作下音频控制（静音/暂停）依然可靠。
• 阶段 13：构建系统优化 —— 已完成
  • Vite 构建化：引入 Vite 5 作为构建工具，优化开发体验和构建性能
  • 多页应用配置：支持主页面和小工具页面的构建
  • 代码压缩：集成 Terser 和 clean-css 进行代码和 CSS 压缩
  • 静态资源管理：优化静态资源的复制和压缩流程
• 阶段 14：通用定时器服务 —— 已完成
  • TimerService 实现：统一管理所有定时任务，支持延迟/周期/轮询/重试等模式
  • 全局替换：替换 9 处 setTimeout/setInterval 为 TimerService
  • 分组管理：提供定时器分组、取消、统计等功能
  • 内存优化：自动清理已完成的定时器，避免内存泄漏
• 阶段 15：用户体验优化 —— 已完成
  • 空状态标题优化：修复定时器自杀问题，点击重置倒计时
  • Computed 属性修复：修复 TimerService 回调中 computed 属性的访问方式
  • 调试代码清理：删除冗余 console.log，优化代码可读性
• 阶段 16：素材编辑器服务化 —— 已完成
  • 服务层抽象：将素材编辑功能抽象为独立服务（TextRenderer、ImageTransformer、MaterialComposer）
  • 统一入口：创建 MaterialEditorService 作为编辑器服务主类
  • UI 组件化：创建 MaterialEditorUI 可复用弹窗组件
  • 代码复用：支持 SVGA、YYEVA 等多页面调用编辑能力
  • 兼容性保证：现有 SVGA 素材编辑功能完全兼容，用户无感知

详细路线图与技术细节见仓库中的 ROADMAP.md、TECH-RESEARCH.md。