[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-94471":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":13,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":14,"stars30d":15,"stars90d":14,"forks30d":14,"starsTrendScore":14,"compositeScore":16,"rankGlobal":9,"rankLanguage":9,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":9,"pushedAt":9,"updatedAt":22,"readmeContent":23,"aiSummary":24,"trendingCount":14,"starSnapshotCount":14,"syncStatus":25,"lastSyncTime":26,"discoverSource":27},94471,"oil-motion","oil-oil\u002Foil-motion","oil-oil","Create smooth, responsive interactive web animations.",null,"Python",1657,126,1,0,1171,64.31,"MIT License",false,"main",true,[],"2026-08-24 04:01:22","\u003Cp align=\"center\">\n  \u003Cimg src=\".\u002Fassets\u002Freadme\u002Fhero.svg\" width=\"100%\" alt=\"Oil Motion 把 AI 生成的连续动作接入网页交互\">\n\u003C\u002Fp>\n\n**English**: [README.en.md](.\u002FREADME.en.md) · **中文**: README.md\n\nOil Motion 是一个 Agent 通用的交互动画 Skill。它负责设计动作、生成连续画面、整理动画资源，并把最终效果接入页面滚动、鼠标、拖动、触摸或设备方向。\n\n使用时只需要说明希望表达什么、提供哪些素材，以及动画应该跟随什么操作。具体的生成、检查、压缩和前端实现由 Agent 完成。\n\n## 演示\n\nhttps:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F08e26ad6-ca23-4f31-ac53-44c7692ba99d\n\n## 安装\n\n告诉 Agent：帮我安装「https:\u002F\u002Fgithub.com\u002Foil-oil\u002Foil-motion」这个 Skill。\n\n## 适合实现的动画\n\n- 页面向下滚动时，产品逐步展开、拆解或切换状态。\n- 鼠标移动时，角色、宠物或产品自然地调整朝向。\n- 拖动进度时，动画跟随手势前进、后退或停在指定位置。\n- 在手机上使用触摸或设备方向控制画面。\n- 点击、悬停或组件状态变化时，播放对应的动作。\n- 没有操作时自然播放，用户开始操作后切换为跟随模式。\n\n这些动画可以用于产品介绍、角色互动、操作演示、数据变化和章节转场。Oil Motion 同时处理动作连贯性、画面清晰度、加载体积和移动端表现。\n\n## 工作原理\n\nAI 生成的视频本身只能从头播放到结尾。为了让它跟随滚动或鼠标变化，Oil Motion 会先生成一段连续动作，再把用户的操作位置对应到动画进度。\n\n例如，一段产品拆解动画共有 100 个画面。页面滚动到 30% 时显示第 30 个画面，滚动到 70% 时显示第 70 个画面。用户反向滚动，动画也会沿着同一组画面自然返回。鼠标、拖动和设备方向使用的是同一种映射方式，只是输入来源不同。\n\n完整过程如下：\n\n```text\n参考素材、表达目的和控制方式\n  ↓\n先确认开始、中间和结束时应该是什么样子\n  ↓\n使用 AI 视频生成这些画面之间的连续动作\n  ↓\n逐帧检查，删除停顿、重复和异常画面\n  ↓\n按照页面中的实际显示大小整理并压缩资源\n  ↓\n把滚动、鼠标、拖动、触摸或设备方向对应到动画进度\n```\n\n这套流程分成三个部分。\n\n### 先确认关键画面\n\n关键画面是动作过程中必须保持准确的几个状态，例如产品完整、零件展开和最终拆解。Agent 会先生成并检查这些画面，确认主体身份、结构、Logo、构图和风格没有变化。\n\n如果直接生成整段视频，模型可能在过程中改变产品结构、角色比例或动作终点。先确认关键画面，可以让连续动作有明确的起点、过程和终点。\n\n### 再生成连续动作\n\n关键画面确认后，AI 视频负责生成它们之间的变化。肢体转动、产品变形、材质变化和前后遮挡都在这个阶段完成，因为这些变化只靠前端移动或缩放图片通常不自然。\n\n位移、缩放、裁切、播放速度、跟随阻尼和最大转动速度由程序控制。这些变化不需要交给视频模型重新生成，程序处理会更稳定，也方便后续调整。\n\n### 最后转换成可控制的网页资源\n\n生成的视频需要经过整理才能用于交互。Agent 会检查每个画面，裁掉开头和结尾的停顿，删除近似重复画面，找出闪烁或结构变化，并根据页面中的实际显示大小进行压缩。\n\n处理完成后，浏览器不会在用户操作时重新生成视频，而是在已经准备好的连续画面中定位。这样可以让动画及时响应输入，也能避免每次交互出现不同结果。\n\n## 资源形式\n\n所有动画都从绿幕母版开始，页面背景独立。Agent 会根据画面大小、动画长度、访问方式和设备预算自动选择资源形式，不要求使用者理解或决定技术方案。\n\n| 使用情况 | 常用形式 | 原因 |\n| --- | --- | --- |\n| 小型、环形、二维或频繁跳转 | Alpha WebP 图集 | 构建时完成抠色，随机访问响应稳定 |\n| 大尺寸、长时间轴、一维滚动 | 绿幕全关键帧 MP4 | WebGL 实时抠色，压缩率高，避免大型图集占用大量内存 |\n\nAgent 会先运行预算脚本并直接采用最合适的一种主方案，不会把图集与视频选择交给使用者，也不会重复实现两套。无论选择哪种，最终背景都由页面提供，换背景不用重新生成主体。\n\n压缩会依据页面中的实际显示尺寸进行。展示区域较大时保留更高分辨率；展示区域较小时减少不必要的数据。文件大小和清晰度发生冲突时，优先保证页面中的实际观感。\n\n## 快速开始\n\n已经有素材和动作方向时，可以直接说明：\n\n```text\n使用 $oil-motion，把这两张产品图制作成随页面滚动逐步展开的动画。\n桌面端的展示区域较大，需要保持清晰；移动端使用较轻的资源。\n```\n\n只有产品素材，还没有动作方案时，可以让 Agent 先完成设计：\n\n```text\n使用 $oil-motion，为这个产品首页设计一个随滚动变化的连续动画。\n先提供三个方向，分别说明它们表达什么、如何跟随滚动，以及实现成本。\n确认方向以后再生成关键画面和视频。\n```\n\n角色或宠物需要跟随鼠标时，可以说明运动范围和期望感受：\n\n```text\n使用 $oil-motion，让这个角色跟随鼠标调整朝向。\n动作需要及时响应，同时限制转动速度，快速反向时不能闪烁或抽动。\n```\n\n## Agent 会判断什么\n\n在开始制作前，Agent 会确认以下内容：\n\n- 动画要表达的内容，以及它在页面中的作用。\n- 主体的身份、结构、比例和不能改变的部分。\n- 动画由滚动、鼠标、拖动、触摸还是其他状态控制。\n- 动作是一条前后变化的路径，还是需要同时响应水平和垂直方向。\n- 页面中的实际显示大小，以及桌面端和移动端是否需要不同资源。\n- 动画尚未加载、加载失败或用户关闭动态效果时显示什么。\n\n如果鼠标的水平位置和垂直位置都会改变主体姿态，就需要准备二维方向的画面。只使用一段左右往返的视频，无法准确表达上下和远近变化。\n\n## 交付内容\n\n根据项目需要，Agent 会交付其中一部分或全部内容：\n\n- 已确认的关键画面和生成提示词。\n- 可以继续处理的原始视频。\n- 删除停顿、重复和异常画面后的动画资源。\n- 适合桌面端与移动端加载的图集或视频。\n- 可以直接接入项目的交互代码。\n- 展示完整画面、当前帧和交互输入的原理预览页。\n- 动画资源、交互范围和加载方式的配置文件。\n\n这些文件会保留生成、处理和验收所需的信息，方便后续修改动作、替换画面或调整交互参数。\n\n## 质量检查\n\n交付前需要检查：\n\n- 主体身份、产品结构、比例、位置和光线在连续画面中保持一致。\n- 没有多余肢体、部件复制、硬切、闪帧和异常停顿。\n- 透明素材的边缘干净，内部白色区域和细线没有被误删。\n- 快速滚动、快速反向和频繁移动鼠标时，动画不粘滞、不抽动、不越界。\n- 页面滚动、缩放或设备旋转后，输入位置与动画方向仍然对应。\n- 初次加载时有清晰的首帧，资源加载失败时可以回退到静态画面。\n- 最终资源放进真实页面以后仍然清晰，移动端不会因为资源过大而明显卡顿。\n- 用户选择减少动态效果时，页面可以显示静态替代内容。\n\n程序可以处理轻微漂移、颜色差异、重复画面和编码问题，但无法修复错误的动作设计。发现主体结构、肢体关系或动作方向错误时，需要重新调整关键画面或生成视频。\n\n## 第一次生成动画\n\n第一次需要生成动画时，Agent 会引导配置所需的 API Key。密钥只保存在本机，之后会自动读取，不需要重复输入。\n\n## 技术资料\n\n日常使用不需要手动运行脚本。如果需要修改生成参数、资源处理方式或网页运行逻辑，可以继续查看 [`SKILL.md`](.\u002FSKILL.md) 和 [`references\u002F`](.\u002Freferences\u002F)。\n\n## License\n\n[MIT](.\u002FLICENSE)\n","Oil Motion 是一个面向网页交互的 AI 驱动动画生成工具，用于将用户操作（如滚动、鼠标移动、触摸或设备方向）实时映射到高质量连续动作上。其核心功能包括：自动设计关键帧、调用 AI 生成连贯中间帧、逐帧质检与压缩、智能选择 WebP 图集或绿幕 MP4 资源形式，并生成可直接集成的响应式交互代码。技术特点涵盖动作进度精确映射、绿幕背景分离、多端自适应分辨率压缩及运行时零重渲染。适用于产品页滚动拆解、角色跟随交互、数据可视化转场、移动端手势控制等需要自然、流畅、可控动画的前端场景。",2,"2026-08-10 02:30:02","CREATED_QUERY"]