Oil Motion三大交付路线全解析烘焙视频、绿幕视频与透明雪碧图如何自动选型【免费下载链接】oil-motion设计并实现随滚动、拖动、指针或状态变化响应的网页动画覆盖素材、时间轴和运行时。项目地址: https://gitcode.com/gh_mirrors/oi/oil-motionOil Motion是一个开源的交互动画 Skill专门把 AI 生成的视频或序列帧变成随滚动、拖动、指针或状态变化响应的网页动画。制作过程中最关键的决策之一就是选择哪种交付路线——是烘焙视频baked-video、透明雪碧图alpha-atlas还是绿幕视频chroma-video。好消息是Oil Motion 通过预算脚本 scripts/motion_budget.py 自动完成选型你不需要在三种格式之间纠结。本文帮你彻底搞懂这套自动选型逻辑。三条路线分别解决什么问题三条路线不是谁更好的关系而是对应三类不同的场景需求路线通俗理解适合场景 烘焙视频baked-video背景直接画进视频里整个画面就是素材场景叙事、镜头运动、环境光和地面接触都很重要️ 透明雪碧图alpha-atlas所有帧抠图后拼成一张 WebP 大图网页随机取帧小型透明主体、环形动画、二维参数或频繁跳转 绿幕视频chroma-video主体在绿幕上生成浏览器用 WebGL 实时抠色大尺寸、长时间轴的一维透明动画如随滚动播放选型的唯一事实源是 references/delivery-selection.md三条路线各自的完整流程分别在 references/baked-video.md、references/alpha-atlas.md 和 references/chroma-video.md。自动选型分三步走Oil Motion 的选型被拆成三个正交问题依次处理互不推断第 1 步背景归谁background_ownervideo背景和主体在同一视频中生成 → 直接锁定 烘焙视频全程不抠色page主体必须透明、要在页面上复用 → 进入第 2 步在透明雪碧图与绿幕视频之间预算。这一步没有默认值合同未锁定时流程会直接暂停不会替你猜。第 2 步跑一次资源预算生成任何素材前用计划帧数、显示尺寸和参数空间运行 scripts/motion_budget.py--strict模式结果保存到build/motion-budget.json。固定决策顺序是background_ownervideo→ 烘焙视频二维参数空间 → 透明雪碧图超预算则降低采样或拆分参数轴离散无序状态 → 每个状态单独预算不硬拼成线性视频随机访问且单图集装得下 → 透明雪碧图一维顺序访问且达到视频帧数门槛 → 绿幕视频图集超出一张纹理的容量 → 绿幕视频。第 3 步时间控制单独定控制器time_control只决定运行时控制器逐帧 scrub / 分段播放 / 自动播放与媒体格式无关。也就是说绿幕视频既可以逐帧拖动也可以按时间正常播放——两件事分开判断。路线一烘焙视频最省心的整体方案 烘焙视频把完整画面主体背景编码成桌面端与移动端两套全关键帧 MP4由 scripts/compile_scroll_video.py 完成插帧、接缝清理、编码并生成build/timeline.json。它的优点是连续性最好、完全没有抠色风险适合镜头穿越产品内部这类一镜到底叙事代价是背景被焊死在视频里页面想换背景就不行了。验收时有条硬门最终页面里不得出现抠色、色键 Shader 或阈值配置。路线二透明雪碧图随机访问最稳️ 透明雪碧图在构建时就完成离线抠色把全部帧打包成一张motion.webp图集加一份 motion-manifest.example.json 风格的清单网页加载后直接取帧响应最快、行为最可预期。但要留意一张纹理装多少帧的物理上限预算脚本按最大 CSS 尺寸 × DPR算出单格最低尺寸再除以 4096 纹理上限得出容量。比如 48 帧、单格 640×640 时4096 纹理只能装 6×636 帧这时脚本会自动改判为绿幕视频而不是偷降清晰度。路线三绿幕视频大尺寸透明动画的解法 当透明主体尺寸大、时间轴长典型如随滚动播放的长动画图集会撑爆内存绿幕视频就是答案母版在均匀色键上生成浏览器用 WebGL 实时生成 Alpha页面拥有最终背景。这条路线复用两个现成实现控制器 assets/interactive-motion.ts 和抠色渲染器 assets/chroma-video-renderer.ts。它有一条抠色硬门——编译后的真实 MP4 解码帧若仍有色块残留、边缘溢色或主体内部误删母版直接拒收且禁止靠扩大阈值掩盖素材缺陷WebGL 失败时会降级为静态 Alpha 图绝不让用户看到绿幕。选型结果长什么样每次预算都会输出一份build/motion-budget.json关键字段delivery.selected唯一主媒体格式三选一不给你两套方案delivery.reasonCodes选择依据方便回看为什么这么选runtime.renderer/runtime.controller对应的渲染器与时间控制器。任何帧数或尺寸调整后都要重新跑预算旧报告自动失效——这是保证自动选型始终可信的关键。一句话速查表你的需求自动结果背景是动画的一部分镜头有运动 烘焙视频小尺寸透明主体、可随机跳转️ 透明雪碧图大尺寸、长滚动轴的透明主体 绿幕视频二维参数横纵都影响姿态️ 透明雪碧图超预算则降采样/拆轴总结Oil Motion 把交付格式选型从经验判断题变成了确定性计算先问背景归属再跑资源预算最后独立确定播放控制器。三条路线各司其职SKILL.md 中还定义了 Pilot 先行、逐段验收的硬门确保自动选出的路线在真实页面上真的跑得动。理解这套逻辑后你就能看懂motion-budget.json里的每个结论并在需求变化时知道该改哪个参数。【免费下载链接】oil-motion设计并实现随滚动、拖动、指针或状态变化响应的网页动画覆盖素材、时间轴和运行时。项目地址: https://gitcode.com/gh_mirrors/oi/oil-motion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考