Oil Motion 开源：AI 视频变可交互动画，滚动拖拽鼠标都能直接操控画面

在过去的网页开发中，实现一个"跟随鼠标移动而转动脑袋"的角色动画，往往需要设计师先在 Figma 里逐帧绘制，再由前端工程师把数十张图片拼成雪碧图（Sprite Sheet），最后写一堆 JavaScript 来计算鼠标位置和切换帧号。
整个过程繁琐、痛苦，而且极其不灵活。
AI 视频生成工具虽然能产出惊艳的动画片段，但这些视频通常只能从头播放到结尾，无法与用户的滚动、点击、拖拽等操作产生真正的"双向互动"。
但今天我们要介绍的这个开源项目，完美地解决了这个痛点——它就是Oil Motion，一个 Agent 通用交互动画 Skill。

它的核心理念很简单：让 AI 设计动作、生成连续画面、整理动画资源，并把最终效果无缝接入页面的滚动、鼠标、拖动、触摸甚至设备方向。

项目介绍

Oil Motion是一个开创性的开源项目，它巧妙地将 AI 视频生成能力与前端网页交互相结合。它不只是一个动画工具，而是一套完整的 AI 驱动交互动画工作流。
简单来说，你只需要告诉 Agent：你想要表达什么、提供哪些素材，以及动画应该跟随什么操作。剩下的一切——从动作设计、连续画面生成、资源压缩到前端接入——全部由 Agent 自动完成。

核心亮点

🎯 亮点一：关键画面先行，告别"画面漂移"

AI 视频生成有一个常见的问题——在生成连续动作时，模型可能会"忘记"产品原本的结构。
比如一个手机从完整状态到拆开状态，中间可能突然多出一个零件，或者 Logo 变形。
Oil Motion 提出了一个聪明的解决方案：先生成关键画面，再填充中间过程。
Agent 会先确认动作过程中必须保持准确的几个状态——产品完整、零件展开、最终拆解。这些关键画面经过仔细检查，确保主体身份、结构、Logo 和构图都没有变化。只有关键画面全部确认无误后，才会用 AI 视频生成它们之间的连续变化。
这种"骨架先行"的思路，让 AI 生成的动画有了明确的起点、过程和终点，再也不会出现"画面漂移"或"结构突变"的尴尬。

亮点二：视频变图集，交互跟手零延迟

AI 视频只能顺序播放，但 Oil Motion 通过一套精巧的流水线，把视频转化成了可精确控制的帧序列。
它的工作原理是这样的：假设一段产品拆解动画有 100 个画面，页面滚动到 30% 时显示第 30 个画面，滚动到 70% 时显示第 70 个画面。用户反向滚动，动画也会沿同一组画面自然返回。
更巧妙的是，鼠标移动、拖动进度条、设备倾斜等所有输入方式，最终都映射到同一个"动画进度"参数上。用户感觉是在直接操控动画，而实际上是在定位帧号。
这种方式的好处是：
•即时响应：浏览器不需要在用户操作时重新生成内容，只是在已准备好的画面中定位
•结果稳定：每次交互的结果完全一致，不会出现"每次刷新看到的动画都不一样"
•流畅自然：快速滚动、快速反向时不会有粘滞、抽动或闪烁

亮点三：智能资源格式，自适应加载

不同的动画场景需要不同的资源格式。Oil Motion 会根据画面大小、透明背景、动画长度和控制方式，自动选择最合适的格式。
它提供了四种资源形式：
•WebP 图集：适合透明角色、短动作和需要频繁跳转的场景。所有画面集中在少量文件中，加载高效。
•MP4 视频：适合大尺寸产品动画和页面滚动场景。清晰度高，内存占用比大型图集低。
•分片图集/分段视频：当图集过大或设备性能有限时使用，只加载当前需要的部分。
•多段短动画：适合点击、悬停等少量状态切换，每个状态边界清楚。
压缩时还会根据页面的实际显示尺寸进行优化——展示区域大时保留更高分辨率，展示区域小时减少不必要的数据。在文件大小和清晰度冲突时，优先保证实际观感。

快速上手

如果你已经有了产品素材和明确的动作想法，直接这样说：

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

Agent 会自动完成从关键画面生成到最终接入代码的全过程。

如果你只有产品图，还在纠结用什么动画形式，可以让 Agent 先做方案设计：

使用 $oil-motion，为这个产品首页设计一个随滚动变化的连续动画。
先提供三个方向，分别说明它们表达什么、如何跟随滚动，以及实现成本。
确认方向以后再生成关键画面和视频。

Agent 会给出多个方案供你选择，确认后才开始制作。

角色跟随鼠标

想让角色或宠物更有"生命感"？这样告诉 Agent：

使用 $oil-motion，让这个角色跟随鼠标调整朝向。
动作需要及时响应，同时限制转动速度，快速反向时不能闪烁或抽动。

安装方法

安装 Oil Motion 非常简单，只需要告诉你的 Agent：

帮我安装「https://github.com/oil-oil/oil-motion」这个 Skill。

首次使用时，Agent 会引导你配置 API Key。密钥只保存在本机，之后会自动读取，不需要重复输入。

写在最后

Oil Motion 的价值在于，它把"用 AI 做交互动画"这件事，从一个需要设计+视频+前端三重技能的复杂任务，变成了一个"用自然语言描述需求"的简单操作。
它不是简单地把 AI 视频嵌入网页，而是构建了一套完整的流水线：从关键画面的确认，到连续动作的生成，再到帧序列的处理和交互映射，每一步都有明确的质量控制。
在 AI 生成内容越来越普及的今天，如何让生成的内容真正"活"起来、与用户产生互动，是一个全新的课题。
Oil Motion 给出了一个漂亮的答案：把 AI 的创造力和程序的确定性结合起来，让动画不再是被动观看的素材，而是主动响应的交互元素。
GitHub:https://github.com/oil-oil/oil-motion