cut-the-curve

Cut the Curve — 技术目录

五种 SEAM 技术，遵循同一原则：在速度峰值处剪切，并确保剪切两侧的方向和速度匹配——再加上两种场景内技术（§6 入场、§7 滑动）。 接缝 LAW——向量定律、当前、账本、Seam Gate——都位于 motion-doctrine 中；请先阅读。本文档介绍参数和机制。 所有 GSAP 代码模板（worker + registry）：examples/gsap-implementation.md。

目录

#	技术	范围	轴	适用场景
1	Zoom-Through（向前）	场景内文本切换	Z，朝向观众	深入同一想法
2	Inverse Zoom-Through	入场／揭晓节拍	Z，远离观众	更宏大的事物登场
3	Cut the Curve	场景之间	X / Y	默认边界，影片的当前
4	Waterfall Cut	文本到文本的接缝	X，逐词	大字节拍之间逐词交接
5	Rack-Focus Blur-Cut	同一表面状态切换	X / Y / Z	唯一需要让观众看见的剪切——DSLR 拉焦效果
6	Waterfall Entry	场景内 ARRIVAL（无接缝）	Y，从下方	标题卡、片段开场、列表引入
7	Nudge Curve	场景内整体滑动（无接缝）	X / Y	重新摆放已编排的整体，为其他内容腾出空间

Z 方向的符号

在 Z 轴上，“同一轴”还不够——剪切两侧的 d(scale)/dt 符号必须匹配：

Z 向量	退出缩放	入场缩放	变体
推进（向前）	变大 1 → 1.2	变大 0.75 → 1	zoom-through
拉远（向后）	变小 1 → 0.8	变小 1.25 → 1	inverse zoom-through

禁止的镜像：远离的退出接上从小变大的入场（拉远反转成推进——这是常见情况，因为从小变大是元素默认的入场方式）；以及推进退出接上从超大状态缩回。这一要求也适用于接缝窗口期间（剪切 + 约 0.5s）传入场景自身的入场动画，而不仅仅是容器补间：保持传入画面已编排好的状态，或者编写符号匹配的入场动画。请按照 Seam Gate 规则 7 进行验证。

模糊逻辑（所有 Z 变体）

主体	峰值模糊	原因
文本缩放（标题、词组）	10px	20px 会让字形拖影——剪切看起来像故障，而不是速度
全帧表面（窗口、卡片、屏幕截图）	18–20px	大表面上的轻微模糊看起来像渲染卡顿

交换帧两侧的峰值模糊必须相同。模糊容器，绝不要模糊子元素。

---

1. 穿透式缩放（向前）

沿 Z 轴速度匹配的切换；两段文本绝不同时可见。 所有内容都放大：即将离场的文本加速朝镜头移动，在模糊峰值处通过硬切换隐藏，随后入场文本继续放大，进入焦平面。仅用于标题和短语。总时长约为 0.4s。

阶段	缩放	模糊	不透明度	缓动	时长
离场	1 → 1.2	0 → 10px	1 → 0.15	power3.in（不透明度：单独使用 none 补间）	0.2s
切换（tl.set）	入场：0.75	10px	出场：0 / 入场：0.15	—	—
入场	0.75 → 1	10 → 0px	0.15 → 1	expo.out	0.5s

离场不透明度必须使用独立的线性补间——power3.in 会让不透明度长时间保持在接近 1 的状态。 入场时，所有属性都使用 expo.out。

2. 反向穿透式缩放（向后）

向后拉远的镜像效果：即将离场的元素后退；入场元素以超大尺寸出现（仿佛就在镜头之后），再缩回焦平面。所有内容都缩小。用于强调抵达／收束的段落——如揭晓台词、巨大的回复、定格的结尾状态——而非普通的边界切换。总时长约为 0.7s（离场占 30%／入场占 70%）。

阶段	缩放	模糊	不透明度	缓动	时长
离场	1 → 0.8	0 → 10px	1 → 0.15	power3.in（不透明度：单独使用 none 补间）	~0.2s
切换（tl.set）	入场：1.25	10px	出场：0 / 入场：0.15	—	—
入场	1.25 → 1	10 → 0px	0.15 → 1	expo.out	~0.5s

模糊度按文字尺寸设为 10px；仅当两侧都是全出血画面时才使用 18–20px。

符号规则： 入场场景应作为一个已编排好的画面置于收缩中的包装层内到达——切换衔接期间不得从小尺寸放大出现。分阶段入场应在收缩稳定后进行，或从 ≥1 的尺寸开始并收缩。

3. 切断曲线（默认场景边界）

沿 X/Y 轴进行速度匹配切换——这是所有场景间边界的默认方式，是影片中的常规手法，而非强调效果。即将离场的主视觉元素沿一个方向加速，切换在运动途中发生，入场的主视觉元素沿相同方向继续运动并减速。总时长约为 0.6s；方向为 LEFT / RIGHT / UP / DOWN（默认 LEFT）。

部分位移： 约为画面的 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.3s，运动为 0.3–0.34s）；入场元素在路径中段以约 0.35 的不透明度开始显现。安排最后一个淡出元素恰好在切换点消失——如果中间出现什么都不动的空档，画面就会显得乏味。
• 离场 0.2–0.4s；入场时长 ≥ 离场时长。可选模糊度为 8–10px。
• 舞台底色： #root 必须是不透明的 （background: var(--canvas-deep, var(--canvas, #000))）——切换窗口中会出现一个不透明度总和 < 1 的间隙，否则会闪白（参见 seam-craft）。

push-slide 也存在，但不符合部分位移和运动中切换的要求；优先使用切断曲线。

4. 瀑布式切换（逐词切线）

按词粒度切线——这是文本间切换中最强的向左切换。 退出的词各自沿着曲线加速离场；进入的词则在运动过程中接连涌入—— 视线会沿着这道波浪越过切换边界。

**适用范围：**由工作线程在一个多节拍合成中编写（堆叠的全帧 .beat 图层）， 不是注册表／注入器类型——它对词语片段进行补间，而不是对片段包装器进行补间。文本节拍块 的进入和退出边界仍使用常规注册表转场。不计入 2–3 个转场的预算。

参数	值	原因
位移	±230px（约占画面 12%）	部分位移 + 速度感 > 全画面推移
退出	0.34s power4.in	加速本身就是切换
退出淡出	0.18s，与 x 同时开始	词语在位移约 25–30% 时消失——不留拖影
退出错开	按阅读顺序 +0.022s	逐行剥离，而非整块滑动
进入	0.3s power4.out	合成的后半段——速度匹配
进入起始不透明度	0.35	从路径中段开始显现；二值的 0→1 会突然跳出
进入间隔	0.05s × 0.84 衰减	加速级联，逐步收束为整体

规则：

• 每条链只使用一个方向，顺势而行。反向缩放只用于链条的 ARRIVAL 节拍。
• 在构建时将所有词预设为 x: +230, opacity: 0——仅设置 immediateRender: false 仍会让尚未开始动画的词在静止状态下可见。
• 较短的首个节拍可以整行退出：淡出应在切换前约 0.02s 结束，这样下一批词点亮时它仍在划过画面——不留空档。
• 仅使用变换／不透明度（可安全定位）；适用于不透明的舞台背景。

5. 拉焦模糊切换（可见切换）

这是唯一一种能看到切换的变体：失焦模糊的尖峰会掩盖单帧硬切—— 模拟手持 DSLR 的拉焦效果。仅在同一视觉主题内切换同一表面状态时偶尔使用， 绝不要作为默认边界效果。

与其他效果的区别：退出内容在切换前始终保持完全不透明（由模糊掩盖 切换——不提前淡出）；采用 power2.in / power2.out 缓动（柔和光学效果，而非惯性）。

规则：

• 仅在叙事节拍处触发，每约 8s 最多一次；绝不在字幕中途或停留期间触发。
• 在模糊达到峰值时切换（≥6px；峰值 8–12px，最大不超过 16–18px）——在上升过程中切换会显露切换痕迹。
• 轻微缩放（约 1.06，模拟镜头呼吸）能强化光学效果。
• 两侧方向一致——方向规则仍然适用。进入时长 ≥ 退出时长。
• 模糊应作用于包装器；同一元素的同一个补间中绝不要同时使用模糊和不透明度（无头 合成错误）；绝不要直接模糊 <video>（请将其包裹起来）。

---

6. 瀑布式入场（场景内到达——不是接缝）

错落式到达级联：文字／元素从下方飞速进入（方向始终一致），每个元素都在前一个元素落定前开始——形成加速的波浪，最终收束为布局完整的画面。适用于标题卡片、段落开场、列表／功能介绍。接缝版见 §4；请勿混用两者的规则：

	§6 入场（到达）	§4 瀑布式切换（接缝）
不透明度	通过入场时的 tl.set 实现二元 0→1——绝不淡入	在路径中段 0.35 处点亮——淡入就是速度技巧
默认轴向	Y，从下方进入	X，顺着流向
离场方向	无	文字沿镜像的 power4.in 曲线逐渐离场

编排：

• 重叠，不要排队——下一个元素在前一个元素落定前 ±2 帧内开始；间隔在级联过程中逐渐缩短；最后一个元素瞬间到位。
• 速度随权重变化——较重／锚点元素移动距离更远、耗时更长；较轻的文字／标点则快速到位：

参数	锚点／重元素	普通文字	轻元素／标点
Y 偏移	60–80px	40–50px	30–48px
时长	0.16–0.20s	0.13–0.16s	0.10–0.13s
重叠	间隔 0–2f	重叠 1f	重叠 1–2f

• 使用 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
感受	持续推进	逐渐抵达	被横向带动	横跨衔接处的波浪

反模式

不要	应改为
缩放穿越期间同时显示两段文字	在模糊峰值处硬切，一次只显示一段文字
文本大小的主体使用 20px 模糊	文本使用 10px；仅全屏画面使用 18–20px
反向缩放退出 → 从小放大进入（或推出 → 超大尺寸回缩）	匹配缩放速度的正负号；在切点±0.1s 处验证
入场合成自身的放大介绍叠加在 Z 接缝包装层补间之下	以完整构图入场；在接缝稳定后安排入场，或匹配正负号
切换时模糊度／不透明度不匹配	切帧处的值完全相同
柔和的入场缓动（power2.out）	与退出相反：power4.out / expo.out
完全移出屏幕的退出／入场	部分移动（约 12%）＋提前淡出
切点任一侧使用 .inOut 缓动	镜像使用 power4.in / power4.out
单个元素在切点很久之前就淡出	淡出在切点前约 0.02s 结束，或使用逐词级联
瀑布式级联中间距相等	每个词的间距缩小 ×0.84
对正文使用缩放穿越	仅用于标题和短语
场景切换不使用切线	这是默认边界
连续边界方向相反	当前方向保持一致；将保留的向量用于表达含义
窗口中段切换时 #root 背后未绘制	不透明的舞台底色
排队入场（每个都等待前一个稳定下来）	重叠 ±1–2 帧——级联是波浪，不是队列
级联中每个元素使用相同的偏移／时长	按权重变化：锚点移动更远，标点快速弹入
§6 入场时逐渐降低不透明度	通过 tl.set 实现二元的 0→1——淡出会破坏弹入效果（接缝切换要淡出；入场不需要）
组滑动使用单一缓动（power4.inOut、slow()）	§7 的三阶段链
推动尾段短于渐入时长的 3 倍	延长尾段的时间，而非距离

代码

所有 GSAP 模板——由 worker 编写的版本、注册表 gsap_template、切线与缩放穿越组合、瀑布式 DOM/CSS/JS、焦点跟踪——都位于 examples/gsap-implementation.md。