ComfyUI-VideoTransition

★ 26

视频转场Chromium无头浏览器Python插件动态效果

使用Chromium无头浏览器与Python实现的视频转场效果插件，用于生成可定制、可编程的高质量动态过渡，便于在ComfyUI中集成视频转场。

💡 在视频剪辑或合成中快速添加可编程的高质量转场效果。

🍴 2 Forks💻 Python🔄 2025-10-27

🔗 GitHub 原文

📦

网盘下载

复制链接后前往夸克网盘下载

https://pan.quark.cn/s/a9fb3a59e10c

📦 requirements.txt

playwright>=1.40.0
Pillow>=10.0.0
torch>=2.0.0
numpy>=1.24.0

📄 README

ComfyUI-VideoTransition

基于 Chromium 无头浏览器和python实现的视频转场效果插件

通过 Playwright 驱动 Chromium 浏览器在无头模式下运行，利用现代 Web 技术（HTML5/CSS3/Canvas）渲染视频转场效果。

工作流一键体验地址

One-click run free trial address:

https://www.runninghub.ai/post/1978329229374939138/?inviteCode=rh-v1091

目前实现的转场效果还不多，后续会更新，有兴趣的也可以研究

✨ 核心特点

🌐 浏览器引擎渲染 – Chromium 引擎驱动，充分利用 GPU 硬件加速

🎨 Web 技术栈 – 使用 HTML5/CSS3/JavaScript 实现复杂动画效果

🐍 纯 Python 控制 – 无需 Node.js，通过 Playwright 自动化框架控制浏览器

⚡ 高性能渲染 – 批处理优化，内存占用低，渲染速度快

🔧 稳定可靠 – Microsoft Playwright + Google Chromium，跨平台支持

https://github.com/user-attachments/assets/903b204f-7385-4bb1-a87e-095365724cdd

📦 安装

1. 安装依赖

cd custom_nodes/ComfyUI-VideoTransition
pip install -r requirements.txt

2. 安装 Chromium 浏览器

Windows:

playwright install chromium

Linux:


playwright install chromium

🎬 转场效果

本插件采用混合技术架构，根据效果复杂度选择最佳实现方案：

🌐 Chromium 引擎渲染（复杂 3D 效果）

1. 立方体转场 ⭐

技术：CSS 3D Transform + GPU 加速

效果：水平/垂直立方体旋转

优势：真实 3D 透视，硬件加速渲染

参数：旋转角度、立方体大小、透视强度

2. 百叶窗转场

技术：CSS 3D Transform + 分段动画

效果：水平/垂直/对角百叶窗切换

优势：真实百叶窗物理效果

参数：百叶窗数量、旋转角度、延迟时间

3. 棋盘格转场

技术：CSS Grid + 背景切割

效果：棋盘格方块逐个切换

优势：精确图像切割，无重复

参数：网格大小、动画延迟、缓动函数

4. 爆炸转场 ⭐

技术：CSS Transform + 物理模拟

效果：视频碎片四散爆炸

优势：多种爆炸模式，真实物理运动

参数：碎片数量、爆炸强度、重力效果

5. 抖动转场

技术：CSS Transform + 多轴震动

效果：随机/水平/垂直/旋转/缩放抖动

优势：仿剪映效果，双层抖动

参数：抖动强度、频率、混合模式

6. 故障艺术转场 🔥

技术：WebGL + 赛博朋克特效

效果：信号干扰/数据混合/像素排序/矩阵雨

优势：纯闪烁切换，密集细线矩阵

参数：故障强度、损坏率、噪声量

7. 故障艺术增强版 💀

技术：WebGL + 高级故障特效

效果：压缩噩梦/量子衰变/神经崩塌/数字崩溃

优势：极致故障美学，AI 风格特效

参数：视觉强度、故障类型、混沌程度

⚡ 纯 Python 实现（高性能）

8. 立方体旋转展示

技术：WebGL 3D 渲染

效果：多视频立方体旋转动画

优势：支持多面体、自由旋转

9. 视频叠化转场

技术：NumPy 数组混合 + OpenCV

效果：直接叠化、闪黑、闪白、叠加溶解、色散叠化

优势：速度快、内存占用低

参数：支持自定义颜色

10. 3D 翻转转场

技术：批处理优化 + 透视变换

效果：水平/垂直/斜向翻转

优势：纯 Python 实现真实 3D 效果

11. 扭曲转场

技术：OpenCV remap 像素位移

效果：旋涡、水平/垂直挤压、液体、波浪

优势：真实像素级扭曲效果

参数：扭曲强度、速度、缩放

12. 翻页转场

技术：批处理优化 + 物理模拟

效果：模拟真实书页翻动

优势：逼真物理效果，多方向翻页

13. 眨眼转场 ⭐

技术：NumPy 遮罩 + cv2 高斯模糊

效果：弧形眼睑模拟眨眼

优势：性能提升 50%+，内存降低 60%+

参数：眨眼速度、模糊强度、眼睑弧度

📊 技术选型说明

| 实现方式 | 适用场景 | 性能 | 优势 |

|———|———|—–|—–|

🚀 使用方法

在 ComfyUI 中找到 VideoTransition 分类

选择需要的转场效果节点

连接输入图片/视频

调整参数

运行工作流

💡 技术优势

混合技术架构 – 最佳方案选择

🎯 设计理念： 根据效果复杂度和性能需求，智能选择实现方式

🌐 Chromium 引擎（用于复杂 3D 效果）

✅ CSS3 3D 变换 – 复杂立体效果轻松实现

✅ GPU 硬件加速 – 自动利用显卡渲染

✅ 开发效率高 – HTML/CSS 代码，所见即所得

✅ 跨平台一致 – 统一的 Chromium 引擎

适用场景： 立方体旋转等复杂 3D 透视效果

⚡ 纯 Python（用于高性能需求）

✅ 性能极致 – 速度快 50%+，内存低 60%+

✅ 稳定可靠 – 无浏览器依赖，兼容性好

✅ 精确控制 – 像素级处理，效果可控

✅ 资源占用低 – 适合批量处理

适用场景： 叠化、翻页、扭曲等 2D/简单效果

技术架构对比

WebGL 方案: Python → Playwright → Chromium → WebGL/Three.js → 视频帧
Chromium 方案: Python → Playwright → Chromium → CSS3 → 视频帧
纯 Python 方案: Python → NumPy/OpenCV → 视频帧

💡 优势： 三层技术栈覆盖所有效果需求，从简单到电影级

扩展潜力：

Playwright 支持驱动三大浏览器引擎：

Chromium – 当前使用，最快最稳定 ⭐

Firefox – Mozilla 引擎，不同渲染特性

WebKit – Safari 引擎，苹果生态

💡 未来可能扩展：选择不同浏览器引擎以获得特定渲染效果或兼容性

✅ Playwright + Chromium 可以使用的高级技术

WebGL / WebGL 2.0 – GPU 加速的 3D 渲染

Three.js / Babylon.js – 完整的 3D 引擎库

GLSL Shader – 自定义着色器特效

WebAssembly – 高性能计算

物理引擎 – 真实物理模拟

🎬 可以实现的效果

⭐ 粒子爆炸/飞散

⭐ 流体/液体模拟

⭐ 光线追踪/光影效果

⭐ 3D 场景转换

⭐ 电影级后处理（景深、辉光、色差）

⭐ 着色器特效（故障艺术、液体金属）

⚠️ 常见问题

Q: 安装失败？

A: 使用镜像：playwright install chromium --mirror=https://registry.npmmirror.com

Q: 渲染慢？

A: 降低 fps 或分辨率，减少 duration

Q: 内存占用高？

A: 确保使用 with 语句关闭渲染器

📄 许可证

Apache-2.0 license

关于我 | About me

Bilibili：我的B站主页

QQ号：3260561522

wechat微信: DLONG189one