---
description: "关键帧图 + 首尾帧视频 + 滚动叙事引擎，附最深的坑（all-intra 重编码）和可复用的工程手册"
---
# 会动的网页 PPT 是怎么做出来的
2026 年 5 月我做了一次组内分享，没用 PPT 软件——演示稿是一个滚动驱动的叙事网页：向下滚动，背景里的柴犬在 12 个场景之间连续动画过渡，文案随场景切换。先看效果：
!!! tip "操作方式"
**先点一下画面，然后按下鼠标右键，尽量别用滚轮**
## 原理：静帧 + 过场视频的三明治 { #原理 }
拆开看只有三种东西：
```
scene0.png ──trans0to1.mp4──▶ scene1.png ──trans1to2.mp4──▶ scene2.png ──▶ …
静帧 过场视频 静帧 过场视频 静帧
```
页面本体是一个很高的空滚动区（数百 vh），真正的画面固定在视口里。滚动进度落在**静帧段**就显示对应 PNG；落在**过渡段**就把滚动进度映射成视频的 `currentTime`——不是 `play()` 播放，而是滚多少、视频走多少帧，倒着滚就倒放。因为过场视频的首帧和尾帧就是前后两张静帧图，衔接处像素级无缝，看起来就是「一镜到底」。
## 素材管线：关键帧图 + 首尾帧视频 { #素材 }
**第一步，出关键帧。** 12 个场景 = 12 张柴犬图，用 GPT 网页批量生成 image2 再人工筛选。出图不是随便出，有三条规矩（来自工程手册 [deck skill](../../skills/writing/deck.md) 的 Scene Anatomy 章）：
- 统一 16:9 灰底，柴犬主体只占 1/3 ~ 1/2 画面，**剩余大量留白是给文字的**——文字盖到柴犬脸上就是设计失败；
- 每张图先想清楚「柴犬落在九宫格哪个位置」，再决定这一页文字走哪种版式；
- 每个场景对应叙事弧线上的一个情绪：待出发 → 起跑 → 犹豫 → 探索 → 好奇 → 慵懒 → 满足 → 专注 → 振奋 → 温柔反思 → 安睡戴冠。
当时的调研笔记里有一句现在看依然成立的话：
> 我发现里面最难的还是美术风格，即便你知道使用什么技术，里面也会有很多坑……特别是这种非常主观表达的场景，可以说是有一部分创作的成分在里面，我们需要的并不是一个 AI 非常无偏的表达。
所以「批量出图 + 人工筛选」不是偷懒，它就是这类主观创作场景下和图像模型的正确协作方式——模型负责量，人负责挑出符合叙事情绪的那张。
**第二步，首尾帧生成过场视频。** 把相邻两张关键帧作为**首帧和尾帧**喂给支持首尾帧的图生视频模型，让它脑补中间的运动（成片约 4 秒、720p、24fps）。这一招还有个彩蛋用法：**首尾给同一张图**，就得到一段可以无限循环的动画背景——标题页（trans1to2，奔跑循环）和结尾「感谢聆听」页（trans11to11，安睡循环）都是这么来的，静帧页里柴犬是活的。
素材目录里至今留着管线化石：`_orig.mp4` 是模型原片，`_抠图.png` 是一轮没用上的抠图实验——创作过程比成品目录乱得多，这很正常。
## 最大的坑：模型给的 mp4 根本没法 scroll-seek { #视频坑 }
这是整个项目踩得最深的坑，也是这篇文章最值钱的一节。视频模型（以及几乎一切常规导出）给你的 mp4，直接拿来做 scroll-driven 必然出现：**滚到中间画面冻住、只播开头然后直接跳末尾、必须滚很久才开始动**。两个原因：
1. **`moov` 索引在文件末尾。** mp4 的 `moov` atom 记录「每个时间点对应文件哪个字节」，多数编码器默认把它放在文件尾部——浏览器没拿到索引之前，任何 `currentTime` 都无法精确 seek，只能等整个文件几乎下完。
2. **关键帧密度不够，这个更致命。** 视频里只有 keyframe（I-frame）能独立解码，常规编码几秒才一个。scroll-driven 是每一帧 `requestAnimationFrame` 都要 seek 到任意时间点——目标不是 keyframe 时，浏览器要找到上一个 keyframe 顺序解码过来，根本来不及，于是放弃、渲染手头最近的帧（往往是开头或末尾）。实测 v0.2 新入库的 6 段过场，**无一例外都是 1 个 keyframe / 97~121 帧**。
修复一条 ffmpeg 命令同时解决两个问题——重编码成**每帧都是关键帧**（all-intra）并把索引挪到文件头：
```bash
ffmpeg -y -i in.mp4 \
-c:v libx264 -preset fast -crf 20 \
-g 1 -keyint_min 1 -sc_threshold 0 \
-pix_fmt yuv420p -an \
-movflags +faststart \
out.mp4
```
`-g 1` 就是「GOP = 1，每帧皆 keyframe」。代价是体积变为 1.5~3 倍，但几秒的过场绝对体积仍然很小，换来帧级精确 seek。经验教训是把它做成**素材入库仪式**：每段新视频进目录先跑诊断（keyframe 数应 ≈ 总帧数），不达标立即重编码，不要等浏览器里「卡住了」再回头查——诊断命令和批量脚本都在[工程手册](../../skills/writing/deck.md)里。
前端配套三件套也别漏：`