oil-motion

一个做网页交互动画的工具，主打让 AI 生成的视频能跟页面滚动、鼠标移动、触摸这些操作联动起来。

Github地址

https://github.com/oil-oil/oil-motion

适合实现的动画

  • 页面向下滚动时，产品逐步展开、拆解或切换状态。
  • 鼠标移动时，角色、宠物或产品自然地调整朝向。
  • 拖动进度时，动画跟随手势前进、后退或停在指定位置。
  • 在手机上使用触摸或设备方向控制画面。
  • 点击、悬停或组件状态变化时，播放对应的动作。
  • 没有操作时自然播放，用户开始操作后切换为跟随模式。

这些动画可以用于产品介绍、角色互动、操作演示、数据变化和章节转场。Oil Motion 同时处理动作连贯性、画面清晰度、加载体积和移动端表现。

工作原理

AI 生成的视频需要先被整理成稳定时间轴，再根据交互目标选择控制方式：输入值可以持续对应动画进度，也可以只触发一段正常播放的转场，或让动画按时间自主播放。滚动、鼠标和状态切换只是输入来源，不直接决定播放方式。

完整过程如下：

1
2
3
4
5
6
7
8
9
10
11
参考素材、表达目的和控制方式
  ↓
先确认开始、中间和结束时应该是什么样子
  ↓
使用 AI 视频生成这些画面之间的连续动作
  ↓
逐帧检查，删除停顿、重复和异常画面
  ↓
按照页面中的实际显示大小整理并压缩资源
  ↓
把滚动、鼠标、拖动、触摸或设备方向对应到动画进度

这套流程分成三个部分。

先确认关键画面

关键画面是动作过程中必须保持准确的几个状态，例如产品完整、零件展开和最终拆解。Agent 会先生成并检查这些画面，确认主体身份、结构、Logo、构图和风格没有变化。

如果直接生成整段视频，模型可能在过程中改变产品结构、角色比例或动作终点。先确认关键画面，可以让连续动作有明确的起点、过程和终点。

再生成连续动作

关键画面确认后，AI 视频负责生成它们之间的变化。肢体转动、产品变形、材质变化和前后遮挡都在这个阶段完成，因为这些变化只靠前端移动或缩放图片通常不自然。

位移、缩放、裁切、播放速度、跟随阻尼和最大转动速度由程序控制。这些变化不需要交给视频模型重新生成，程序处理会更稳定，也方便后续调整。

最后转换成可控制的网页资源

生成的视频需要经过整理才能用于交互。Agent 会检查每个画面，裁掉开头和结尾的停顿，删除近似重复画面，找出闪烁或结构变化，并根据页面中的实际显示大小进行压缩。

处理完成后，浏览器不会在用户操作时重新生成视频，而是在已经准备好的连续画面中定位或播放。这样可以让动画及时响应输入，也能避免每次交互出现不同结果。