构成主义动效（视频）· 设计理念与制作经验
与
../constructivism/（网页设计系统）平行的第二套资料。 网页讲「一帧里怎么构图」，这里讲「二十秒里怎么构图」。 基准实现：../../constructivism-motion-20s.html—— 双击即可打开，单文件、无构建。当前交付形态：HTML（在线打开）。视频线暂缓：离线逐帧渲染的完整流程与脚本已就绪 （见 §9.3 与
src/tools/render-frames.cjs）， 600 帧母版也已渲染好，需要成片时编码只需几秒。
从这里开始
只有 1 分钟？ 打开 ../../constructivism-motion-20s.html，按空格看一轮 20 秒，按 H 进纯净模式再看一轮。
要动手改？ 按这个顺序：
- 读
01-动效设计理念.md—— §0 媒介差异与 §3 通用/不通用对照表是核心，先搞清哪些网页法则不能搬 - 用 §2 节奏表 决定各幕时长与功能
- 用 §5 动效语汇 选动作（只有六种，且时长区间是 400–1200ms）
- 交付前跑 §4.2 首末帧像素验收
要动手做一支新片？ 直接看 02-视频制作·结构主义经验.md 的 §0 一页速查（8 条硬经验） 与 §6 出片管线，照单执行。
文件清单
| 文件 | 内容 | 什么时候看 |
|---|---|---|
01-动效设计理念.md |
媒介差异、力量来源五个决策、实测色彩面积表、六幕节奏表、通用/不通用对照表、循环点硬约束、动效语汇、卡顿三重诊断（节奏/光栅/数值）、离线逐帧渲染流程、已知限制 | 动手前必读 + 交付前查 |
02-视频制作·结构主义经验.md |
结构主义视频的 8 条硬经验速查表、五轮排查复盘（含误判）、四步出片管线与实测参数、验收清单与可复用脚本、本机环境 11 个坑、下次做新片的清单 | 要动手做时按它执行 |
src/tools/render-frames.cjs |
离线逐帧渲染脚本（CDP 驱动无头 Chrome，按精确 t 抓帧）。出片走这条路，不要在线录屏 |
出片时用 |
三句话讲完「构成主义动效」
- 它是什么：把构成主义海报的静态构图拆成时间轴——红场、黑斜块、巨字、几何原语按 0.4–1.2s 的镜头级动作依次入场，20 秒讲完一轮。
- 和网页版的区别：网页是用户驱动、单帧必须完整可读，所以红压到 5–15%、动效压到 120–320ms；视频是播放器驱动、信息在时间里累积，所以红可以整幅铺底、动作可以拉到一秒。
- 做视频时的核心公式：
大红场 + 黑斜切巨块 + 纸色巨字 + 分段机械动效 + 红黑反色重音 + 编号跳变 + ≥0.4s 黑场收束 + 首末帧像素一致
最重要的实测结论（10 条）
| # | 结论 | 影响 |
|---|---|---|
| 1 | 基准实现的平均红色面积 ≈ 45%（01/03/04/06 幕单帧 62–69%；02/05 幕反而纸占 81–83%） | 网页「红 ≤15%」是单帧构图律，搬到视频会直接做坏。见 §1 决策 1、§3 |
| 2 | 循环点的纯黑停留最初只有 50ms（30fps 下 1.5 帧），成片里读作故障闪帧 | 收紧快门对合区间后留出 0.55s。硬约束：≥0.4s / 12 帧 |
| 3 | КОНСТРУКТИВИЗМ 在 188px 时溢出画框切掉末字 |
巨字必须实测宽高。收到 164px 后占画幅宽约 86%，气势不减 |
| 4 | 动效时长区间是 400–1200ms，不是网页的 120–320ms | 网页那档时长是「交互反馈」的感知阈值；放到视频里像卡帧 |
| 5 | 首末帧可做像素级验收：mean=0.691/255、max=10/255、差异>30 的像素 0 个（残差只是颗粒换贴图） |
判定标准：「差异>30 的像素」为 0 才算无缝循环 |
| 6 | 「感觉卡」实测不是掉帧：每帧 6.1ms（≈164fps 余量），关掉颗粒层/放射线数字不变；真凶是①机械跳步（设计意图，可用 Tweaks 切成连续）②颗粒层「平移同一张贴图」（真缺陷，已改为 4 张独立贴图轮换） | 见 §8。掉帧要优化性能，顿挫要改设计，先分清 |
| 7 | 半调网点写成同心圆环会退化成斜线摩尔纹：repeating-radial-gradient(circle at 0 0, …) 的圆心在元素左上角，距原点上千像素处就是近乎平行的弧线 |
真网点用 radial-gradient() + background-size 铺固定网格（已修） |
| 8 | 「只有变化中的元素卡」= 光栅滞后，不是掉帧：clip-path 揭示 / width / background-position 逐帧变化会让该元素每帧重新栅格化。rAF 帧间隔测不出来（主线程正常），只能查属性 |
换成外层 overflow:hidden+内层 translate、scaleX、子元素 transform（已全改） |
| 9 | 量化跳步在视频里读作卡顿，而且写进了数值：实测某段 21 帧中 14 帧画面完全静止（67%），其余帧一次跳 12 万～25 万像素 | 离线渲染也救不了（不是时序问题）。机械感改由缓动+硬切+时长承担，默认已改连续（?quant=1 可回退） |
| 10 | 判别口诀：离线渲染出来的视频仍然卡 → 不是渲染问题，是数值里写了台阶 | 前三轮都在优化"怎么画得更快"，真凶是"数值本来就在跳"。先验证数值连续，再谈性能 |
与网页设计系统的关系
网页 ../constructivism/ |
视频（本文档） | |
|---|---|---|
| 九条形式法则 | 全部适用 | 6 条通用、2 条放宽、1 条（红面积）反着来 |
| 动效时长 | 120 / 200 / 320ms | 400–1200ms |
| 红色政策 | 单帧 ≤15% | 时间平均 30–55%，单帧峰值可 100% |
| 独有硬约束 | 对比度 AA、焦点环可见、prefers-reduced-motion |
无缝循环、帧号可关、首末帧像素一致 |
| 共享资产 | constructivism-kit/kv.css 的色板/字体/质感配方 |
同一套色板与字体（含西里尔覆盖核实） |
版本沿革
| 版本 | 文件 | 采用 |
|---|---|---|
| v1（基准） | constructivism-motion-20s.html |
✅ 主版本 |
| v2（对照） | constructivism-motion-20s-v2.html |
❌ 按网页法则重做后力量感流失，保留为反例（其可复用部分见 §10） |
待办
- [ ] 中文标题上得意黑（自托管
SmileySans-Oblique.woff2） - [ ] 配乐按 100 / 120 BPM 做卡点（与 0.4–0.7s 动作同量级）
- [ ] 竖屏 9:16 与方形 1:1 版本（不能直接裁切，需重新分配斜轴与字号）
- [ ] 4K 输出时同步放大半调网点阵（否则网点变细）
生成时间：2026-10-13 · 所有面积为 1920×1080 画幅下的实测像素占比，循环差异为无头 Chrome 抓帧比对结果