一条命令生成动画原理展示页Oil Motion的explainer工具完全指南【免费下载链接】oil-motion设计并实现随滚动、拖动、指针或状态变化响应的网页动画覆盖素材、时间轴和运行时。项目地址: https://gitcode.com/gh_mirrors/oi/oil-motionOil Motion 是一个把视频和序列帧变成网页交互动画的工具而它的 explainer动画原理展示页功能可以一条命令生成独立的 HTML 展示页左侧是完整的雪碧图图集右侧是实时动画还能对照播放母版视频。新手无需读懂一行代码就能向别人讲清楚动画到底是怎么动起来的。什么是 explainer 动画原理展示页 做交互动画时经常需要回答一个问题这一张图或一段视频是怎么变成网页上会动的东西的Oil Motion 的 explainer 工具把答案做成了一个页面打开就能看到左侧雪碧图Sprite Atlas完整的图集可以缩放、拖拽当前真正被渲染的那一帧会被高亮框出来右侧实时动画当前播放的帧会实时显示并附上帧号、行列位置和输入映射公式可选母版视频Tab切换后播放 AI 生成的原始视频方便和编译后的网页资产做对比自适应布局桌面端左右 2:1 排列移动端自动变成上下结构图集解码完成后才显示避免首帧闪烁。生成的页面是一个完全独立的 HTML 文件不依赖任何外部服务双击或通过本地服务器打开就能用非常适合写进文档、放进演示或发给评审。一条命令生成展示页核心脚本是 scripts/create_explainer.py它读取通用模板 assets/motion-explainer-template.html把配置注入后输出独立 HTML。最简用法如下python3 $OIL_MOTION/scripts/create_explainer.py \ --title 一张图240 个方向。 \ --manifest final/motion.json \ --atlas-url ../final/motion.webp \ --video-url ../source/master.mp4 \ --driver pointer-angle \ --output motion-explainer.html其中--manifest指向本地图集清单可参考 assets/motion-manifest.example.json里面记录了帧数、行列和单元格尺寸脚本会自动读取。如果没有 manifest也可以直接手写网格参数python3 $OIL_MOTION/scripts/create_explainer.py \ --atlas-url ./motion.webp \ --frames 96 --columns 12 --rows 8 \ --cell-width 320 --cell-height 320 \ --driver scroll --scroll-pages 4 \ --output scroll-explainer.html几个新手最容易踩的注意点要点说明URL 基准图集和视频的 URL 都以输出 HTML 所在目录为基准别写错相对路径防覆盖输出文件已存在时脚本默认停止确认后才加--force帧数校验列 × 行必须 ≥ 帧数否则脚本会直接报错退出五种驱动方式选对你的交互通过--driver参数同一个图集可以配成完全不同的操作方式驱动方式输入来源适合的场景pointer-angle指针相对主体的方向环形方向、朝向、旋钮pointer-x指针在预览区的横向位置线性姿态、前后对比drag横向拖拽距离可抓取产品、逐帧检查scroll页面滚动进度章节转场、产品拆解、一镜到底autoplay⏯️时间待机、循环动作、无需操作的展示其中pointer-angle是环形模式——方向首尾相连、走最短环形距离转一整圈不会跳帧其余方式默认是有起止点的线性序列。autoplay模式还可以用--autoplay-mode指定loop循环、pingpong往返或once只播一次配合--autoplay-fps控制播放速度。滚动模式先算预算再动手 如果用scroll驱动生成前建议先跑一遍预算检查并传--scroll-pages指定滚动几屏。预算默认要求每屏至少 24 帧——帧数不够时长滚动会出现明显的换帧阶梯这不是调小smooth-time就能掩盖的。预算决策详见 references/delivery-selection.md。生成之后7 步验收清单页面生成了不代表万事大吉。references/explainer.md 里给了一份很实用的验收清单通过本地 HTTP 服务打开页面不要只用file://检查右侧当前帧与左侧高亮格严格一致检查首帧、尾帧、快速反向和环形接缝切换视频 Tab 后能播放切回图集时视频自动暂停滚动模式页面确实有滚动距离进度能完整覆盖 0 到 1在 0%、50%、100% 三个位置核对帧号与高亮一致快速反向滚动确认不漏帧移动端检查布局、触摸拖拽和 reduced-motion 静态降级。适合谁用explainer 页面不只是技术文档它有三类典型用途 原理讲解给设计或产品同学演示母版视频 → 雪碧图 → 网页动画的完整链路 逐帧质检用drag模式像翻照片一样逐帧检查清理和补帧的效果 演示交付把独立 HTML 直接发给评审对方点开就能看到可交互的动画原型。工具本身遵循页面只读取图集结构和驱动配置的原则不会复制任何项目的角色、文案或布局拿来即用。完整的使用细节见 references/explainer.md。小结一条命令 一份 manifest就能生成独立可交互的动画原理展示页左侧雪碧图高亮当前帧、右侧实时动画还有母版视频对照 Tab5 种驱动方式覆盖指针、拖拽、滚动和自动播放场景滚动模式记得先跑预算、传--scroll-pages生成后按 7 步验收清单走一遍再交付给评审。【免费下载链接】oil-motion设计并实现随滚动、拖动、指针或状态变化响应的网页动画覆盖素材、时间轴和运行时。项目地址: https://gitcode.com/gh_mirrors/oi/oil-motion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/4 7:05:58 · 阅读 1.2k 一条命令生成动画原理展示页：Oil Motion的explainer工具完全指南
一条命令生成动画原理展示页Oil Motion的explainer工具完全指南【免费下载链接】oil-motion设计并实现随滚动、拖动、指针或状态变化响应的网页动画覆盖素材、时间轴和运行时。项目地址: https://gitcode.com/gh_mirrors/oi/oil-motionOil Motion 是一个把视频和序列帧变成网页交互动画的工具而它的 explainer动画原理展示页功能可以一条命令生成独立的 HTML 展示页左侧是完整的雪碧图图集右侧是实时动画还能对照播放母版视频。新手无需读懂一行代码就能向别人讲清楚动画到底是怎么动起来的。什么是 explainer 动画原理展示页 做交互动画时经常需要回答一个问题这一张图或一段视频是怎么变成网页上会动的东西的Oil Motion 的 explainer 工具把答案做成了一个页面打开就能看到左侧雪碧图Sprite Atlas完整的图集可以缩放、拖拽当前真正被渲染的那一帧会被高亮框出来右侧实时动画当前播放的帧会实时显示并附上帧号、行列位置和输入映射公式可选母版视频Tab切换后播放 AI 生成的原始视频方便和编译后的网页资产做对比自适应布局桌面端左右 2:1 排列移动端自动变成上下结构图集解码完成后才显示避免首帧闪烁。生成的页面是一个完全独立的 HTML 文件不依赖任何外部服务双击或通过本地服务器打开就能用非常适合写进文档、放进演示或发给评审。一条命令生成展示页核心脚本是 scripts/create_explainer.py它读取通用模板 assets/motion-explainer-template.html把配置注入后输出独立 HTML。最简用法如下python3 $OIL_MOTION/scripts/create_explainer.py \ --title 一张图240 个方向。 \ --manifest final/motion.json \ --atlas-url ../final/motion.webp \ --video-url ../source/master.mp4 \ --driver pointer-angle \ --output motion-explainer.html其中--manifest指向本地图集清单可参考 assets/motion-manifest.example.json里面记录了帧数、行列和单元格尺寸脚本会自动读取。如果没有 manifest也可以直接手写网格参数python3 $OIL_MOTION/scripts/create_explainer.py \ --atlas-url ./motion.webp \ --frames 96 --columns 12 --rows 8 \ --cell-width 320 --cell-height 320 \ --driver scroll --scroll-pages 4 \ --output scroll-explainer.html几个新手最容易踩的注意点要点说明URL 基准图集和视频的 URL 都以输出 HTML 所在目录为基准别写错相对路径防覆盖输出文件已存在时脚本默认停止确认后才加--force帧数校验列 × 行必须 ≥ 帧数否则脚本会直接报错退出五种驱动方式选对你的交互通过--driver参数同一个图集可以配成完全不同的操作方式驱动方式输入来源适合的场景pointer-angle指针相对主体的方向环形方向、朝向、旋钮pointer-x指针在预览区的横向位置线性姿态、前后对比drag横向拖拽距离可抓取产品、逐帧检查scroll页面滚动进度章节转场、产品拆解、一镜到底autoplay⏯️时间待机、循环动作、无需操作的展示其中pointer-angle是环形模式——方向首尾相连、走最短环形距离转一整圈不会跳帧其余方式默认是有起止点的线性序列。autoplay模式还可以用--autoplay-mode指定loop循环、pingpong往返或once只播一次配合--autoplay-fps控制播放速度。滚动模式先算预算再动手 如果用scroll驱动生成前建议先跑一遍预算检查并传--scroll-pages指定滚动几屏。预算默认要求每屏至少 24 帧——帧数不够时长滚动会出现明显的换帧阶梯这不是调小smooth-time就能掩盖的。预算决策详见 references/delivery-selection.md。生成之后7 步验收清单页面生成了不代表万事大吉。references/explainer.md 里给了一份很实用的验收清单通过本地 HTTP 服务打开页面不要只用file://检查右侧当前帧与左侧高亮格严格一致检查首帧、尾帧、快速反向和环形接缝切换视频 Tab 后能播放切回图集时视频自动暂停滚动模式页面确实有滚动距离进度能完整覆盖 0 到 1在 0%、50%、100% 三个位置核对帧号与高亮一致快速反向滚动确认不漏帧移动端检查布局、触摸拖拽和 reduced-motion 静态降级。适合谁用explainer 页面不只是技术文档它有三类典型用途 原理讲解给设计或产品同学演示母版视频 → 雪碧图 → 网页动画的完整链路 逐帧质检用drag模式像翻照片一样逐帧检查清理和补帧的效果 演示交付把独立 HTML 直接发给评审对方点开就能看到可交互的动画原型。工具本身遵循页面只读取图集结构和驱动配置的原则不会复制任何项目的角色、文案或布局拿来即用。完整的使用细节见 references/explainer.md。小结一条命令 一份 manifest就能生成独立可交互的动画原理展示页左侧雪碧图高亮当前帧、右侧实时动画还有母版视频对照 Tab5 种驱动方式覆盖指针、拖拽、滚动和自动播放场景滚动模式记得先跑预算、传--scroll-pages生成后按 7 步验收清单走一遍再交付给评审。【免费下载链接】oil-motion设计并实现随滚动、拖动、指针或状态变化响应的网页动画覆盖素材、时间轴和运行时。项目地址: https://gitcode.com/gh_mirrors/oi/oil-motion创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考