视频制作 · 结构主义经验

「结构主义」在本项目里指构成主义（Constructivism，俄语 Конструктивизм）； 站内笔记与 look4end 上的文档统一用「构成主义」，是同一件事。

这份文档回答一件事：要做一支结构主义动效视频，照什么做。 分工：01 讲「为什么」（设计理念、媒介差异、三类卡顿的原理）； 本文讲「怎么做 + 踩过什么」（速查经验、可复用管线、命令、验收脚本、本机环境的坑）。

全部结论来自本次实做（2026-10-12/13），实测数字原样保留，没有凭印象写的部分。

0. 一页速查：结构主义视频的 8 条硬经验#

下次直接照这张表做。每条都标了实测依据与原理出处。

1. 五轮排查复盘：一次"感觉卡"的完整诊断#

结论先放：我们花了四轮去优化"怎么画得更快"，真正的元凶是"数值本来就在跳"。 下表按实际发生的顺序，把误判也一起记下来——这张表比结论更有用。

1.1 三条最值得记的教训#

1. 判别口诀：离线逐帧渲染出来的视频仍然卡 → 不是渲染/时序问题，是数值里写了台阶。 去查 Math.floor(p*n)/n、steps()、离散取整。这条一句话就能省下几轮性能优化。
2. rAF 帧间隔指标看不见两类问题：① 逐帧重栅格化导致的光栅滞后；② 数值台阶。 它们主线程都正常。用户的眼睛在这两类问题上是比指标更可靠的仪器。
3. 诊断顺序固定下来（照这个顺序走，不要跳步）： ① 看节奏：有没有"完全冻结"的帧对（逐帧像素差） ② 查属性：正在动的元素有没有动非合成属性（clip-path / width / height / background-position） ③ 查数值：进度有没有被量化成台阶 ④ 以上都不成立，才去怀疑性能（掉帧）

2. 出片管线：离线逐帧渲染（可复用）#

在线播放要同时跟合成器、光栅线程、垂直同步赛跑，损失永远不可能归零。 离线逐帧渲染把"时间"变成参数：每帧按精确 t 单独渲染，编码器按固定帧率输出。

2.1 本机实测的工具路径#

ffmpeg 不在 PATH 上，本机另有多处副本（剪映自带、D:\...\google_download\、E:\...\ai-movie\node_modules\ffmpeg-static\）。 Windows 下可用 Get-ChildItem <根> -Filter ffmpeg.exe -Recurse -Depth 4 找。

2.2 四步流程#

# ① 把要渲染的页面复制到纯 ASCII 临时目录（中文路径传给 Chrome 会被破坏，见 §4）
$tmp = "$env:TEMP\cstv-render"
Copy-Item <页面.html> "$tmp\base.html" -Force

# ② 启动带调试端口的无头 Chrome（注意：--window-size 是窗口不是视口，见 §4）
#    窗口开起来后不用管它，脚本通过 CDP 驱动
Start-Process chrome.exe -ArgumentList @(
  "--headless=new","--no-sandbox","--disable-breakpad","--disable-crashpad","--disable-dev-shm-usage",
  "--hide-scrollbars","--no-first-run","--window-size=1920,1080","--force-device-scale-factor=1",
  "--remote-debugging-port=9223","--user-data-dir=$tmp\prof",
  "file:///$tmp/base.html?pure=1&hud=0")

# ③ 逐帧渲染（帧 i 对应 t = i/fps；30fps × 20s = 600 帧）
node src/tools/render-frames.cjs 9223 "$tmp\frames" 30 600 0 600 1920 1080

# ④ 编码
$ff = "<ffmpeg 路径>\ffmpeg.exe"
& $ff -y -framerate 30 -i "$tmp\frames\frame_%04d.png" `
      -c:v libx264 -preset medium -crf 14 -pix_fmt yuv420p -tune animation -g 15 `
      -movflags +faststart out.mp4

2.3 实测性能与参数#

编码参数选择：

• 纯色为主的画面（构成主义大红/黑/纸）用 -tune animation -crf 14；担心纯朱红渐层色带可降到 -crf 12。
• -g 15（每 0.5 秒一个关键帧）便于拖动预览。
• -pix_fmt yuv420p 保证兼容性；代价是纯红边缘有轻微色度抽样，可接受。
• 帧率选 30fps 就够：屏幕即使是 165Hz，播放器也会把每帧稳定显示约 5.5 次刷新。

3. 验收清单（出片前必跑）#

3.1 静态检查#

# 内联 JS 语法（用 node 按 UTF-8 提取，别用 Get-Content -Raw，见 §4）
node tools/extract-and-check.cjs <页面.html>   # 或自己写 8 行：regex 取 <script> → node --check

• [ ] node --check 退出码 0
• [ ] 逐帧非合成属性残留扫描：clip-path / width / height / background-position 有没有出现在每帧都在更新的语句里
• [ ] 量化台阶残留扫描：Math.floor(p*n)/n / steps( 有没有用在连续运动上

3.2 动态检查（三条硬指标）#

可直接复用的检查脚本（Python + Pillow + numpy）：

import glob, numpy as np
from PIL import Image

def load(p): return np.asarray(Image.open(p).convert("RGB")).astype(np.int16)

fs = sorted(glob.glob("frames/frame_*.png"))
prev, stalls = None, 0
for f in fs:
    a = load(f)
    if prev is not None:
        changed = int((np.abs(a - prev).max(axis=2) > 8).sum())
        if changed <= 300:            # 近似"这一帧没动"
            stalls += 1
    prev = a
print("静止帧对 =", stalls, "/", len(fs) - 1, " 单帧尺寸 =", a.shape[:2])

first, last = load(fs[0]), load(fs[-1])
d = np.abs(first - last).max(axis=2)
print("循环首末帧差异：changed(>8) =", int((d > 8).sum()), " max =", d.max())

判定标准：静止帧对必须为 0；循环首末帧「差异>30 的像素」必须为 0（残差只允许来自有意保留的颗粒）。

3.3 视听检查（指标测不到的那部分）#

• [ ] 真实窗口连续播放一整轮（无头环境测不出光栅滞后）
• [ ] 逐幕确认"正在变化的元素"不顿挫
• [ ] 把成片放大到 200%（或 4K 上采样）看纯红区域有没有色带

4. 本机环境的坑（都踩过，别重踩）#

5. 页面里要留的两个钩子（做视频的页面必备）#

/* ① 精确寻址：设定时刻 → 渲染 → 等两帧绘制完成再返回 */
window.__seek = function (t) {
  playing = false; t = t; render(t);
  return new Promise(res => requestAnimationFrame(() => requestAnimationFrame(() => res(t))));
};

/* ② 逐幕帧间隔统计（真实窗口里用）：?perf=1，pms=窗口毫秒，pskip=跳过启动 */

另外建议留这些 URL 参数（渲染与排查都用得上）： ?pure=1 隐藏全部界面 · &hud=0 关场记 · &guides=0 关构造网格线 · ?quant=1 回到量化顿挫 · &grain=0 关颗粒。

6. 下次做一个新动效视频的清单#

1. 定画幅、时长、帧率 → 总帧数 = fps × 时长；最后一帧是 (n-1)/fps，不含整点（否则循环会重复一帧）
2. 画面上留好 window.__seek 钩子，并把界面元素做成可关（?pure=1 一套）
3. 动笔时先定数值连续性：连续运动绝不量化；机械感靠缓动曲线 + 硬切 + 时长节奏
4. 每幕设计完，检查两端：入场结束到落幕之间不许定格
5. 每帧在动的元素，只许动 transform / opacity；揭示用 overflow:hidden + translate，不用 clip-path
6. 抓 3～5 个关键时刻的静帧看构图，不要等渲染完 600 帧才发现问题
7. 跑 §3.1 静态检查 → §3.2 三条动态指标 → §3.3 真实窗口连续播放
8. 逐帧渲染 → 编码 → ffprobe 核对 nb_frames / duration / r_frame_rate
9. 留档：帧母版 + 编码命令 + 本页清单

7. 当前资产与状态（2026-10-13）#