长卷拼贴平面动效：设计语言、After Effects 实现与复刻方法

这份技能来自一次完整的逐帧复刻（1920×1080、24 fps、272 帧，12 个版本的迭代）。它回答三件事：这种片子长什么样、怎么动；在 After Effects 里怎么搭；拿到一段参考片时怎么量、怎么对。三部分可以单独用：原创时看第 1–3 节，搭工程看第 4 节，复刻看第 5–6 节。

如果当前项目里有 rollback-replica/，那就是参考实现：拆解分析.md 有全部实测数值，scripts/ 是场景生成器， tools/ 是测量脚本。先读它们，不要从零重写。

1. 设计语言

1.1 世界与相机

所有内容摆在一张横向长卷上（参考片是 11000×1080），观众看到的是相机在长卷上移动。
相机只有水平平移和缩放，没有旋转，也不做垂直移动。换算：X屏 = (X世界 − cx)·s + 960，Y屏 = (Y世界 − 540)·s + 540。
一根刻度尺横贯全卷并永远压在画面正中（y=540，小刻度间距约 7.27 px，每 5 格一根大刻度）。它是版式的轴，也是测量相机的基准。
全片不开运动模糊：每帧横移 500 px 的镜头依然锐利，这是这种风格「硬」的来源。

1.2 版式

一根轴：内容挂在刻度尺上下展开；年份、编号直接贴着尺子当坐标。
上实下镜：把尺子当镜面，上面是原图和正向文字，下面是它的单色剪影和倒置文字。
括号编号：所有标注都包在括号里，(1) (2)、(crash)、[cloud1]；括号词常做成空心描边。
粗细对比：1 px 的细圆、同心圆、弧线文字、参考线，对上大面积的实心色块。
嵌套框：黑框套黑框、旋转 90°，尺子从中间穿过去。
密度节奏：疏 → 密 → 极密 → 留白 → 铺满 → 疏。不要全程一样满。

1.3 色彩

灰底加黑白是主体，强调色只用三个，其余颜色只在照片里出现。

名称	值	用途
底灰	`#E6E6E6`	背景（带极轻颗粒）
玫红	`#E8086D`	环段、丝带、光束、底色闪
亮蓝 / 宝蓝	`#1F86F0` / `#0D3ED8`	条块、镜像剪影 / 大圆、天空
蓝紫	`#6982F6`	底色闪、剪影占位色
薄荷绿	`#19E6B4`	少量块面
近黑	`#110D0C`	黑场、收尾

底色本身会按段落硬切：灰 → 黑 → 玫红 → 蓝紫，每次都是一帧到位。

1.4 字体搭配

混用是故意的，每类信息一种字体：过渡衬线（Times，括号标注、空心描边）、几何无衬线细体（Montserrat，年份数字，字距收紧）、圆角方块感的技术字体（Jura / OCR-A，命令行和小标签）、高对比现代衬线（Playfair/Bodoni，大标题词，字母贴紧）、超粗粗衬线（Lubalin/Rockwell，主标题，横向拉宽）、等宽（Consolas/Courier，代码和大数字）、宋/明朝体（CJK，可横向拉到 3 倍）、像素点阵。小字宁可小到 6–10 px 也不要放大，它们是「质感」不是「信息」。

1.5 素材词汇

照片抠图（高反差黑白、阈值化）、查找边缘感的线稿（白底黑线带碎点）、系统 UI 截图（弹窗、文件图标、表格、关键帧文本）、胶片扫描（片基、齿孔、边码）、3D 小件（液态金属、光泽管子、白模、线架）、全息锥形渐变、1-bit 抖动图案、二维码、像素小人。同一个东西经常出现两个版本：实物和它的纯色剪影。

1.6 质感

纯色块保持干净，渐变和灰色上有可见颗粒；全片顶层再加 2–3% 单色杂色。
照片做成「复印机」质感：阈值、色调分离、只留三四个灰阶。
线稿是黑线白填充，不是灰线；线要细，允许有断点和碎点。
铬质感的物体看起来像被色调分离过的渲染：整体一圈白描边加黑轮廓，高光是白芯外套同心环。

2. 运动语言

2.1 相机

缩放：在几个固定档位之间用 3–5 帧纯线性过渡，到位硬停，没有缓动。少数地方用指数缓出（每帧把差值乘 0.6–0.75）或指数加速推近。也可以直接硬切。
平移是三个成分的叠加：
1. 恒定漂移，约 4 世界 px/帧，全片不断；
2. 节拍帧上的冲量，随后按 0.6–0.8 的比例逐帧衰减（例：+195, +33, +20, +14, +11, +9, +7）；
3. 跳切，一帧跳几百 px。
相机逐帧烘焙成线性关键帧，不要指望贝塞尔缓动猜出这种曲线。

2.2 节拍

事件落在每 6 帧一拍（24 fps 下 0.25 s）的网格上，可以整体带一个相位。元素按拍依次出现，一拍一个，而不是同时淡入。

2.3 元素入场与变化（核心手法）

剪影占位：先用纯色剪影显示 1–2 帧（白 → 蓝紫 → 实物，或玫红 → 实物），再换成真实贴图。用「色调」效果把黑白都映射到同一色，数量 100 → 0 做 hold。
一帧闪断 / 大小交替：出现 → 灭一帧 → 再亮；或大、小、大、小闪三次后定住。
径向擦除按拍分段：环形元素先扫出一段，然后每拍整段跳到新角度，段间只漂 1–2°/帧。
头尾两道线性擦除：条状元素先「头」向前伸，随后「尾」追上去，剩下的部分就是下一个元素。
hold 关键帧为主：位置、缩放、旋转都是逐帧跳的；真正的缓动只有 2–3 帧的缓出。
弹出：0.3–0.7 倍 → 1.0，2–3 帧，可带 1.1–1.2 的过冲。
钉屏：个别元素在相机移动时固定在屏幕上（用相机的逆变换给它打逐帧关键帧），过一段再「交还」给世界。
混帧率：3D 小动画常是 30 fps 做的再塞进 24 fps 时间线，表现为每 4 帧走 1、2、1、1 步。复刻时按 源帧号 = ⌊1.25·(f − f0) + 0.5⌋ 取帧，不要均匀插值。
镜像与错位副本：镜像剪影出现时，下面压一层白色副本，在 4–5 帧里从错位滑到重合。

2.4 全局闪帧

效果	做法
底色硬切（黑、玫红、蓝紫）	背景纯色层的 hold 关键帧
阈值闪（1 帧，画面变成黑白二值）	顶层调整层「阈值」
差值阈值闪（凡是和底色不同的都变白）	一层与底同色的纯色用「差值」混合，上面再压「阈值」
整屏反相（某些元素保持本色）	顶层「反转」；要保持本色的图层自己先加一次「反转」
局部横向拉丝	窄调整层加「变换」，取消统一缩放，宽度拉到几千 %
翻面	图层 X 缩放逐帧 hold（过零变负），轴心也逐帧移动，过冲一帧
收尾	渐变横条阶梯式铺满再退场，底色逐级沉到近黑，标题被横向拉长成残影

3. 原创一条这种片子时的顺序

先画长卷：定世界宽度（每秒大约 800–1000 世界 px）、分 4 段、每段一个母题和一种密度。
排镜头表：每个镜头写缩放档位、起止 cx、底色、发生的事件；档位之间只用线性斜坡或硬切。
把事件对到 6 帧网格上，每拍一个新元素；每 2–3 秒安排一次全局闪帧或底色切换。
每个元素从第 2.3 节里选一种入场手法，同一段里不要重复超过两次。
素材按第 1.5 节的词汇准备，每件同时出一个纯色剪影版。
最后统一加颗粒，检查强调色是否仍只有三个。

4. After Effects 实现

4.1 工程结构

RB_REPLICA/
  01_合成/   RB_MAIN (1920×1080 成片)   RB_WORLD (长卷世界，比如 14400×2600)
  02_素材/   按段落分子文件夹（A_… B_… C_… D_…、标尺与全局效果）
  03_纯色/   背景色、调整层、遮罩用纯色

RB_WORLD 里摆所有世界空间的图层；世界点 (x, y) 对应合成像素 (x + OX, y + OY)，四周留出余量。
RB_MAIN 自下而上：背景纯色 → RB_WORLD（打开塌陷变换，相机就是它的位置/缩放关键帧）→ 屏幕空间叠层 → 调整层（颗粒、阈值、反转…）。
图层按段落上标签色，素材文件名带段落前缀，方便在 500 多层里定位。

4.2 用脚本生成而不是手摆

图层数量大、数值全是实测值，适合用脚本描述场景再导入：

一个 Scene 持有图层列表；每个图层有世界坐标、时间段 span(f_in, f_out)、属性关键帧、效果列表。
素材由函数绘制并按「函数源码 + 参数」的哈希缓存，改了才重画。
导出为 AE 工程 JSON，用 aftereffects MCP 的 ae_project_import_json 导入；重建时按 id 删掉旧的根文件夹再导入（导入只能追加）。
JSON 带不过去的开关（调整图层、塌陷变换、混合模式）单独列一个清单，导入后用 layer.set_props / layer.set_blend_mode 补。
每帧姿态不同的元素（旋转的 3D 件、逐帧变化的渐变）做成「一帧一层」，每层只活一帧，比在一层上堆效果关键帧可靠。

4.3 效果用法备忘

线性擦除：角度是行进方向，+90 从左边擦掉、−90 从右边、180 从上、0 从下；擦除按图层自身空间算，图层旋转时要把角度反向补偿。
径向擦除：起始角 0 = 正上、顺时针；「两者兼有」是以起始角为中心向两边擦。
16 bpc 工程里「阈值」的级别按 0–1 填。
非合成尺寸的调整层，效果里的点参数会被「图层 → 合成」换算一次。
非等比的静态缩放尽量烤进素材，不要留在图层变换上（预览和导出容易不一致）。

4.4 渲染与输出

AE 自带 H.264 会让高饱和玫红偏暗。走「无损」AVI，再用 ffmpeg：

ffmpeg -i main.avi -vf "scale=in_range=full:out_range=tv:out_color_matrix=bt709,format=yuv420p" -c:v libx264 -crf 17 -preset slow -color_primaries bt709 -color_trc bt709 -colorspace bt709 -color_range tv -movflags +faststart out.mp4

4.5 收集整理工程

交付或归档时把工程和它真正用到的素材放进一个独立文件夹（等同「文件 → 整理工程 → 收集文件」）：

只复制被图层引用的素材，按项目面板的文件夹结构放进 (Footage)/；
生成一份素材路径指向收集目录的工程（新建工程 → 导入改过路径的 JSON → 补开关 → 设成与原工程相同的位深和色彩设置 → 另存）；
写一份收集报告：合成规格、素材数量与大小、缺失文件、用到的效果（是否依赖第三方插件、字体）、没有收集的东西；
验证：原工程和收集工程各渲染同一两帧，逐像素比较应当完全一致；再确认没有缺失素材；
做完把 AE 切回原工程。不要动用户自己放在工程里的合成和素材。

5. 复刻一段参考片的方法

目标是「看起来是同一条片子」，素材靠重绘和重新生成，不是把原片的像素搬过来。

5.1 顺序

抽帧（全部帧，JPG 即可）并记下基本参数：分辨率、帧率、帧数、有没有运动模糊、音轨是否真的有声音。
先解相机：找一个贯穿全片的刚性参照（这里是刻度尺），逐帧量出缩放和平移，烘焙成相机表。
拼出世界：有了相机就能把任意帧反投影到世界坐标；之后所有测量都在世界坐标里做。
列元素清单：每个元素记录世界位置、出现帧、消失帧、入场手法、逐帧变化。
搭第一版，渲染，逐帧对比，按差距迭代。每一版只攻一批问题，改完重新渲染再比。

5.2 测量纪律

相机审计：把每帧的刻度逐根定位、换算回世界坐标，和理想网格比。残差在同一个镜头里应该是常数；不是常数就说明相机表错了。这一步曾查出两处 8 px 和 49 px 的配准错误，它们在并排对比图里完全看不出来，却让后面所有测量都带着偏差。
用数值检测代替目测：从带网格的裁切图上读坐标会有 3–8 px 的系统偏差。要紧的量用检测器取：颜色阈值加包围盒（条块的头尾）、连通域质心（高光、标记点）、圆/椭圆拟合（球、环、轨道）、逐行统计（线条的行号和粗细）。原片和复刻用同一个检测器各跑一遍再比较。
世界对齐的裁切图：对比时把原片和复刻的同一世界矩形并排裁出来，而不是比较屏幕截图；相机在动的镜头尤其如此。
逐帧而不是隔帧：隔 2 帧采样曾把一个 4 帧周期的旋转看成「几乎不动」。
发现某个元素「动得奇怪」时，先怀疑相机，再怀疑元素。

5.3 让 GPT / Codex 按参考帧重绘素材

适合照片、线稿、拼贴件、手绘件：

裁出该元素最干净的 1–2 帧，放大 2–4 倍作为参考图。
提示词结构：「忠实重绘参考图里的 X」→ 逐项描述每个物体和它的样子 → 列出要去掉的东西（尺子、叠在上面的线、相邻元素、文字）→ 要求透明底。
模型会把主体拉伸到填满画布：把参考图补边到输出画幅的比例，并写明「保持比例、留出边距」。
预览图不显示透明通道，看起来像有光晕；判断前先检查 alpha，阈值化后再用。
多物体的图布局会漂：把图切块，每块按实测的世界矩形摆放，允许各块非等比缩放。
模型照抄进来的第三方商标要涂掉。
生成任务可以并行后台跑，期间继续做测量和程序化部分。

不适合交给生成模型的：运动或拓扑必须精确的东西（旋转的环、融合在一起的珠串、逐帧变化的渐变、线架）。这些用拟合出来的几何参数程序化渲染；生成模型只负责贴图和画面。偏离用户建议的工具时要在汇报里直说原因。

5.4 三维小件的拟合套路

跟踪显著特征（高光）逐帧的位置；
拟合投影轨道（椭圆），再用带透视的模型解释「近大远小、近疏远密」；
从相位序列里读出转速和帧率转换的节奏；
用拟合参数逐帧渲染，再把渲染结果和原片叠在一起核对相位。

5.5 对比与交付

每一版输出：成片、上原片下复刻带帧号的同步对比视频、若干张关键帧上下对比图。
文档里记录：镜头表、相机曲线、逐元素实测值、每个版本改了什么、仍有差距的地方。
汇报时把没对上的部分说清楚，说明是哪一类差距（造型、明暗、位置、时间），不要只报改了什么。

6. 检查清单

交付前逐项过一遍：

7. 常见问题

高饱和色渲染后偏暗：没有走无损加 ffmpeg 的 bt709 转换。
元素在两个镜头之间错位几十 px：相机表在跳切处多算或少算了一个刻度周期。
擦除方向不对：线性擦除的角度是行进方向；图层带旋转时要补偿。
阈值帧全黑或全白：16 bpc 下级别写成了 0–255。
生成的素材比例不对：参考图没有补边到输出画幅。
钉屏元素在拉镜头时飘：逆变换要用每一帧的相机值逐帧打 hold 关键帧，不能只打首尾。

novahanser/rollback-motion-recreation

O que é rollback-motion-recreation?

Perguntar na sua IA favorita

Documentação