OpenMontage HyperFrames 机械类转场实战Shutter 快门与 Clock Wipe 时钟扫场的 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本文基于 OpenMontage 仓库中的技能文档 css-mechanical.md完整解析 HyperFrames 多场景合成中机械类Mechanical转场的两个标准实现——Shutter上下快门与 Clock Wipe时钟扫场覆盖完整 GSAP 时间轴代码、clip-path 九点多边形插值原理、缓动函数选择、多场景合成的硬性规则以及转场代码在确定性与可 seek 渲染约束下的编写规范。读完本篇你可以在 1920×1080 的 HyperFrames 合成中直接写出可复现、可回退seek-safe的机械类转场并理解其背后定位新场景 → 动画退出 → 换场 → 清理覆盖层的通用骨架。文档定位hyperframes-animation 技能中的转场知识体系OpenMontage 将 AI Agent 的视频制作知识组织为技能文件skill其中 SKILL.md 是整个动画技能的路由入口声明了rules原子动效规则/ blueprints多相位场景模板/ transitions场景间转场/ techniques / adapters七种运行时适配的知识分层。转场知识集中在transitions/子目录分三层协作文件职责overview.md转场选型能量/情绪 → 转场类型映射、预设、叙事位置、CSS 与 Shader 取舍catalog.md转场硬性规则、1920×1080 场景模板、各分类的代码入口css-*.md12 个分类每个分类的逐行实现代码机械类即 css-mechanical.mdcatalog.md 给出全部转场分类的完整路由表机械类是其中一员类型转场参考文件PushPush slide, vertical push, elastic push, squeezecss-push.mdRadial / ShapeCircle iris, diamond iris, diagonal splitcss-radial.md3D3D card flipcss-3d.mdScale / ZoomZoom through, zoom outcss-scale.mdDissolveCrossfade, blur crossfade, focus pull, color dipcss-dissolve.mdCoverStaggered blocks, horizontal blinds, vertical blindscss-cover.mdLightLight leak, overexposure burn, film burncss-light.mdDistortionGlitch, chromatic aberration, ripple, VHS tapecss-distortion.mdMechanicalShutter, clock wipecss-mechanical.mdGridGrid dissolvecss-grid.mdOtherGravity drop, morph circlecss-other.mdBlurBlur through, directional blurcss-blur.mdDestructionPage burncss-destruction.md机械类的定位在 overview.md 的情绪 → 转场表中很明确Shutter 属于冷峻/临床与编辑/杂志感情绪内容被机械地压缩、裁切、分栏像翻一页或切一个版面干净的方向性运动Clock Wipe 属于俏皮/趣味与复古/模拟情绪旋转、步进、有机不完美。编写约定场景模板与old/new/T三符号css-mechanical.md 中的代码不依赖任何具体场景 ID它约定了三枚符号见 catalog.md 的CSS Transitions一节old退出场景outgoing scene-inner的选择器new进入场景incoming的选择器T转场开始时间秒。而每一处转场都遵循同一条硬规则catalog.md 原文position new scene → animate outgoing → swap → animate incoming → clean up overlays定位新场景 → 动画退出 → 换场 → 动画进入 → 清理覆盖层。Shutter 与 Clock Wipe 的代码正是这一骨架的两次具体化。catalog.md 同时给出了所有 CSS 转场共享的 1920×1080 场景模板可直接复制运行!DOCTYPE html html langen head meta charsetUTF-8 / script srchttps://cdn.jsdelivr.net/npm/gsap3.14.2/dist/gsap.min.js/script style body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #000; font-family: YOUR FONT, sans-serif; /* compiler embeds supported fonts automatically */ } .scene { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; overflow: hidden; } #scene1 { z-index: 1; background: #color; } #scene2 { z-index: 2; background: #color; opacity: 0; } /style /head body div idroot >tl.to(#shutter-top, { y: 0, duration: 0.25, ease: power3.in }, T); tl.to(#shutter-bot, { y: 0, duration: 0.25, ease: power3.in }, T); tl.set(old, { opacity: 0 }, T 0.25); tl.set(new, { opacity: 1 }, T 0.25); tl.to(#shutter-top, { y: -540, duration: 0.25, ease: power3.out }, T 0.3); tl.to(#shutter-bot, { y: 540, duration: 0.25, ease: power3.out }, T 0.3);面板几何540 1080 / 2代码中的±540不是魔法数字。合成高度为 1080px快门由两块1920×540的面板组成#shutter-top占据上半屏top: 0#shutter-bot占据下半屏top: 540。两块面板的初始状态用y位移推出画外顶部面板y: -540、底部面板y: 540因此y: 0恰好是完全闭合位置y: ±540恰好是完全打开位置。这也印证了 SKILL.md 中空间运动只用 GSAP 变换别名x/y/scale/rotation且布局常量必须预先计算的约束——540 是写死的常量而不是在 tween 时测量 DOM 得来。时间轴结构换场藏在闭合的 0.05s 缓冲里时间动作说明T两块面板y → 00.25spower3.in合拢先慢后快的拍合手感T 0.25tl.set(old, { opacity: 0 })与tl.set(new, { opacity: 1 })画面完全被快门遮挡的瞬间完成场景互换T 0.3两块面板y → ∓5400.25spower3.out重新打开露出新场景两个值得注意的工程细节T 0.25换场、T 0.3才开合闭合完成到重新打开之间有 0.05s 的全黑保持。这保证在任意 seek 采样点上opacity互换都不会发生在面板尚未完全闭合的帧上杜绝了新旧场景穿帮。tl.set而非gsap.set所有状态切换都带时间参数挂在时间轴上。SKILL.md 的 Non-Negotiable Rules 明确禁止对后续场景使用裸gsap.set加载即执行、seek 回退后状态失真带时间参数的tl.set是时间轴成员可随渲染器逐帧定位而完全复现。Shutter 代码全程只用tl.set是这一约束的标准写法。缓动选择也严格对应 gsap-easing-and-stagger.md 的约定.in用于退场、.out用于入场合拢是旧画面的退场用power3.in加速拍合打开是新画面的入场用power3.out减速停稳。整个 Shutter 总时长约 0.55s落在 overview.md 能量表中Medium企业、SaaS、科普0.3–0.5s与开场 0.4–0.6s的区间内。Clock Wipe 时钟扫场九点多边形与四象限步进Clock Wipe 的视觉定义以画面中心为圆心、按象限步进展开的径向多边形扫描模拟时钟指针 12→3→6→9→12 的顺时针 sweep。完整实现见 css-mechanical.md#L20-L29tl.set(new, { opacity: 1, zIndex: 10 }, T); var d 0.1; // duration per quadrant tl.set(new, { clipPath: polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%) }, T); tl.to(new, { clipPath: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%), duration: d, ease: none }, T); tl.to(new, { clipPath: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%), duration: d, ease: none }, T d); tl.to(new, { clipPath: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%, 0% 50%), duration: d, ease: none }, T d*2); tl.to(new, { clipPath: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%, 0% 0%), duration: d, ease: none }, T d*3); tl.set(new, { clipPath: none, zIndex: auto }, T d*4 0.02); tl.set(old, { opacity: 0, zIndex: auto }, T d*4 0.02);为什么必须是 9 个点这是本文件最核心的技术点也是 catalog.md 硬性规则中专门列出的一条Clock wipe: 9-point polygon with intermediate edge positions. Step through 4 quadrants with separate tweens.九点多边形、带中间边缘位置四个象限各用一个独立 tween。原因在 GSAP 对clip-path: polygon()的插值机制两个关键帧的多边形点数必须一致才能逐点插值。四个角12/3/6/9 点方向只描述出 5 个点含中心无法表达扫场的中间状态。因此模板固定为 9 个点——第 1 点恒为中心(50% 50%)其余 8 个点沿边框顺时针排布未到达的点位与已到达的点位重合堆叠在同一坐标上例如初始帧第 2–9 点全部压在(50% 0%)即 12 点钟位置。这些重合点就是原文档说的 intermediate edge positions中间边缘位置它们让每一步 tween 都能平滑地移动一部分点到新的角点而不是跳变。四个 tween 的展开轨迹每步d 0.1s步骤时间多边形覆盖时钟隐喻初始tl.setT仅中心 12 点方向一条零面积线指针停在 12 点tween 1T → Td右上象限3 点方向两角展开12 → 3tween 2Td → T2d右半屏下移到 6 点3 → 6tween 3T2d → T3d四分之三进入左下象限6 → 9tween 4T3d → T4d全幅末点落到 9→129 → 12满屏每步用ease: none线性gsap-easing-and-stagger.md 明确把线性缓动的适用场景写为camera moves with timed counterpoint,mechanical motion。四个等时、等速的象限步进正是机械钟摆/秒针的离散节律——这正是Mechanical分类名下的动效性格。层级与清理zIndex: 10和0.02缓冲T时刻tl.set(new, { opacity: 1, zIndex: 10 })新场景提到顶层旧场景留在下方透过 clip-path 可见——扫到哪、看到哪收尾在T d*4 0.02clipPath: none、双方zIndex: auto、old置opacity: 0。0.02同样是 seek 安全缓冲——清理动作严格晚于最后一个 tween 结束任何采样点都不会出现扫描尚未满屏就还原 clip-path的中间态与 catalog.md 的 z-index 硬规则对照Gravity drop、zoom out、diagonal split 要求退出场景在上层zIndex: 10而 Clock Wipe 是覆盖式揭示要求进入场景在上层。两个方向都是谁在被揭示谁在底层这一原则的体现。缓动选型小结机械感从何而来对照 overview.md 的能量/预设表与 gsap-easing-and-stagger.md 的缓动词汇表机械类转场的两个实现分别示范了两种机械语言转场缓动组合手感Shutter合拢power3.in/ 打开power3.out各 0.25s有重量感的拍合与停稳接近戏剧性预设dramatic:power3.in → out0.5sClock Wipe四段none线性每段 0.1s无加减速的等时步进纯机械钟感overview.md 的预设表可直接作为调参起点预设时长缓动snappy0.2spower4.inOutsmooth0.4spower2.inOutgentle0.6ssine.inOutdramatic0.5spower3.in → outinstant0.15sexpo.inOutluxe0.7spower1.inOut如果整片能量偏高promo、体育、发布会Shutter 的 0.25s/段可以整体压缩向snappy/instant靠拢如果是复古、编辑感的成片则保持甚至放宽到gentle区间。选型与叙事位置什么时候该用机械转场overview.md 给出了一套完整的决策表机械类在其中有明确的槽位情绪 → 转场节选机械类相关行情绪可选转场为什么有效冷峻 / 临床Squeeze, zoom out, blinds,shutter, grid dissolve内容被机械地压缩、缩小、裁切、栅格化编辑 / 杂志Push slide, vertical push, diagonal split,shutter像翻页或切版面干净的方向性运动俏皮 / 趣味Elastic push, 3D flip, circle iris, morph circle,clock wipe过冲、回弹、旋转、展开复古 / 模拟Film burn, light leak, VHS,clock wipe有机的不完美叙事位置 → 用法全表继承自原文档位置用法原因开场全片最有辨识度的转场0.4–0.6s奠定整片的视觉语言相关要点之间主力转场保持一致0.3s不打断——内容在延续话题切换换一种与主力不同的转场staggered blocks、shutter、squeeze提示新章节观众大脑重置高潮 / 主角亮相最重的 accent最快或最戏剧化这是 payoff把最好的转场花在这里收尾段回到轻柔blur crossfade、crossfade0.5–0.7s让观者在高潮后喘口气片尾最慢最简单crossfade、color dip to black0.6–1.0s收束结尾不引入新能量配套的总原则overview.md 原文**全片只选 1 个主力转场占 60–70% 的场景切换加 1–2 个 accent绝不为每个场景换一种转场。**Shutter 适合承担话题切换这个结构角色Clock Wipe 则更适合作为复古/趣味成片的开场签名。与自动化转场注入的关系TRANSITION-REGISTRY 的边界仓库中还有一个机器可读的转场注册表 TRANSITION-REGISTRY.md供 PLVproduct-launch-video流水线的确定性注入器读取自动向主时间轴 stamped 转场模板。需要区分的是该注册表是精选的 Tier-B 子集crossfade、blur-crossfade、push-slide、zoom-through、squeeze 五个其准入标准是只动两个场景 clip 包装器的 transform/opacity/filter、不注入额外 DOM 覆盖层。Shutter 依赖两块额外 DOM 面板、Clock Wipe 依赖多帧 clip-path 关键帧均属于需要手工编排在场景脚本内的转场——即本篇 css-mechanical.md 所承载的作者路径。注册表文档也明确说明覆盖类staggered blocks、blinds、light leak、grid dissolve、page burn与 shader 转场推迟到后续阶段。因此机械类转场目前应在遵循 catalog.md 场景模板与硬规则的前提下手工编写而五个 Tier-B 转场可交由注入器按__OLD__/__NEW__/__T__/__DUR__占位符自动 stamped。实践要点清单骨架不变任何转场都按定位新场景 → 动画退出 → 换场 → 动画进入 → 清理覆盖层编写old/new/T三符号约定保证代码可移植一切状态切换用tl.set带时间参数杜绝裸gsap.set换场点放在完全遮蔽的瞬间并留 0.02–0.05s 缓冲布局常量预计算如 540 1080/2tween 期间不测 DOM空间运动只用x/y/scale/rotation别名clip-path 多边形关键帧点数必须一致用重合点表达中间边缘位置这是 Clock Wipe 可用可插值的根本前提缓动即性格机械感 power3.in/power3.out的重量拍合 none的等时步进与情绪表冷峻/编辑/俏皮/复古对号入座全片转场预算 2–3 种Shutter 做话题切换的 accentClock Wipe 做开场签名避免每场一种的廉价感。以上全部代码与规则可在仓库中直接查证转场实现见 css-mechanical.md硬性规则与场景模板见 catalog.md选型决策表见 overview.md缓动语义见 gsap-easing-and-stagger.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），仅供参考
OpenMontage HyperFrames 机械类转场实战：Shutter 快门与 Clock Wipe 时钟扫场的 GSAP 实现解析
OpenMontage HyperFrames 机械类转场实战Shutter 快门与 Clock Wipe 时钟扫场的 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本文基于 OpenMontage 仓库中的技能文档 css-mechanical.md完整解析 HyperFrames 多场景合成中机械类Mechanical转场的两个标准实现——Shutter上下快门与 Clock Wipe时钟扫场覆盖完整 GSAP 时间轴代码、clip-path 九点多边形插值原理、缓动函数选择、多场景合成的硬性规则以及转场代码在确定性与可 seek 渲染约束下的编写规范。读完本篇你可以在 1920×1080 的 HyperFrames 合成中直接写出可复现、可回退seek-safe的机械类转场并理解其背后定位新场景 → 动画退出 → 换场 → 清理覆盖层的通用骨架。文档定位hyperframes-animation 技能中的转场知识体系OpenMontage 将 AI Agent 的视频制作知识组织为技能文件skill其中 SKILL.md 是整个动画技能的路由入口声明了rules原子动效规则/ blueprints多相位场景模板/ transitions场景间转场/ techniques / adapters七种运行时适配的知识分层。转场知识集中在transitions/子目录分三层协作文件职责overview.md转场选型能量/情绪 → 转场类型映射、预设、叙事位置、CSS 与 Shader 取舍catalog.md转场硬性规则、1920×1080 场景模板、各分类的代码入口css-*.md12 个分类每个分类的逐行实现代码机械类即 css-mechanical.mdcatalog.md 给出全部转场分类的完整路由表机械类是其中一员类型转场参考文件PushPush slide, vertical push, elastic push, squeezecss-push.mdRadial / ShapeCircle iris, diamond iris, diagonal splitcss-radial.md3D3D card flipcss-3d.mdScale / ZoomZoom through, zoom outcss-scale.mdDissolveCrossfade, blur crossfade, focus pull, color dipcss-dissolve.mdCoverStaggered blocks, horizontal blinds, vertical blindscss-cover.mdLightLight leak, overexposure burn, film burncss-light.mdDistortionGlitch, chromatic aberration, ripple, VHS tapecss-distortion.mdMechanicalShutter, clock wipecss-mechanical.mdGridGrid dissolvecss-grid.mdOtherGravity drop, morph circlecss-other.mdBlurBlur through, directional blurcss-blur.mdDestructionPage burncss-destruction.md机械类的定位在 overview.md 的情绪 → 转场表中很明确Shutter 属于冷峻/临床与编辑/杂志感情绪内容被机械地压缩、裁切、分栏像翻一页或切一个版面干净的方向性运动Clock Wipe 属于俏皮/趣味与复古/模拟情绪旋转、步进、有机不完美。编写约定场景模板与old/new/T三符号css-mechanical.md 中的代码不依赖任何具体场景 ID它约定了三枚符号见 catalog.md 的CSS Transitions一节old退出场景outgoing scene-inner的选择器new进入场景incoming的选择器T转场开始时间秒。而每一处转场都遵循同一条硬规则catalog.md 原文position new scene → animate outgoing → swap → animate incoming → clean up overlays定位新场景 → 动画退出 → 换场 → 动画进入 → 清理覆盖层。Shutter 与 Clock Wipe 的代码正是这一骨架的两次具体化。catalog.md 同时给出了所有 CSS 转场共享的 1920×1080 场景模板可直接复制运行!DOCTYPE html html langen head meta charsetUTF-8 / script srchttps://cdn.jsdelivr.net/npm/gsap3.14.2/dist/gsap.min.js/script style body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #000; font-family: YOUR FONT, sans-serif; /* compiler embeds supported fonts automatically */ } .scene { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; overflow: hidden; } #scene1 { z-index: 1; background: #color; } #scene2 { z-index: 2; background: #color; opacity: 0; } /style /head body div idroot >tl.to(#shutter-top, { y: 0, duration: 0.25, ease: power3.in }, T); tl.to(#shutter-bot, { y: 0, duration: 0.25, ease: power3.in }, T); tl.set(old, { opacity: 0 }, T 0.25); tl.set(new, { opacity: 1 }, T 0.25); tl.to(#shutter-top, { y: -540, duration: 0.25, ease: power3.out }, T 0.3); tl.to(#shutter-bot, { y: 540, duration: 0.25, ease: power3.out }, T 0.3);面板几何540 1080 / 2代码中的±540不是魔法数字。合成高度为 1080px快门由两块1920×540的面板组成#shutter-top占据上半屏top: 0#shutter-bot占据下半屏top: 540。两块面板的初始状态用y位移推出画外顶部面板y: -540、底部面板y: 540因此y: 0恰好是完全闭合位置y: ±540恰好是完全打开位置。这也印证了 SKILL.md 中空间运动只用 GSAP 变换别名x/y/scale/rotation且布局常量必须预先计算的约束——540 是写死的常量而不是在 tween 时测量 DOM 得来。时间轴结构换场藏在闭合的 0.05s 缓冲里时间动作说明T两块面板y → 00.25spower3.in合拢先慢后快的拍合手感T 0.25tl.set(old, { opacity: 0 })与tl.set(new, { opacity: 1 })画面完全被快门遮挡的瞬间完成场景互换T 0.3两块面板y → ∓5400.25spower3.out重新打开露出新场景两个值得注意的工程细节T 0.25换场、T 0.3才开合闭合完成到重新打开之间有 0.05s 的全黑保持。这保证在任意 seek 采样点上opacity互换都不会发生在面板尚未完全闭合的帧上杜绝了新旧场景穿帮。tl.set而非gsap.set所有状态切换都带时间参数挂在时间轴上。SKILL.md 的 Non-Negotiable Rules 明确禁止对后续场景使用裸gsap.set加载即执行、seek 回退后状态失真带时间参数的tl.set是时间轴成员可随渲染器逐帧定位而完全复现。Shutter 代码全程只用tl.set是这一约束的标准写法。缓动选择也严格对应 gsap-easing-and-stagger.md 的约定.in用于退场、.out用于入场合拢是旧画面的退场用power3.in加速拍合打开是新画面的入场用power3.out减速停稳。整个 Shutter 总时长约 0.55s落在 overview.md 能量表中Medium企业、SaaS、科普0.3–0.5s与开场 0.4–0.6s的区间内。Clock Wipe 时钟扫场九点多边形与四象限步进Clock Wipe 的视觉定义以画面中心为圆心、按象限步进展开的径向多边形扫描模拟时钟指针 12→3→6→9→12 的顺时针 sweep。完整实现见 css-mechanical.md#L20-L29tl.set(new, { opacity: 1, zIndex: 10 }, T); var d 0.1; // duration per quadrant tl.set(new, { clipPath: polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%) }, T); tl.to(new, { clipPath: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%), duration: d, ease: none }, T); tl.to(new, { clipPath: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%), duration: d, ease: none }, T d); tl.to(new, { clipPath: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%, 0% 50%), duration: d, ease: none }, T d*2); tl.to(new, { clipPath: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%, 0% 0%), duration: d, ease: none }, T d*3); tl.set(new, { clipPath: none, zIndex: auto }, T d*4 0.02); tl.set(old, { opacity: 0, zIndex: auto }, T d*4 0.02);为什么必须是 9 个点这是本文件最核心的技术点也是 catalog.md 硬性规则中专门列出的一条Clock wipe: 9-point polygon with intermediate edge positions. Step through 4 quadrants with separate tweens.九点多边形、带中间边缘位置四个象限各用一个独立 tween。原因在 GSAP 对clip-path: polygon()的插值机制两个关键帧的多边形点数必须一致才能逐点插值。四个角12/3/6/9 点方向只描述出 5 个点含中心无法表达扫场的中间状态。因此模板固定为 9 个点——第 1 点恒为中心(50% 50%)其余 8 个点沿边框顺时针排布未到达的点位与已到达的点位重合堆叠在同一坐标上例如初始帧第 2–9 点全部压在(50% 0%)即 12 点钟位置。这些重合点就是原文档说的 intermediate edge positions中间边缘位置它们让每一步 tween 都能平滑地移动一部分点到新的角点而不是跳变。四个 tween 的展开轨迹每步d 0.1s步骤时间多边形覆盖时钟隐喻初始tl.setT仅中心 12 点方向一条零面积线指针停在 12 点tween 1T → Td右上象限3 点方向两角展开12 → 3tween 2Td → T2d右半屏下移到 6 点3 → 6tween 3T2d → T3d四分之三进入左下象限6 → 9tween 4T3d → T4d全幅末点落到 9→129 → 12满屏每步用ease: none线性gsap-easing-and-stagger.md 明确把线性缓动的适用场景写为camera moves with timed counterpoint,mechanical motion。四个等时、等速的象限步进正是机械钟摆/秒针的离散节律——这正是Mechanical分类名下的动效性格。层级与清理zIndex: 10和0.02缓冲T时刻tl.set(new, { opacity: 1, zIndex: 10 })新场景提到顶层旧场景留在下方透过 clip-path 可见——扫到哪、看到哪收尾在T d*4 0.02clipPath: none、双方zIndex: auto、old置opacity: 0。0.02同样是 seek 安全缓冲——清理动作严格晚于最后一个 tween 结束任何采样点都不会出现扫描尚未满屏就还原 clip-path的中间态与 catalog.md 的 z-index 硬规则对照Gravity drop、zoom out、diagonal split 要求退出场景在上层zIndex: 10而 Clock Wipe 是覆盖式揭示要求进入场景在上层。两个方向都是谁在被揭示谁在底层这一原则的体现。缓动选型小结机械感从何而来对照 overview.md 的能量/预设表与 gsap-easing-and-stagger.md 的缓动词汇表机械类转场的两个实现分别示范了两种机械语言转场缓动组合手感Shutter合拢power3.in/ 打开power3.out各 0.25s有重量感的拍合与停稳接近戏剧性预设dramatic:power3.in → out0.5sClock Wipe四段none线性每段 0.1s无加减速的等时步进纯机械钟感overview.md 的预设表可直接作为调参起点预设时长缓动snappy0.2spower4.inOutsmooth0.4spower2.inOutgentle0.6ssine.inOutdramatic0.5spower3.in → outinstant0.15sexpo.inOutluxe0.7spower1.inOut如果整片能量偏高promo、体育、发布会Shutter 的 0.25s/段可以整体压缩向snappy/instant靠拢如果是复古、编辑感的成片则保持甚至放宽到gentle区间。选型与叙事位置什么时候该用机械转场overview.md 给出了一套完整的决策表机械类在其中有明确的槽位情绪 → 转场节选机械类相关行情绪可选转场为什么有效冷峻 / 临床Squeeze, zoom out, blinds,shutter, grid dissolve内容被机械地压缩、缩小、裁切、栅格化编辑 / 杂志Push slide, vertical push, diagonal split,shutter像翻页或切版面干净的方向性运动俏皮 / 趣味Elastic push, 3D flip, circle iris, morph circle,clock wipe过冲、回弹、旋转、展开复古 / 模拟Film burn, light leak, VHS,clock wipe有机的不完美叙事位置 → 用法全表继承自原文档位置用法原因开场全片最有辨识度的转场0.4–0.6s奠定整片的视觉语言相关要点之间主力转场保持一致0.3s不打断——内容在延续话题切换换一种与主力不同的转场staggered blocks、shutter、squeeze提示新章节观众大脑重置高潮 / 主角亮相最重的 accent最快或最戏剧化这是 payoff把最好的转场花在这里收尾段回到轻柔blur crossfade、crossfade0.5–0.7s让观者在高潮后喘口气片尾最慢最简单crossfade、color dip to black0.6–1.0s收束结尾不引入新能量配套的总原则overview.md 原文**全片只选 1 个主力转场占 60–70% 的场景切换加 1–2 个 accent绝不为每个场景换一种转场。**Shutter 适合承担话题切换这个结构角色Clock Wipe 则更适合作为复古/趣味成片的开场签名。与自动化转场注入的关系TRANSITION-REGISTRY 的边界仓库中还有一个机器可读的转场注册表 TRANSITION-REGISTRY.md供 PLVproduct-launch-video流水线的确定性注入器读取自动向主时间轴 stamped 转场模板。需要区分的是该注册表是精选的 Tier-B 子集crossfade、blur-crossfade、push-slide、zoom-through、squeeze 五个其准入标准是只动两个场景 clip 包装器的 transform/opacity/filter、不注入额外 DOM 覆盖层。Shutter 依赖两块额外 DOM 面板、Clock Wipe 依赖多帧 clip-path 关键帧均属于需要手工编排在场景脚本内的转场——即本篇 css-mechanical.md 所承载的作者路径。注册表文档也明确说明覆盖类staggered blocks、blinds、light leak、grid dissolve、page burn与 shader 转场推迟到后续阶段。因此机械类转场目前应在遵循 catalog.md 场景模板与硬规则的前提下手工编写而五个 Tier-B 转场可交由注入器按__OLD__/__NEW__/__T__/__DUR__占位符自动 stamped。实践要点清单骨架不变任何转场都按定位新场景 → 动画退出 → 换场 → 动画进入 → 清理覆盖层编写old/new/T三符号约定保证代码可移植一切状态切换用tl.set带时间参数杜绝裸gsap.set换场点放在完全遮蔽的瞬间并留 0.02–0.05s 缓冲布局常量预计算如 540 1080/2tween 期间不测 DOM空间运动只用x/y/scale/rotation别名clip-path 多边形关键帧点数必须一致用重合点表达中间边缘位置这是 Clock Wipe 可用可插值的根本前提缓动即性格机械感 power3.in/power3.out的重量拍合 none的等时步进与情绪表冷峻/编辑/俏皮/复古对号入座全片转场预算 2–3 种Shutter 做话题切换的 accentClock Wipe 做开场签名避免每场一种的廉价感。以上全部代码与规则可在仓库中直接查证转场实现见 css-mechanical.md硬性规则与场景模板见 catalog.md选型决策表见 overview.md缓动语义见 gsap-easing-and-stagger.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），仅供参考
