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

OpenMontage HyperFrames 光效转场实战Light Leak、Overexposure Burn 与 Film Burn 的 GSAP 时间线配方【免费下载链接】OpenMontageWorlds 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类别恰好覆盖本文的三个配方TypeTransitions参考文件LightLight leak, overexposure burn, film burntransitions/css-light.md从 总览文档 的情绪 → 转场类型映射表看光效家族有明确的情绪语义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.mdold—— 正在退出的场景内容选择器outgoing scene-inner selectornew—— 即将进入的场景内容选择器incomingT—— 本次转场在时间线上的起始秒数所有 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 运行时统一驱动 seekdiv idroot >// 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升温T ~ T0.35#leak-warm用power1.in缓入到 0.4建立暖色氛围两个光带#leak-1/#leak-2以错开的 0.05s 间隔stagger启动sine.inOut缓动让它们平滑漂移 300px / 200px透明度爬到 0.9 / 0.8。错相位 不同距离是光看起来自然的关键——同步运动会产生机械感。峰值硬切T0.35 ~ T0.45暖层在 0.15s 内被power2.in推到 0.6 的峰值紧接着在T 0.45用两条tl.set()零时长硬切完成新旧场景交换。set而非to保证了切换原子性且符合确定性渲染契约可 seek、可回退。退潮T0.5 起暖层与光带向 0 透明度回落光带继续向右漂到 600pxpower2.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 级联 双段遮罩级联的错位叠加亮度两段加速T ~ T0.4第一段power1.in把 brightness 推到 1.5 并微缩放到 1.03第二段换power2.in猛推到 3、缩放 1.06。两段缓动曲线不同形成先渐亮、后爆亮的过曝物理感——相机曝光过冲正是先缓后陡的。遮罩错峰跟进#flash-overlay从T 0.15开始爬升到 0.5比亮度动画晚 0.15s再在T 0.4用 0.15s 冲到 1。遮罩滞后于亮度变化避免白闪先于过曝的不真实顺序。峰值原子切换T0.55tl.set(old, { opacity: 0, filter: brightness(1), scale: 1 }, T 0.55)一次性完成三件事——隐藏旧场景、重置 filter 与 scale防止新场景继承过曝状态也保证 seek 回退时状态干净、同时set显示新场景。这是swap at peak white的实现切换发生在白色峰值之下观众感知不到场景边界。白幕退去T0.55 起遮罩用 0.35spower2.out淡出白色落下露出已完成切换的新场景。总时长约 0.9s0.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 逐段解析三层错峰渗入T ~ T0.55三个叠加层以 0.05s 间隔依次启动位移距离不同-300 / -500 / -200px时长也各异0.4 / 0.5 / 0.45s。三层的相位差让燃烧前沿呈现不规则的波状推进——若三层完全同步画面会退化成一次普通的白色渐显。所有层都向左移动负 x对应火从右向左烧的方向语义若需要镜像方向统一取正 x 即可。峰值硬切T0.35与前两个配方相同的tl.set()原子交换——在三层暖光覆盖到峰值时切换场景。注意切换点早于最慢层#burn-b到达全不透明说明设计意图是烧到一半就切比完全烧满更符合胶片燃烧的不确定性。错峰熄灭T0.45 ~ T0.55熄灭顺序与点燃顺序一致a → b → c各隔 0.05s各自用power2.out在 0.3s 内淡出火焰从前沿退回收场。六、三个配方的工程对比与选型建议维度Light LeakOverexposure BurnFilm Burn叠加层1 暖色层 2–3 光带2400px 径向渐变1 个#flash-overlay 场景本体brightness()3 个大尺寸径向渐变层琥珀/橙/红作用对象纯叠加层场景本体不动场景本体 filter 遮罩纯叠加层场景本体不动交换方式tl.set()硬切于 T0.45tl.set()硬切于 T0.55并同时重置 filter/scaletl.set()硬切于 T0.35典型时长~0.85sCalm accent~0.9sHigh 能量可压至 0.3s~0.85sRetro 主转场主要缓动sine.inOutpower1/2双段power1.in→power2.inpower1.in进 /power2.out出适用情绪Warm / invitingDramatic / cinematic, High 能量爆点Retro / analog三者共享同一套工程纪律大于帧面的渐变层保证无可见边缘、峰值时刻tl.set()原子交换、切换后清理叠加层、旧场景在转场前完全可见。把这套纪律当作模板即可按 catalog 中框架能渲染浏览器能跑的任何东西的思路衍生出自定义光效转场。七、源码纵深为什么光效家族不在自动注入注册表中理解这三个配方的适用边界需要看 TRANSITION-REGISTRY.md。该注册表是 PLVproduct-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 声明相互印证。八、收尾把光效转场放进一支完整视频落地时的完整路径是按 overview.md 的情绪/能量/叙事位置三张表选型暖片主转场选 light leak0.5–0.8ssine.inOut爆点选 overexposure burn复古质感选 film burn用 catalog.md 的场景模板搭建 1920×1080 双场景骨架写好叠加层 DOM光带/燃烧层务必 2400px 且无边框感以本文为准逐字移植对应配方只替换old/new选择器与T值遵守 overview 的多场景规则转场即退出、入场用gsap.fromTo()、禁止在转场前额外淡出渲染与回放依赖window.__timelines[main]的 paused 时间线契约保持 seek-safe、无随机源。参考文件清单css-light.md、catalog.md、overview.md、TRANSITION-REGISTRY.md、SKILL.md、hyperframes.md。【免费下载链接】OpenMontageWorlds 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考