直播间动效GIF生成器

为直播间主播设计的GIF动效生成工具，上传图片素材，选择特效模板，调整参数后一键导出可直接拖入OBS使用的GIF文件。

在线使用

访问 GitHub Pages 地址 即可使用（替换为你的实际地址）。

本地使用

git clone https://github.com/你的用户名/gif-maker.git
cd gif-maker
python3 -m http.server 8080
# 浏览器打开 http://localhost:8080

⚠️ 必须使用 HTTP 服务器打开，不能双击 index.html（file:// 协议会导致 GIF 导出失败）。

使用流程

1. 上传商品图片素材（支持拖拽）
2. 左侧选择特效模板
3. 右侧调整参数（时长、帧率、粒子数量等）
4. 点击「播放」预览效果
5. 点击「导出GIF」下载文件
6. 直接把 GIF 拖入 OBS 使用

特效模板

特效	场景	可调节参数
闪亮登场	上货/新品	粒子数量、光晕强度、放大倍数、背景色
闪烁预警	库存紧张	闪烁速度、抖动幅度、警示文字、背景色
爆炸特效	秒杀/大促	爆炸粒子数、弹跳高度、背景色
数字滚动	价格揭晓	起始数字、目标数字、前缀/后缀文字、背景色

OBS 使用建议

• 画布尺寸：默认 400×400，适合大多数直播间角标/弹窗
• 背景色：默认黑色，OBS 里可用「色度键」滤镜把黑色背景变成透明
• 帧率：默认 15fps，平衡流畅度和文件大小
• 循环：GIF 默认无限循环，适合持续展示

技术栈

• 纯前端实现，无后端依赖
• Canvas 2D 渲染引擎
• gif.js 进行客户端 GIF 编码
• 自定义粒子系统 + 缓动函数库

项目结构

├── index.html          # 主界面
├── css/style.css       # 深色主题界面样式
├── js/effects.js       # 特效引擎 + 粒子系统
├── js/app.js           # 素材管理、参数控制、GIF导出
├── lib/gif.js          # GIF 编码库
├── lib/gif.worker.js   # GIF 编码 Worker
└── package.json        # 启动脚本

开源协议

MIT