🎬 ComfyUI AE Animation
🎥 演示视频
点击上方按钮或 直接观看视频
⚠️ 预览版说明：本项目目前为预览版本，功能正在持续开发中。后续会持续增加新功能和优化体验，欢迎反馈和建议！
🙏 特别鸣谢
特别感谢 Terry Jia (jtydhr88) 在项目开发过程中给予的宝贵帮助和关键思路指导！
📝 更新日志
Vue 完全重构（最新）
- ✅ 前端架构重构：使用 Vue 3 Composition API 完全重写前端界面
- ✅ UI/UX 优化：全新的现代化界面设计，提升用户体验和交互流畅度
- ✅ 组件化开发：采用组件化架构，提高代码可维护性和可扩展性
- ✅ 性能优化：优化渲染性能，提升交互响应速度
- ✅ 代码结构：重构代码结构，提高开发效率和代码质量
📋 项目简介
ComfyUI AE Animation 是一个单节点版的 After Effects 风格时间轴编辑器，为 ComfyUI 提供强大的动画制作能力。
✨ 核心功能
- 🎨 多图层管理：支持前景/背景图层管理，灵活组织动画元素
- 🎯 关键帧动画：位置、缩放、旋转、透明度等属性关键帧动画
- 🖌️ Mask 编辑：画笔工具创建自定义遮罩，精确控制图层显示区域
- 📍 路径动画：贝塞尔路径工具创建平滑的运动轨迹
- ✂️ AI Extract：智能背景提取，自动创建前景图层
- 🎞️ 实时预览：Canvas 实时渲染预览，所见即所得
- ⚙️ 参数控制：UI 内直接调整分辨率、FPS、总帧数等项目参数
🚀 快速开始
安装
方式一：ComfyUI Manager（推荐）
- 打开 ComfyUI Manager
- 在搜索框中输入
ComfyUI-AE-Animation或AE Animation - 点击安装
- 重启 ComfyUI
方式二：Git Clone
cd ComfyUI/custom_nodes
git clone https://github.com/wallen0322/ComfyUI-AE-Animation.git
# 重启 ComfyUI
首次使用
-
启动节点
- 重启 ComfyUI 后，右上角会出现 AE Timeline 按钮
- 点击按钮会自动创建并选中
AE Animation节点，并打开时间轴 UI - 或者直接在节点面板添加
AE Animation节点，然后点击按钮打开 UI
-
设置项目参数
- 在 UI 顶部直接输入 Width、Height、FPS、Frames
- 点击 Save 按钮将参数同步回节点 widgets
- 建议分辨率：1920×1080、1280×720 等标准尺寸
-
添加图层
- 点击 +FG 添加前景图层（通过文件选择器选择本地图片）
- 点击 +BG 添加背景图层
- 或者通过节点输入端连接图像（自动识别为图层）
-
开始创作
- 选择图层，调整 X、Y、Scale、Rotation、Opacity 等属性
- 在时间轴上添加关键帧，创建动画
- 使用工具进行 Mask、路径、Extract 等操作
📖 详细使用说明
🎛️ 界面布局
顶部工具栏
-
项目操作区（左侧）
Save Proj：保存工程文件（JSON 格式），包含所有图层、关键帧、Mask 等数据Load Proj：加载之前保存的工程文件Clear Cache：清理未使用图层的图片缓存，释放内存
-
运行控制区（中间）
Refresh：刷新界面▶ Run Node：运行节点，生成动画序列保存到节点：将当前设置保存到节点 widgets
-
图层操作区（右侧）
+FG：添加前景图层+BG：添加背景图层✕：关闭时间轴 UI
左侧属性面板（Inspector）
图层信息卡片
- 显示当前选中图层的名称和类型（FG/BG）
- 显示图层资源状态（Image Asset / Empty Asset）
变换属性（Transform）
- X / Y：图层位置坐标（相对于画布中心）
- Scale：缩放比例（1.0 = 100%，可调整到 0.1~10.0）
- Rotate：旋转角度（0~360 度）
- Opacity：透明度滑块（0~100%）
工具区（Tools）
- Mask：启用 Mask 画笔模式，在画布上涂抹创建遮罩
- Erase：启用擦除模式，擦除 Mask 区域
- Path：创建贝塞尔路径，生成路径动画
- Extract：背景提取工具，从背景中提取区域创建新前景层
画笔设置
- Mask Brush：Mask 画笔大小（1~100px）
- Extract Brush：Extract 画笔大小（1~100px）
应用/清除
Apply：应用当前工具的效果Clear：清除当前工具的效果
中间画布区域（Viewport）
顶部工具栏
- 显示项目信息：
宽度×高度 @ 帧率fps - 画布适配模式：
Fit：保持宽高比，完整显示（可能有黑边）Fill：保持宽高比，填充画布（可能裁切）Stretch：拉伸填充（可能变形）
- 显示总时长：
Duration 00:00:XX
画布区域
- 实时预览当前时间点的画面
- 支持鼠标拖拽移动图层
- 支持滚轮缩放图层
- 显示网格背景，方便对齐
底部时间轴（Timeline）
顶部控制栏
-
关键帧操作（左侧）
+ Key：在当前时间点添加关键帧Del Key：删除当前时间点的关键帧Clear All：清除当前图层所有关键帧
-
播放控制（中间）
- 时间显示：
00:00:XX（当前播放时间） ⏮：跳转到开始（时间 = 0）▶ / ❚❚：播放/暂停（空格键快捷键）- 时间滑块：拖拽调整当前时间
- 时间显示：
-
缩放控制（右侧）
Zoom：时间轴缩放滑块，调整时间轴显示范围
图层列表（左侧）
- 显示所有图层，按顺序排列
- 点击图层名称选中图层
▸ / ▾：展开/折叠图层详细信息👁：显示/隐藏图层🔒：锁定/解锁图层- 图层类型标识：
B（Background）或F（Foreground）
时间轨道（右侧）
- 显示时间标尺（0s, 1s, 2s...）
- 每个图层对应一条轨道
- 轨道上的彩色条表示图层在时间轴上的存在范围
- 关键帧标记：
◆菱形标记表示关键帧位置 - 播放头：红色竖线表示当前播放时间
🎨 详细操作指南
1. 图层管理
添加图层
- 点击顶部
+FG或+BG按钮 - 在文件选择器中选择图片文件
- 图片会自动压缩到项目分辨率，优化性能
选择图层
- 在时间轴左侧图层列表中点击图层名称
- 或使用下拉菜单选择图层
- 选中后，左侧属性面板会显示该图层的属性
调整图层属性
- 在左侧属性面板的 Transform 区域直接输入数值
- 或在画布上直接拖拽图层（调整 X、Y）
- 使用滚轮缩放图层（调整 Scale）
图层排序
- 在时间轴图层列表中使用
▲/▼按钮调整图层顺序 - 图层顺序影响渲染顺序（上层覆盖下层）
删除图层
- 在图层列表中点击删除按钮（如果可用）
- 或通过节点输入端断开连接
2. 关键帧动画
添加关键帧
- 在时间轴上拖拽播放头到目标时间点
- 选择要动画的图层
- 调整图层属性（X、Y、Scale、Rotate、Opacity）
- 点击
+ Key按钮添加关键帧 - 重复步骤 1-4，在不同时间点添加关键帧
编辑关键帧
- 点击时间轴上的关键帧标记（◆）选中关键帧
- 调整图层属性，关键帧会自动更新
- 或直接拖拽关键帧标记调整时间位置
删除关键帧
- 点击时间轴上的关键帧标记
- 点击
Del Key按钮删除 - 或点击
Clear All清除所有关键帧
播放预览
- 点击
▶按钮开始播放 - 点击
❚❚暂停播放 - 使用空格键快速播放/暂停
- 拖拽时间滑块手动调整时间
3. Mask 遮罩功能
创建 Mask
- 选择前景图层
- 点击
Mask工具按钮 - 调整
Mask Brush画笔大小 - 在画布上涂抹要遮罩的区域
- 白色区域：不透明（显示）
- 黑色区域：透明（隐藏）
- 点击
Apply应用 Mask
编辑 Mask
- 继续涂抹添加遮罩区域
- 按住
Shift键或右键擦除遮罩区域 - 调整画笔大小适应不同区域
清除 Mask
- 点击
Clear按钮清除当前图层的 Mask
4. 路径动画
创建路径
- 选择要动画的图层
- 点击
Path工具按钮 - 在画布上依次点击 4 个点：
- 起点
- 控制点 1
- 控制点 2
- 终点
- 拖动控制点调整路径形状
- 点击
Apply生成路径关键帧动画
编辑路径
- 拖动路径上的控制点调整形状
- 路径会自动更新关键帧
5. Extract 背景提取
提取背景区域
- 确保已加载背景图层
- 点击
Extract工具按钮 - 调整
Extract Brush画笔大小 - 在背景上涂抹要提取的区域
- 按住
Shift键或右键擦除错误涂抹
- 按住
- 点击
Apply应用提取
提取效果
- 背景的选中区域会自动应用模糊效果
- 选中的内容会创建为新的前景图层（命名为
extracted_X） - 新图层可以独立调整位置、缩放、旋转等属性
- 可以添加关键帧实现动画效果
- 支持多次提取创建多个图层
应用场景
- 人物抠图后对原背景进行背景虚化
- 提取背景的某个元素单独动画
- 创建景深效果（前景清晰，背景模糊）
6. 画布操作
缩放画布
- 使用右上角的
Zoom滑块（25%~200%） - 适合处理竖屏分辨率，避免裁切
适配模式
Fit：保持宽高比，完整显示（推荐用于预览）Fill：保持宽高比，填充画布（推荐用于导出）Stretch：拉伸填充（可能变形，不推荐）
拖拽图层
- 在画布上直接拖拽图层调整位置
- 实时更新 X、Y 属性值
缩放图层
- 使用鼠标滚轮缩放图层
- 实时更新 Scale 属性值
🔧 节点说明
AE Animation 节点
输入参数（可在 UI 顶部调节，同步回节点）
width：项目宽度（像素）height：项目高度（像素）fps：帧率（1~120）total_frames：总帧数
隐藏参数（UI 内部使用，保留但不显示）
mask_expansion：Mask 扩展/收缩（-10~10）mask_feather：Mask 羽化（0~20）layers_keyframes：图层和关键帧数据（JSON）start_frame：开始帧end_frame：结束帧
输入连接
background_image：背景图片（可选）foreground_images：前景图片（可选，支持批量输入）
输出
frames：渲染的图像序列（IMAGE 类型）mask_frames：前景遮罩序列（MASK 类型）
💾 数据管理
保存工程
- 点击
Save Proj按钮 - 选择保存位置，输入文件名
- 工程文件包含：
- 所有图层信息（名称、类型、属性）
- 所有关键帧数据
- Mask 数据
- 路径数据
- Extract 图层数据
- 项目参数（分辨率、FPS、总帧数）
加载工程
- 点击
Load Proj按钮 - 选择之前保存的工程文件
- 所有数据会自动恢复
保存到节点
- 点击
保存到节点按钮 - 当前设置会写回节点 widgets
- 工作流保存后，重新加载会恢复节点状态
⚡ 性能优化
自动优化
- 图片压缩：导入的图片自动压缩到项目分辨率
- 懒加载：图片按需加载，避免浏览器崩溃
- 预览限制：预览画布最大 1920×1080，大分辨率项目保持流畅
手动优化
- 清理缓存：点击
Clear Cache释放未使用图层的图片内存 - 减少图层数量：删除不需要的图层
- 降低预览分辨率：在 UI 中设置较小的分辨率进行预览
⌨️ 快捷键
- 空格键：播放/暂停动画
- 鼠标左键拖拽：移动图层位置
- 鼠标滚轮：缩放图层
- Shift + 鼠标左键：擦除 Mask/Extract 区域
- 鼠标右键：擦除 Mask/Extract 区域
🐛 已知问题与注意事项
注意事项
- 项目尺寸：建议在 UI 内调整分辨率，预览限制 1920×1080，导出使用实际分辨率
- 图层数量：前景图层数量 = 节点输入的前景图片 + Extract 创建的图层 + 本地导入图层
- Mask 分辨率：Mask 会自动缩放到图层原始尺寸
- Extract 图层：创建后会自动缩放到项目尺寸，scale=1 即为全屏显示
- 内存管理：大量图层时使用清理缓存功能释放内存
- 外部图层：通过节点输入口连接的 foreground_images 会自动显示在 UI 中
预览版限制
- 部分功能可能仍在开发中
- UI 和交互可能会持续优化
- 性能优化会持续改进
- 欢迎反馈问题和建议
🛠️ 开发/构建
前端开发
前端位于 frontend/ 目录，使用 Vue 3 + Vite 构建：
cd frontend
npm install
npm run dev # 开发模式
npm run build # 构建生产版本
构建产物输出到 js/vue-dist/ 目录。
项目结构
ComfyUI-AE-Animation/
├── frontend/ # Vue 3 前端源码
│ ├── src/
│ │ ├── TimelineApp.vue # 主应用组件
│ │ └── components/ # 子组件
│ └── package.json
├── js/
│ └── vue-dist/ # 构建产物（已编译）
├── ae_animation_core.py # 核心节点逻辑
└── __init__.py # ComfyUI 节点注册
静态目录 WEB_DIRECTORY=./js，前端脚本/样式通过 /extensions/ComfyUI-AE-Animation/vue-dist/... 提供。
📄 许可证
Apache License 2.0
👤 作者
wallen0322
🤝 贡献
欢迎提交 Issue 和 Pull Request！
享受动效创作的乐趣！ 🎬✨