長卷拼貼平面動效：設計語言、AE 實現與複刻方法

這份技能來自一次完整的逐幀複刻（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 抖動圖案、QR code、像素小人。同一個東西經常出現兩個版本：實物和它的純色剪影。

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

rollback-motion-recreation 是什麼？

在你喜歡的 AI 中提問

說明文件