OpenMontage HyperFrames 径向/形状场景转场：用 GSAP clipPath 实现 Circle Iris、Diamond Iris 与 Diagonal Split

OpenMontage HyperFrames 径向/形状场景转场：用 GSAP clipPath 实现 Circle Iris、Diamond Iris 与 Diagonal Split

【免费下载链接】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

在 OpenMontage 的 HyperFrames 动画技能体系中，场景之间的转场（Scene Transitions）有一套完整的知识分层：转场总览 负责回答“选哪种转场”，转场目录 负责给出硬规则与场景模板，而transitions/目录下按类别拆分的css-*.md文件则给出可直接落地的 GSAP 代码。本文聚焦其中的 css-radial.md——径向/形状（Radial / Shape）类别，讲解 Circle Iris、Diamond Iris、Diagonal Split 三种基于 CSSclip-path的遮罩转场的完整实现代码、z-index 纪律，以及它们必须遵守的 HyperFrames 确定性渲染契约，帮助你在多场景合成中做出可复现、可寻帧的揭幕式转场。

径向/形状转场在转场体系中的位置

hyperframes-animation技能把 CSS 转场划分为 Push、Radial/Shape、3D、Scale/Zoom、Dissolve、Cover、Light、Distortion、Mechanical、Grid、Other、Blur、Destruction 等类别，catalog.md 中的路由表明确将 Circle iris、Diamond iris、Diagonal split 三者归入 Radial / Shape，参考文件即transitions/css-radial.md。这一类别的共同特征是：不靠位移或滤镜“推”走旧场景，而是用裁剪路径（circle / polygon）控制一个可见窗口，让新场景从几何形状中“长”出来，或让旧场景收缩成一个形状后消失。

总览文档 给出的选择建议也印证了这类转场的适用情境：

• 情绪（Mood）维度：Circle iris 被列为Playful / fun情绪的首选之一（“Overshoot, bounce, rotation, expansion”），Diagonal split 则出现在Editorial / magazine一档（“Like turning a page or slicing a layout. Clean directional movement.”）；
• 能量（Energy）维度：Circle iris 属于低能量（Calm）场景可用的Accent转场，即适合作为整片 60-70% 主转场之外的点缀；
• 叙事位置（Narrative Position）：开场用“最有辨识度”的转场（0.4-0.6s）为全片定调；高潮/主角揭示处用最夸张的 Accent。径向揭幕天然适合承担这两种位置。

总览文档同时给出了一组通用的时长/缓动预设，写转场时可以直接取用：

css-radial.md中三个示例统一采用 0.5s 时长、power2.out/power3.inOut缓动，正落在smooth预设与 Medium 能量区间（0.3-0.5s）之内。

前置约定：场景模板与时间线契约

所有 CSS 转场代码运行在同一套场景骨架之上。catalog.md 提供了标准场景模板，核心结构是：

<div id="root" >tl.set(new, { opacity: 1 }, T); tl.fromTo(new, { clipPath: "circle(0% at 50% 50%)" }, { clipPath: "circle(75% at 50% 50%)", duration: 0.5, ease: "power2.out" }, T); tl.set(old, { opacity: 0 }, T + 0.5);

逐行解析：

• 第 1 步，定位新场景：tl.set(new, { opacity: 1 }, T)在T时刻把新场景容器（初始 CSSopacity: 0）一次性置为可见。此时它还没有被 clipPath 约束，但下一步的fromTo起点立即把可见窗口压到circle(0%)，两帧之间不会暴露完整画面——这是 catalog 规定的标准顺序“position new scene → animate outgoing → swap → animate incoming → clean up”中“position new scene”的落地；
• 第 2 步，动画揭幕：fromTo将clipPath从circle(0% at 50% 50%)补间到circle(75% at 50% 50%)。注意终点是75% 而不是 100%：circle()的半径以“到参考点距离的最大值”为 100%，在 1920×1080 的非正方形画幅下，50% 半径已覆盖四角，75% 保证完全出满画面且留有余量，避免边缘出现未揭开的细缝；
• 缓动选择：power2.out前快后慢，符合“揭幕”的物理直觉——镜头光圈快速打开、随后稳定；
• 第 3 步，swap：tl.set(old, { opacity: 0 }, T + 0.5)在转场结束时刻用瞬时 set把旧场景整体撤下。旧场景在整个 0.5s 内保持完全可见（没有提前淡出），新场景从它头顶的圆形窗口里透出——旧场景是“背景布”，新场景是“剪影”，这正是径向转场与交叉淡化在视觉上的本质区别。

circle()的半径与圆心都可独立补间，因此同一个骨架可以派生出“从左上方展开”“多点扩散”等变体，只需改写at X% Y%的起止值。

Diamond Iris：菱形（钻石形）展开

效果描述：Expanding diamond shape from center.——一个菱形从中心放大，用多边形裁剪做径向揭幕的“硬朗”版本。实现代码（css-radial.md）：

tl.set(new, { opacity: 1 }, T); tl.fromTo(new, { clipPath: "polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)" }, { clipPath: "polygon(50% -20%, 120% 50%, 50% 120%, -20% 50%)", duration: 0.5, ease: "power2.out" }, T); tl.set(old, { opacity: 0 }, T + 0.5);

三个技术要点：

1. 多边形插值的前提是顶点数一致：GSAP 对clip-path: polygon()的补间是逐顶点插值，起点与终点必须保持相同的顶点数量与顺序，否则插值结果会交叉错乱。起点把 4 个顶点全部收缩到画面中心(50% 50%)形成零面积菱形；终点展开为上(50% -20%)、右(120% 50%)、下(50% 120%)、左(-20% 50%)，四个顶点都越出画框边界（-20% / 120%），保证菱形完全覆盖 1920×1080 画幅，不留边角；
2. 结构与 Circle Iris 完全同构：同样是tl.set定位 →fromTo揭幕 → 收尾tl.set撤旧，只是把circle()换成了polygon()。这意味着同一套时间轴编排逻辑可以在圆形与多边形之间无缝切换，便于整片保持“径向揭幕”的视觉语言而变换几何性格——圆形偏柔和（Playful/Calm 点缀），菱形偏锐利（更近 Tech/Editorial 气质）；
3. 为什么不用 Star Iris：catalog 的硬规则明确将 Star iris 列入“Don't use”，理由是polygon 插值在该形状上会断裂（奇数尖角的星形在收缩/展开时顶点难以稳定对齐）。这从侧面解释了 Diamond Iris 坚持 4 顶点对 4 顶点的原因：偶数、轴对称的顶点布局是多边形 clip 插值最稳定的形态。

Diagonal Split：对角分割收缩

前两者是“新场景展开”，Diagonal Split 反转为“旧场景收缩”：旧画面缩成左上角的一个三角形后消失，露出背后的新场景。实现代码（css-radial.md）：

tl.set(new, { opacity: 1, zIndex: 1 }, T); tl.set(old, { zIndex: 10, clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" }, T); tl.to(old, { clipPath: "polygon(60% 0%, 100% 0%, 100% 40%, 60% 0%)", duration: 0.5, ease: "power3.inOut" }, T); tl.set(old, { opacity: 0, zIndex: "auto", clipPath: "none" }, T + 0.5); tl.set(new, { zIndex: "auto" }, T + 0.5);

这里出现了一个与前两个示例的关键差异：z-index 显式管理，而且 catalog 把它列为硬规则——“Gravity drop, zoom out,diagonal splitneed outgoing scene ON TOP (zIndex: 10) so it exits while revealing the new scene behind (zIndex: 1)”。原因：场景在 DOM 中的书写顺序（scene2 默认压在 scene1 上）决定堆叠，而本转场要求旧场景在上、新场景在下，必须临时颠倒，动画结束后再还原。逐行看：

• tl.set(new, { opacity: 1, zIndex: 1 }, T)：新场景压到底层并显示；
• tl.set(old, { zIndex: 10, clipPath: "polygon(全幅四点)" }, T)：旧场景提到顶层，并先把裁剪路径设为全幅四边形（四个角点(0% 0%), (100% 0%), (100% 100%), (0% 100%)），保证补间起点等于当前视觉状态，避免跳变；
• tl.to(old, { clipPath: "polygon(60% 0%, 100% 0%, 100% 40%, 60% 0%)" ... })：注意这个终点仍有 4 个顶点，但其中(60% 0%)与(60% 0%)重合——GSAP 通过“顶点重合”把四边形退化成以左上角为顶点的三角形（直角边分别占宽 60%、高 40%），旧画面被压缩到右上角一角。这是 polygon 转场里“改变形状而不改顶点数”的典型技巧；
• ease: "power3.inOut"：收缩过程先慢、中段加速、收尾减速，比power2.out更具“版面被切走”的编辑感，与总览表中 Editorial/magazine 情绪的“clean directional movement”定位一致；
• T + 0.5时刻的双tl.set：旧场景一次性复位（opacity: 0, zIndex: "auto", clipPath: "none"），新场景恢复zIndex: "auto"。清理必须用时间线上的tl.set而不是回调——HyperFrames 的逐帧 seek 可能向回倒放，onComplete之类的回调在 seek 路径上不可逆，而时间线上的set在任何时刻 seek 都能得到同一状态。

硬规则与常见陷阱速查

结合 catalog.md 与 overview.md，在复用这三段代码时最容易踩的坑：

验证手段与延伸阅读

写完后可以用技能自带的审计脚本对整条时间线做结构检查：

node skills/hyperframes-animation/scripts/animation-map.mjs <composition-dir> \ --out <composition-dir>/.hyperframes/anim-map

它会枚举注册在window.__timelines上的所有 tween、采样包围盒、输出animation-map.json，用于审查死区、stagger 一致性与生命周期告警（详见 SKILL.md 的 Scripts 一节）。

本文三个示例出自 Radial / Shape 类别；同一目录下的 css-push.md、css-scale.md、css-mechanical.md 等文件以相同骨架（old/new/T）覆盖其余类别。如果需要在 CSS 与 WebGL shader 转场之间混排，或了解 shader 兼容的 CSS 限制（如渐变中禁用transparent关键字、.scene必须显式background-color），继续读 overview.md 的 “CSS vs Shader” 与 “Shader-Compatible CSS Rules” 两节即可。

【免费下载链接】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