切曲線 — 技術目錄
五種 SEAM 技巧，一個原則：在峰值速度時剪輯，匹配剪輯兩側的方向和速度 — 加上兩種場景內技巧（§6 入場，§7 滑動）。
無縫剪輯法則 — 向量法則、電流、分類帳、Seam Gate — 位於 motion-doctrine 中；請先閱讀該文檔。本技能提供的是參數和機制。
所有 GSAP 程式碼範本（worker + registry）：examples/gsap-implementation.md。
目錄
| # | 技巧 | 範圍 | 軸線 | 用途 |
|---|---|---|---|---|
| 1 | 縮放穿越（向前） | 場景內文字替換 | Z，朝向觀看者 | 在同一思想脈絡中深入探討 |
| 2 | 反向縮放穿越 | 到場 / 轉折點 | Z，遠離觀看者 | 某個更大的事物落地 |
| 3 | 切曲線 | 場景之間 | X / Y | 預設邊界，影片的「電流」 |
| 4 | 瀑布剪輯 | 文字到文字的接縫 | X，逐字 | 大字幕節拍之間的逐字過渡 |
| 5 | 焦點模糊剪輯 | 同一表面的狀態切換 | X / Y / Z | 你想讓人「看見」的那個剪輯 — 一種 DSLR 焦距拉動的效果 |
| 6 | 瀑布入場 | 場景內到場（無接縫） | Y，從下方 | 標題卡、段落開場、列表介紹 |
| 7 | 微調曲線 | 場景內群組滑動（無接縫） | X / Y | 重新定位已編排的群組以騰出空間 |
Z 方向是一個符號
在 Z 軸上僅靠「同一軸線」是不夠的 — d(scale)/dt（縮放變化率）的符號必須在剪輯兩側匹配：
| Z 向量 | 出場縮放 | 入場縮放 | 變體 |
|---|---|---|---|
| 推（向前） | 增大 1 → 1.2 | 增大 0.75 → 1 | 縮放穿越 |
| 拉（向後） | 縮小 1 → 0.8 | 縮小 1.25 → 1 | 反向縮放穿越 |
被禁止的鏡像：一個後退的出場被一個從小變大的入場所回應（拉動翻轉為推動 — 這是常見的，因為從小變大是預設的元素入場方式），以及一個推動的出場被一個過大的收回所回應。這在接縫窗口期間（剪輯 + 約 0.5 秒）約束了進入場景自身的入場動畫，而不僅僅是包裝器補間：保持進入影格已構圖，或撰寫其入場動畫以匹配符號。根據 Seam Gate 規則 7 進行驗證。
模糊邏輯（所有 Z 變體）
| 主體 | 峰值模糊 | 原因 |
|---|---|---|
| 文字縮放（標題、詞組） | 10px | 20px 會弄髒字母形狀 — 剪輯看起來像故障，而非速度 |
| 全螢幕表面（視窗、卡片、截圖） | 18–20px | 在大表面上使用較輕的模糊會讀起來像是渲染問題 |
在交換影格處，兩側使用相同的峰值模糊。模糊包裝器（WRAPPER），永遠不要模糊子元素。
1. 縮放穿越（向前）
Z 軸速度匹配剪輯；絕不讓兩個文字同時可見。 所有元素都在「增大」：出場文字向攝影機加速，硬切換在峰值模糊處隱藏，入場文字持續增大進入焦平面。僅限標題和短語。總時長約 0.4 秒。
| 階段 | 縮放 | 模糊 | 透明度 | 緩動 | 持續時間 |
|---|---|---|---|---|---|
| 出場 | 1 → 1.2 | 0 → 10px | 1 → 0.15 | power3.in（透明度：使用單獨的 none 補間） | 0.2 秒 |
剪輯 (tl.set) | 入場: 0.75 | 10px | 出場: 0 / 入場: 0.15 | — | — |
| 入場 | 0.75 → 1 | 10 → 0px | 0.15 → 1 | expo.out | 0.5 秒 |
出場透明度必須是其自身的線性補間 — power3.in 會讓透明度在接近 1 的位置停留過久。入場時所有屬性共享 expo.out。
2. 反向縮放穿越（向後）
拉回鏡像：出場元素「後退」；入場元素以「過大」的狀態到來（彷彿就在攝影機後方）並縮回焦平面。所有元素都在「縮小」。用於「到場 / 轉折點」節拍 — 一句轉折台詞、一個巨大的回應、一個持久的結束狀態 — 永遠不要用於普通邊界。總時長約 0.7 秒（30% 出場 / 70% 入場）。
| 階段 | 縮放 | 模糊 | 透明度 | 緩動 | 持續時間 |
|---|---|---|---|---|---|
| 出場 | 1 → 0.8 | 0 → 10px | 1 → 0.15 | power3.in（透明度：使用單獨的 none 補間） | 約 0.2 秒 |
剪輯 (tl.set) | 入場: 1.25 | 10px | 出場: 0 / 入場: 0.15 | — | — |
| 入場 | 1.25 → 1 | 10 → 0px | 0.15 → 1 | expo.out | 約 0.5 秒 |
模糊為 10px 文字級別；僅當兩側都是滿版表面時才使用 18–20px。
符號紀律： 進入場景以一個已構圖的影格形式，在縮回的包裝器內到達 — 在接縫窗口內禁止從小變大的介紹。階段性入場應在縮回穩定後發生，或從 ≥1 開始並縮回。
3. 切曲線（預設場景邊界）
X/Y 軸速度匹配剪輯 — 所有場景到場景邊界的預設方式，位於影片的「電流」中，而非一種強調效果。出場主角向一個方向加速，剪輯在半途中發生，入場主角繼續朝「相同」方向並減速。總時長約 0.6 秒；方向：左 / 右 / 上 / 下（預設為左）。
部分移動： 約影格的 12%（在 1920 解析度下約 230px） — 永遠不要進行全螢幕離場移動。
| 方向 | 出場 | 入場 開始 → 結束 |
|---|---|---|
| 向左 | x: 0 → −230 | x: +230 → 0 |
| 向右 | x: 0 → +230 | x: −230 → 0 |
| 向上 | y: 0 → −230 | y: +230 → 0 |
| 向下 | y: 0 → +230 | y: −230 → 0 |
機制：
- 鏡像緩動： 出場
power4.in+ 入場power4.out，相同的距離和持續時間 — 相當於一個power4.inOut的兩半，因此速度在剪輯處精確匹配。 - 淡出技巧： 出場透明度在其移動的約 25–30% 處完成（淡出約 0.18–0.3 秒 vs 移動 0.3–0.34 秒）；入場在路徑中段以約 0.35 透明度開始。安排最後一個淡出的元素正好在剪輯處消失 — 一個沒有任何東西在移動的間隙會讀起來像死寂。
- 出場 0.2–0.4 秒；入場 ≥ 出場。可選模糊 8–10px。
- 舞台背景：
#root必須是不透明的（background: var(--canvas-deep, var(--canvas, #000))） — 中段窗口剪輯會打開一個總和透明度 < 1 的窗口，否則會閃白（參見seam-craft）。
「推拉滑動」存在但違反了部分移動和中段運動相位；優先使用切曲線。
4. 瀑布剪輯（逐字切曲線）
在「單詞」粒度上的切曲線 — 用於文字到文字接縫的最強的左向剪輯。出場單詞沿其自己的曲線加速退出；入場單詞在半空中級聯進入 — 形成一道眼睛可以跨越接縫的波浪。
範圍： 在 worker 內部創作，用於一個多節拍組合（堆疊的滿版 .beat 層），不是 registry/injector 類型 — 它補間的是單詞跨度，而不是剪輯包裝器。進出文字節拍塊的邊界仍然會獲得一個正常的 registry 過渡。不計入 2–3 次過渡預算。
| 參數 | 值 | 原因 |
|---|---|---|
| 移動距離 | ±230px（約 12% 影格） | 部分移動 + 速度 > 全螢幕推拉 |
| 出場 | 0.34 秒 power4.in | 加速本身就是剪輯 |
| 出場淡出 | 0.18 秒，與 x 同時開始 | 單詞在約 25–30% 移動處消失 — 沒有拖影 |
| 出場交錯 | +0.022 秒 閱讀順序 | 線條像剝離一樣，而非整體滑塊 |
| 入場 | 0.3 秒 power4.out | 複合曲線的後半段 — 速度匹配 |
| 入場起始透明度 | 0.35 | 路徑中段點火；二進制 0→1 會產生突兀感 |
| 入場間隔 | 0.05 秒 × 0.84 衰減 | 加速級聯，最終穩定為已構圖狀態 |
規則：
- 每個鏈條只有一個方向，沿著電流前進。反向縮放僅作為該鏈條的「到場」節拍。
- 在構建時將所有單詞預設為
x: +230, opacity: 0— 僅靠immediateRender: false會讓未啟動的單詞在靜止時可見。 - 一個短的第一節拍可能以整行方式退出：其淡出在剪輯前約 0.02 秒結束，以便在下一個單詞點火時仍在飛馳 — 沒有死寂間隙。
- 僅變換 / 透明度（查找安全）；不透明的舞台背景適用。
5. 焦點模糊剪輯（可見的剪輯）
唯一一種剪輯本身被「看見」的變體：一個失焦模糊「尖峰」隱藏了一個單影格的硬切換 — 類似手持 DSLR 的焦距拉動。用作同一視覺主題內「相同表面」狀態切換的偶爾點綴；永遠不要用作預設邊界。
與其他變體的差異：出場元素保持「完全不透明」直到剪輯（模糊隱藏了切換 — 沒有早期淡出）；緩動使用 power2.in / power2.out（柔和的視覺效果，而非動量）。
規則：
- 僅在敘事節拍時觸發，每約 8 秒 ≤ 一次；切勿在字幕進行中或保持狀態時使用。
- 在「峰值」模糊時剪輯（≥6px；峰值 8–12px，最大 ≤16–18px） — 在模糊上升過程中切換會暴露剪輯。
- 一個微妙的縮放（約 1.06 的鏡頭呼吸效果）讓它看起來像光學效果。
- 兩側方向相同 — 向量法則仍然成立。入場 ≥ 出場持續時間。
- 模糊包裝器；切勿在一個元素的一個補間中同時使用模糊和透明度（無頭合成錯誤）；切勿直接模糊
<video>元素（請將其包裹）。
6. 瀑布入場（場景內到場 — 非接縫）
交錯的「到場」級聯：單詞 / 元素從下方（一個一致的方向）快速進入，每個元素在前一個穩定之前就開始 — 一道加速的波浪，最終穩定為一個已構圖的佈局。用於標題卡、段落開場、列表 / 功能介紹。其接縫兄弟是 §4；不要混合它們的規則：
| §6 入場（到場） | §4 瀑布剪輯（接縫） | |
|---|---|---|
| 透明度 | 二進制 0→1 通過 tl.set 在入場時 — 永不淡入 | 在路徑中段以 0.35 點火 — 淡出本身就是速度技巧 |
| 預設軸線 | Y，從下方 | X，沿著電流 |
| 出場側 | 無 | 單詞在鏡像的 power4.in 上加速退出 |
編排：
- 重疊，不要排隊 — 下一個元素在前一個穩定的 ±2 影格內開始；間隔在級聯中「縮小」；最後一個元素瞬間到位。
- 速度因元素權重而異 — 重型 / 錨定元素移動更遠、更久；輕量單詞 / 標點符號緊湊到位：
| 參數 | 錨定 / 重型 | 普通單詞 | 輕量 / 標點符號 |
|---|---|---|---|
| Y 偏移 | 60–80px | 40–50px | 30–48px |
| 持續時間 | 0.16–0.20 秒 | 0.13–0.16 秒 | 0.10–0.13 秒 |
| 重疊 | 0–2 影格間隔 | 1 影格重疊 | 1–2 影格重疊 |
- 緩動使用
power4.out（額外乾脆可用expo.out）；在入場動畫上永遠不要使用.inOut。 - 每個級聯只有一個方向。
- 將「最終」單詞拆分為片段以延長高潮；片段移動更遠。
- 穩定後，群組通常會滑動以為下一個節拍騰出空間 — 這就是 §7。
7. 微調曲線（場景內群組滑動 — 非接縫）
慢-快-慢地重新定位一個已構圖的群組（單詞行、卡片堆疊、列表）以揭示內容或騰出空間。沒有一個內建的緩動能產生這種效果 — power4.inOut 會猛然停止。將三個補間鏈接到一個屬性上：
| 階段 | 緩動 | 距離 | 時間 | 感受 |
|---|---|---|---|---|
| 1 加速開始 | power3.in | 約 10% | 約 20% | 幾乎不動 — 運動被記錄，沒有衝擊 |
| 2 爆發 | none（線性） | 約 65% | 約 18% | 約 2 倍平均像素 / 影格 — 有目的感 |
| 3 尾聲 | power4.out | 約 25% | 約 62% | 衰減蠕行至靜止 — 消除猛然停止的感覺 |
規則：
- 尾聲的時間 ≥ 加速開始時間的 3 倍。如果仍有猛然停止的感覺：延長尾聲的時間（不是距離）或使用
power5.out。 - 階段 2 保持線性 — 為其添加緩動會失去爆發的對比度。
- 在「階段 2」期間揭示新內容 — 爆發會掩蓋其出現。
- 垂直方向使用相同比例；按比例縮放距離，保持時間比例。
選擇變體
| 縮放穿越 | 反向縮放穿越 | 切曲線 | 瀑布剪輯 | |
|---|---|---|---|---|
| 範圍 | 場景內文字替換 | 到場 / 轉折點節拍 | 場景之間 | 文字到文字接縫 |
| Z 符號 / 軸線 | 增大（推動） | 縮小（拉動） | X / Y | X，逐字 |
| 移動 / 縮放 | 1→1.2，然後 0.75→1 | 1→0.8，然後 1.25→1 | ±230px | ±230px |
| 峰值模糊 | 10px 文字 / 18–20 全螢幕 | 10px 文字 / 18–20 全螢幕 | 8–10px 可選 | 無 |
| 緩動 | power3.in / expo.out | power3.in / expo.out | power4.in / power4.out | power4.in / power4.out |
| 感覺 | 深入探索 | 抵達 | 被橫向帶著走 | 一道橫跨接縫的波浪 |
反模式
| 不要這樣做 | 原因 |
|---|---|
| 對拉動縮放使用 >1 的入場縮放並期望它縮小 | 反向縮放「從」>1「縮小」— 如果你將縮放設為 in: 1.5，它必須從 1.5 縮小到 1.0。當你期望縮小時，這會意外地產生一個推入效果。 |