企业官网建设流程全解析

OpenMontage HyperFrames 光效转场实战：Light Leak、Overexposure Burn 与 Film Burn 的 GSAP 时间线配方

【免费下载链接】OpenMontageWorld's first open-source, agentic video production system. 12 production pipelines, 100+ tools, 700+ agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage

在 HyperFrames 多场景合成体系中，场景之间的过渡决定了整支视频的节奏感与情绪走向。本文以技能文档css-light.md为核心，完整讲解 Light（光效）家族的三类 CSS 转场配方——Light Leak（光晕泄漏）、Overexposure Burn（过曝烧白）、Film Burn（胶片燃烧）：给出可直接复用的 GSAP timeline 代码、必须遵守的 DOM 结构与硬规则，并结合转场目录（catalog）、总览（overview）与转场注册表（TRANSITION-REGISTRY）说明它们在整个转场体系中的定位、选型依据与自动化注入边界。

一、光效转场在 HyperFrames 转场体系中的位置

HyperFrames 的动画技能将"场景间转场"（scene-to-scene transitions）组织为overview.md（选型方法论）+catalog.md（硬规则与路由表）+ 按类别拆分的css-*.md实现参考文件。转场目录将 CSS 转场分为 13 个类别，其中Light类别恰好覆盖本文的三个配方：

从 总览文档 的"情绪 → 转场类型"映射表看，光效家族有明确的情绪语义：

• Warm / inviting（温暖、有亲和力）：Light leak、film burn 是首选——"软边缘、暖色冲刷，没有任何锐利或机械感"；
• Dramatic / cinematic（戏剧化、电影感）：overexposure 与 zoom through、gravity drop、color dip to black 并列，主打"尺度、重量、光的极端"；
• Retro / analog（复古、胶片感）：film burn、light leak 与 VHS、clock wipe 同组，表现"有机缺陷、暖色渗染"；
• 按能量分档时，overexposure 属于 High 能量（promo、体育、音乐、发布会场景，时长 0.15–0.3s、缓动power4/expo），而light leak 属于 Calm 能量的 Accent 选项（0.5–0.8s、sine.inOut/power1）。

这意味着：一支温暖的品牌片里，light leak / film burn 是安全的主转场；而高能量的宣传片里，overexposure burn 是"爆点"式的强调转场。选型时总览文档给出的原则是"1 个主转场（承担 60–70% 的场景切换）+ 1–2 个强调转场"，不要每个场景都换。

二、通用约定与硬性规则：写代码之前必须知道的事

三个配方的代码都基于同一套约定（来自 catalog.md）：

• old—— 正在退出的场景内容选择器（outgoing scene-inner selector）；
• new—— 即将进入的场景内容选择器（incoming）；
• T—— 本次转场在时间线上的起始秒数，所有 tween 的位置参数都相对T偏移；
• 每个转场遵循统一五步结构：定位新场景 → 动画送旧场景 → 切换（swap）→ 动画迎入新场景 → 清理叠加层。

2.1 场景骨架模板

CSS 转场作用于标准的双场景 HTML 结构，catalog 给出的模板要点是：1920×1080 根容器（data-composition-id/data-start/data-duration只挂在根 div 上），场景 1 默认可见，场景 2 及之后在容器 div上设置opacity: 0，由 GSAP 负责揭示；时间线以paused: true创建并注册到window.__timelines["main"]，由 HyperFrames 运行时统一驱动 seek：

<div id="root" >// Warm tint washes over entire frame tl.to("#leak-warm", { opacity: 0.4, duration: 0.3, ease: "power1.in" }, T); // Bright leak elements drift in tl.to("#leak-1", { opacity: 0.9, x: 300, duration: 0.5, ease: "sine.inOut" }, T + 0.05); tl.to("#leak-2", { opacity: 0.8, x: 200, duration: 0.6, ease: "sine.inOut" }, T + 0.1); // Peak warmth then swap tl.to("#leak-warm", { opacity: 0.6, duration: 0.15, ease: "power2.in" }, T + 0.35); tl.set(old, { opacity: 0 }, T + 0.45); tl.set(new, { opacity: 1 }, T + 0.45); // Leak fades tl.to("#leak-warm", { opacity: 0, duration: 0.4, ease: "power2.out" }, T + 0.5); tl.to("#leak-1", { opacity: 0, x: 600, duration: 0.35, ease: "power1.out" }, T + 0.5);

3.3 逐段解析

配方分为"升温 → 峰值硬切 → 退潮"三个阶段，全程约 0.85s：

1. 升温（T ~ T+0.35）：#leak-warm用power1.in缓入到 0.4，建立暖色氛围；两个光带#leak-1/#leak-2以错开的 0.05s 间隔（stagger）启动，sine.inOut缓动让它们平滑漂移 300px / 200px，透明度爬到 0.9 / 0.8。错相位 + 不同距离是"光"看起来自然的关键——同步运动会产生机械感。
2. 峰值硬切（T+0.35 ~ T+0.45）：暖层在 0.15s 内被power2.in推到 0.6 的峰值；紧接着在T + 0.45用两条tl.set()零时长硬切完成新旧场景交换。set而非to保证了切换原子性，且符合确定性渲染契约（可 seek、可回退）。
3. 退潮（T+0.5 起）：暖层与光带向 0 透明度回落，光带继续向右漂到 600px，power2.out让光"散开"而不是"关掉"。峰值到退潮之间留了 0.05s 的过冲余量，视觉上形成"光冲过、然后落下"的呼吸感。

注意光带只在退潮阶段继续移动（x 从 300 累加到 600），进入阶段位移较小——这与真实相机光泄漏"光带斜扫过片门"的运动特征一致。

四、Overexposure Burn：过曝烧白转场

4.1 效果与 DOM 要求

Overexposure Burn 模拟"画面逐步过曝成纯白，在纯白峰值完成切换，白色再褪去露出新场景"。按硬规则，核心是在旧场景本体上推filter: brightness()，白色遮罩（#flash-overlay）只是辅助，负责把峰值白做实。

4.2 时间线配方（完整代码）

tl.to(old, { filter: "brightness(1.5)", scale: 1.03, duration: 0.2, ease: "power1.in" }, T); tl.to(old, { filter: "brightness(3)", scale: 1.06, duration: 0.2, ease: "power2.in" }, T + 0.2); tl.to("#flash-overlay", { opacity: 0.5, duration: 0.25, ease: "power1.in" }, T + 0.15); tl.to("#flash-overlay", { opacity: 1, duration: 0.15, ease: "power2.in" }, T + 0.4); tl.set(old, { opacity: 0, filter: "brightness(1)", scale: 1 }, T + 0.55); tl.set(new, { opacity: 1 }, T + 0.55); tl.to("#flash-overlay", { opacity: 0, duration: 0.35, ease: "power2.out" }, T + 0.55);

4.3 逐段解析

这条时间线的巧妙之处在于双段 brightness 级联 + 双段遮罩级联的错位叠加：

1. 亮度两段加速（T ~ T+0.4）：第一段power1.in把 brightness 推到 1.5 并微缩放到 1.03；第二段换power2.in猛推到 3、缩放 1.06。两段缓动曲线不同，形成"先渐亮、后爆亮"的过曝物理感——相机曝光过冲正是先缓后陡的。
2. 遮罩错峰跟进：#flash-overlay从T + 0.15开始爬升到 0.5，比亮度动画晚 0.15s，再在T + 0.4用 0.15s 冲到 1。遮罩滞后于亮度变化，避免"白闪先于过曝"的不真实顺序。
3. 峰值原子切换（T+0.55）：tl.set(old, { opacity: 0, filter: "brightness(1)", scale: 1 }, T + 0.55)一次性完成三件事——隐藏旧场景、重置 filter 与 scale（防止新场景继承过曝状态，也保证 seek 回退时状态干净）、同时set显示新场景。这是"swap at peak white"的实现：切换发生在白色峰值之下，观众感知不到场景边界。
4. 白幕退去（T+0.55 起）：遮罩用 0.35spower2.out淡出，白色"落下"露出已完成切换的新场景。

总时长约 0.9s（0.55s 上升 + 0.35s 回落）。按 overview 的能量分档，High 能量场景可整体压缩到 0.15–0.3s 级别，此时应等比缩短各段并把 brightness 峰值保持住——缓动档位（power4/expo）也随之上调。

五、Film Burn：胶片燃烧转场

5.1 效果与 DOM 要求

Film Burn 模拟"胶片燃烧时暖色从画面一侧侵入"：三个错峰的暖色叠加层（琥珀 amber、橙 orange、红 red）从同一边缘渗入并漫过画面。文档要求每个叠加层是高 z-index 的大尺寸径向渐变 div（#burn-a/#burn-b/#burn-c），同样遵循"大于帧面、不可见形状"的硬规则。

5.2 时间线配方（完整代码）

tl.to("#burn-a", { opacity: 1, x: -300, duration: 0.4, ease: "power1.in" }, T); tl.to("#burn-b", { opacity: 1, x: -500, duration: 0.5, ease: "power1.in" }, T + 0.05); tl.to("#burn-c", { opacity: 1, x: -200, duration: 0.45, ease: "power1.in" }, T + 0.1); tl.set(old, { opacity: 0 }, T + 0.35); tl.set(new, { opacity: 1 }, T + 0.35); tl.to("#burn-a", { opacity: 0, duration: 0.3, ease: "power2.out" }, T + 0.45); tl.to("#burn-b", { opacity: 0, duration: 0.3, ease: "power2.out" }, T + 0.5); tl.to("#burn-c", { opacity: 0, duration: 0.3, ease: "power2.out" }, T + 0.55);

5.3 逐段解析

1. 三层错峰渗入（T ~ T+0.55）：三个叠加层以 0.05s 间隔依次启动，位移距离不同（-300 / -500 / -200px），时长也各异（0.4 / 0.5 / 0.45s）。三层的"相位差"让燃烧前沿呈现不规则的波状推进——若三层完全同步，画面会退化成一次普通的白色渐显。所有层都向左移动（负 x），对应"火从右向左烧"的方向语义；若需要镜像方向，统一取正 x 即可。
2. 峰值硬切（T+0.35）：与前两个配方相同的tl.set()原子交换——在三层暖光覆盖到峰值时切换场景。注意切换点早于最慢层（#burn-b）到达全不透明，说明设计意图是"烧到一半就切"，比完全烧满更符合胶片燃烧的不确定性。
3. 错峰熄灭（T+0.45 ~ T+0.55）：熄灭顺序与点燃顺序一致（a → b → c，各隔 0.05s），各自用power2.out在 0.3s 内淡出，火焰"从前沿退回"收场。

六、三个配方的工程对比与选型建议

三者共享同一套工程纪律：大于帧面的渐变层保证无可见边缘、峰值时刻tl.set()原子交换、切换后清理叠加层、旧场景在转场前完全可见。把这套纪律当作模板，即可按 catalog 中"框架能渲染浏览器能跑的任何东西"的思路，衍生出自定义光效转场。

七、源码纵深：为什么光效家族不在自动注入注册表中

理解这三个配方的适用边界，需要看 TRANSITION-REGISTRY.md。该注册表是 PLV（product-launch-video）流水线中确定性注入器（product-launch-video/scripts/inject-transitions.mjs）的机器事实源，它只收录Tier-B 就绪的转场——即纯 transform / opacity / filter 作用于两个场景 clip 包装器（#el-<sid>）、不注入叠加层 DOM、不需要场景侧配合的类型（crossfade、blur-crossfade、push-slide、zoom-through、squeeze 五种）。

注册表开篇明确声明：

Overlay families (staggered blocks, blinds,light leak, grid dissolve, page burn) and shader transitions are deferred to later phases.

也就是说，light leak 这类需要额外注入叠加层 DOM 的光效家族（film burn、overexposure burn 同理）目前不走自动注入通道，而是由作者按本文的css-light.md配方手动写入index.html的window.__timelines["main"]。这也解释了为什么 catalog 坚持"场景 2+ 默认opacity: 0、GSAP 负责揭示"的 DOM 约定——手动配方与注入器产出共享同一套运行时契约，但只有 Tier-B 类型被流水线托管。对使用者而言的实操结论是：用流水线自动生成转场时，光效家族要自己在场景 HTML 里搭叠加层并编写时间线；而注册表中的 Tier-B 类型则由注入器统一改data-duration/data-start、重排 track 并盖章模板。

此外，从 skills/meta/bespoke-composition.md 可以看到，css-light与其他 overlay 家族一样被点名为"需要叠加层配合"的定制组合类别——与注册表的 deferred 声明相互印证。

八、收尾：把光效转场放进一支完整视频

落地时的完整路径是：

1. 按 overview.md 的情绪/能量/叙事位置三张表选型：暖片主转场选 light leak（0.5–0.8s，sine.inOut），爆点选 overexposure burn，复古质感选 film burn；
2. 用 catalog.md 的场景模板搭建 1920×1080 双场景骨架，写好叠加层 DOM（光带/燃烧层务必 2400px+ 且无边框感）；
3. 以本文为准逐字移植对应配方，只替换old/new选择器与T值；
4. 遵守 overview 的多场景规则：转场即退出、入场用gsap.fromTo()、禁止在转场前额外淡出；
5. 渲染与回放依赖window.__timelines["main"]的 paused 时间线契约，保持 seek-safe、无随机源。

参考文件清单：css-light.md、catalog.md、overview.md、TRANSITION-REGISTRY.md、SKILL.md、hyperframes.md。

【免费下载链接】OpenMontageWorld's first open-source, agentic video production system. 12 production pipelines, 100+ tools, 700+ agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage