oil-oil/oil-motion

是什么

Oil Motion 是一个可复用的 Skill，专为 AI 代理设计，用于自动化创建交互式网页动画。该代理接收一个设计简报（要展示的内容、可用的资产，以及由哪种用户交互——滚动、鼠标、触摸、设备倾斜——驱动动画），并执行三步流程：

1. 定义关键帧 – 代理生成少数关键图像（例如，产品整体、爆炸视图、最终状态），并检查主体、风格和构图的一致性。
2. 生成中间动画 – AI 视频模型创建一段连续的视频片段，平滑地在关键帧之间过渡。
3. 为网页进行后期处理 – 视频被裁剪、去重、压缩，并根据大小、透明度需求和设备限制，重新打包为 MP4 或带透明通道的 WebP 精灵图。 生成的资源可直接嵌入页面，使滚动、鼠标移动、拖拽、触摸或设备方向映射到动画进度。

---

谁会用到它

• 希望无需手工制作数千帧即可获得高质量 AI 生成的产品演示、角色互动或数据驱动过渡的前端开发者。
• 拥有概念图或产品照片，需要快速实现“滚动揭示”或“鼠标跟随”动画的设计师。
• 正在构建 AI 驱动助手的团队，希望该助手能 安装 此技能，并按需创建特定动画。

---

核心概念

概念	含义
Skill	AI 代理可安装的插件（npx skills add oil-oil/oil-motion）。代理随后处理所有生成、验证和打包步骤。
关键帧	定义动画起始、重要中间状态和结束的少量保证稳定的图像。
连续运动	AI 视频模型填补关键帧之间的空白，生成平滑的视频片段。
资源形式	根据使用场景，输出为全帧 MP4、绿幕 MP4（用于 WebGL 色度键）或带透明通道的 WebP 精灵图。
控制映射	用户输入（滚动偏移、鼠标 X/Y、触摸拖拽、设备方向）被转换为帧索引或播放速度。

---

如何开始

1. 安装技能 – 告诉你的 AI 助手安装该仓库，或运行：

   npx skills add oil-oil/oil-motion
   

2. 提供提示 – 向代理提供资产和具体请求，例如：

   使用 $oil-motion，将这两张产品图制作成随页面滚动逐步展开的动画。
   桌面端的展示区域较大，需要保持清晰；移动端使用较轻的资源。
   

   或者先让代理设计选项。
3. 代理运行流程 – 生成关键帧，调用选定的 AI 视频服务，清理视频，压缩并生成配置文件 + 可直接嵌入的代码。
4. 插入生成的代码 – 该技能输出一小段 JavaScript 代码，将选定的输入（如 window.scrollY）绑定到动画时间轴。

---

所需条件

• Python（用于与 AI 视频服务通信并运行 FFmpeg 的后端脚本）。
• FFmpeg – 用于裁剪、帧级检查和压缩。
• 所选 AI 视频生成服务的 API 密钥（技能通过 keyring 安全存储）。
• Node.js 22.18+（用于可选的配置 UI）。
• scripts/requirements.txt 中的 Python 依赖项（使用 pip install -r scripts/requirements.txt 安装）。

---

你将获得

• 经验证的关键帧及生成它们的提示。
• 针对目标设备优化的清理后视频或 WebP 精灵图。
• 描述交互映射、资源 URL 和备用静态图像的 JSON/YAML 配置文件。
• 可导入任意网页以驱动动画的微型前端辅助工具。

---

内置质量检查

• 各帧间主体、比例和光照的一致性。
• 去除停顿、重复帧和视觉瑕疵。
• 透明资产的边缘清晰透明通道。
• 性能保障机制——技能会选择满足声明显示尺寸的最小资源。
• 若动画加载失败或用户禁用动画，提供备用静态帧。

---

许可证

MIT – 你可以自由使用、修改并嵌入生成的资产到商业项目中（需遵守底层 AI 视频服务的条款）。