OpenMontage HyperFrames 动画规则解读：Reactive Displacement——以单一“进入弹簧”驱动因果碰撞位移的场景过渡

OpenMontage HyperFrames 动画规则解读Reactive Displacement——以单一“进入弹簧”驱动因果碰撞位移的场景过渡【免费下载链接】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 仓库中.agents/skills/hyperframes-animation技能体系下的原子动画规则 reactive-displacement.md 为骨架完整还原其 HTML / CSS / GSAP 配方与全部调参指南并借助 HyperFrames 组合契约、相邻动画规则与真实蓝图示例做纵深展开。读完你将能独立实现“新内容把旧内容物理撞出画面”的因果型转场掌握单一驱动源single source of truth的时间线写法并为每个关键参数DRIVER_DUR、BOUNCE_FACTOR、VICTIM_FRACTION、STAGE_W、DWELL_MIN等建立可复用的取值直觉。1. 规则定位在 HyperFrames 动画体系里它扮演什么角色OpenMontage 将视频渲染能力沉淀为一系列Agent 可消费的技能skill。其中.agents/skills/hyperframes能力总览指向三个领域技能.agents/skills/hyperframes-animation动画知识、.agents/skills/hyperframes-core组合契约、.agents/skills/hyperframes-cli命令行。动画技能内部又把知识分成五类rules原子动作配方、blueprints多拍场景模板、transitions场景间转场、techniques通用技法、adapters各运行时的 API详见 SKILL.md。reactive-displacement就是 rules 目录中的一颗“原子”在 rules-index.md 中被归入Transition Motion类别标签为transition, physics, collision, displacement, push。它的推荐用法是每个场景挑选 2–4 条规则用同一条 paused GSAP timeline 粘合成一场编排而不是从头编写大段动画逻辑。与它容易混淆的另外两条转场规则需要先厘清边界规则核心手段因果性reactive-displacement进入元素的弹簧派生退出元素的位移是因果的A 移动是因为 B 撞上了它scale-swap-transition同步 shrink-out spring pop-in模拟“同形状状态互换”时间上重叠但不构成因果card-morph-anchor单一容器在尺寸 / 圆角 / 表面质感之间 morph直接充当转场锚点容器自变无“撞击”语义当你的镜头语言需要表达“某物带着动量登场并把旧内容物理地撞出画面”时Reactive Displacement 是唯一语义正确的答案若只是想温和地换内容应改用 scale-swap-transition 或 card-morph-anchor。2. 工作原理一个驱动器两个派生位移规则的核心思想只有一句退出动画是被“数学上派生”出来的而不是独立编写的。全片只有一个0→1的驱动 tween——即“进入弹簧”entry spring它同时喂养两条派生运动Intruder闯入者 B进入位置从画外插值到居中落定Victim受害者 A退出位置沿相反方向从居中插值到画外但它只在驱动值的VICTIM_FRACTION比例处就已完成退出不是 1.0。正因为受害者的退出先于闯入者的进入结束才产生了“hit then settle先撞击、后落定”的节奏撞击发生的那个瞬间就是视觉重音而当闯入者最终滑到画面中央时受害者早已消失——观众看到的不是两段相邻动画而是一次“被撞飞”。由于两条运动共享同一个经过 ease 处理的驱动值撞击时刻在数学上是严格同步的。这与“给 intruder 和 victim 各写一条独立 tween”有本质区别后者只是碰巧在时间上靠近观众会读出“两个东西各自动了一下”而不是“撞了一下”。与 HyperFrames 组合契约的衔接从.agents/skills/hyperframes-core的 SKILL.md 可知每个 HyperFrames 组合要求恰好一条gsap.timeline({ paused: true })注册在window.__timelines[id]key 根节点data-composition-id渲染时长由根节点data-duration决定而非时间线长度并且整个时间线必须同步构建于页面加载期禁止在async/setTimeout/Promise内构造。这条规则给出的 GSAP 代码完全遵循上述契约tl以paused: true创建末尾以window.__timelines[collide-scene] tl;注册且没有tl.play()、没有Math.random、没有repeat: -1。3. HTML两个同轴卡片 场景根完整的场景根节点必须携带 HyperFrames 的计时属性其中id与data-composition-id均取collide-scene注册 key 与根 id 三处一致见 hyperframes-core 的 host-id 规则。div classscene idcollide-scene >.scene { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse at center, {bgColor} 0%, {bgColorDeep} 70%); font-family: {font}; } .stage { position: absolute; inset: 0; display: grid; place-items: center; } .card { position: absolute; /* both at center; transform translates them */ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 64px 80px; border-radius: 28px; will-change: transform, opacity; } .victim { background: linear-gradient(160deg, {victimTint} 0%, {bgColorDeep} 70%); border: 1px solid {victimTint}; z-index: 1; } .intruder { background: linear-gradient(160deg, {intruderTint} 0%, {bgColorDeep} 70%); border: 2px solid {intruderBorder}; box-shadow: 0 28px 96px {intruderTint}; z-index: 2; } .card-title { font-size: 200px; font-weight: 900; color: {textColor}; line-height: 1; letter-spacing: -4px; } .card-sub { font-size: 36px; font-weight: 800; letter-spacing: 10px; text-transform: uppercase; color: {accentColor}; text-align: center; }CSS 层需要特别解释的四个设计决策.scene { overflow: hidden; }是硬性约束。两张卡都会飞出画面若不禁用滚动裁剪退场与进场元素会把页面撑出横向滚动条甚至破坏取景。z-index明确写死.intruder2在.victim1之上。重叠瞬间闯入者必须“盖”在受害者前方——它是碰撞的赢家否则受害者会显得从闯入者身体里“穿模”而过。will-change: transform, opacity同时声明在两卡上位移与淡出都由 transform / opacity 承载这既规避了 HyperFrames core 禁止对display/visibility做动画的约束也让合成器可以提前分层优化。两张卡都position: absolute并靠place-items: center对齐随后用translate(-50%, -50%)让元素中心与舞台中心重合——后续所有位移都发生在“居中静止”这一基准之上x: 0即视觉正中。颜色 token{bgColor}、{bgColorDeep}、{victimTint}、{intruderTint}、{intruderBorder}、{textColor}、{accentColor}、{font}应由组合的样式令牌解析后替换保持与 hyperframes-creative 的主题一致性对比度与可读性属于该技能的范围。5. GSAP Timeline单驱动 onUpdate 派生两卡5.1 完整脚本script srchttps://cdn.jsdelivr.net/npm/gsap3.14.2/dist/gsap.min.js/script script window.__timelines window.__timelines || {}; const tl gsap.timeline({ paused: true }); // Off-stage distances are derived from the stage width. const INTRUDER_START_X STAGE_W; // off-stage right const VICTIM_END_X -STAGE_W; // off-stage left, opposite direction // Initial state — victim centered, intruder off-stage right gsap.set(#victim, { x: 0, opacity: 1, rotation: 0 }); gsap.set(#intruder, { x: INTRUDER_START_X, opacity: 0, rotation: -INTRUDER_TILT }); // Single driver — the entry spring — runs 0→1 over the impact arc const driver { p: 0 }; tl.to( driver, { p: 1, duration: DRIVER_DUR, ease: back.out(${BOUNCE_FACTOR}), // intruder spring onUpdate: () { // Intruder: full 0→1 progress maps to enter (off-stage → center) const intruderX INTRUDER_START_X * (1 - driver.p); const intruderOpacity Math.min(1, driver.p * FADE_IN_SHARPNESS); const intruderRot -INTRUDER_TILT * (1 - driver.p); // settle to 0° const intruder document.getElementById(intruder); intruder.style.transform translate(-50%, -50%) translateX(${intruderX}px) rotate(${intruderRot}deg); intruder.style.opacity String(intruderOpacity); // Victim: completes exit at VICTIM_FRACTION of driver (intruder still flying in) // so the impact MOMENT is the visual punch — by the time intruder centers, // victim is already off-stage. const victimP Math.min(1, driver.p / VICTIM_FRACTION); const victimX VICTIM_END_X * victimP; const victimOpacity 1 - victimP; const victim document.getElementById(victim); victim.style.transform translate(-50%, -50%) translateX(${victimX}px); victim.style.opacity String(victimOpacity); }, }, DRIVER_AT, ); // Climax dwell — intruder holds at center after settle (no additional motion; // composition continues with intruder centered for ≥ DWELL_MIN seconds). window.__timelines[collide-scene] tl; /script5.2 逐段拆解初始化gsap.setvictim 在x:0, opacity:1, rotation:0居中静止intruder 在STAGE_W处、opacity:0、并带一个-INTRUDER_TILT的初始倾角。值得注意的是 intruder 初始就带倾角、落定时归 0°——这是“带着旋转砸进来再扶正”这一动量可视化叙事的伏笔。驱动对象const driver { p: 0 }这是全片唯一真正被 tween 的对象。p从 0 走到 1时长DRIVER_DUR缓动为back.out(${BOUNCE_FACTOR})——即“进入弹簧”本体。这个onUpdate是唯一允许读取进度的位置不要再用第二条tl.to()去独立补间 intruder 或 victim。Intruder 派生公式intruderX STAGE_W * (1 - p)p0时在 STAGE_W画外右侧p1时回到 0居中intruderOpacity min(1, p * FADE_IN_SHARPNESS)FADE_IN_SHARPNESS越大越早在运动中“显影”为实体intruderRot -INTRUDER_TILT * (1 - p)随p→1倾角衰减为 0°transform 写法translate(-50%, -50%) translateX(...) rotate(...)必须保留居中对齐基准再叠加业务位移/旋转。Victim 派生公式victimP min(1, p / VICTIM_FRACTION)把驱动进度“放大”映射——当p只走到VICTIM_FRACTION典型 0.5时victimP已经到达 1即 victim 完成整个退场victimX -STAGE_W * victimP向负 X左侧画外滑出——与 intruder 进入方向严格反向同轴victimOpacity 1 - victimP位移与淡出同步线性滑出并淡出。注释里的“撞击瞬间”规则文档刻意强调——当 intruder 仍在飞入、尚未居中时 victim 已经离场。两卡“重叠”的那一帧才是撞击此后 victim 只是在撤出 intruder 即将占据的空间。若 victim 拖到p1才走完两段运动会读成“平行运动”而非“因果撞击”。Climax dwell高潮停留驱动结束后脚本不再追加任何运动画面停留在 intruder 居中的静止帧至少DWELL_MIN秒——这是新内容被观众“阅读”的窗口规则明确要求不许跳过。关于确定性动画技能要求预先计算布局常量、禁止在 tween 时调用getBoundingClientRect()渲染器是并行采样的tween 期测量会导致失步。上面的STAGE_W、INTRUDER_START_X都是组合 setup 期算好的常量符合该约束。可参考 animation-map.mjs 在编排后对window.__timelines做盘点审计。6. 参数调优指南何时该用哪个值6.1 参数速查总表参数语义建议范围一句话经验DRIVER_AT进入弹簧的起始时刻依相phase而定通常开画数秒后太早吃掉 setup 拍子太晚卡顿剪接点DRIVER_DUR闯入者完整进入时长0.6–1.4 s短干脆重拳长沉重落地BOUNCE_FACTORback.out()回弹系数1.2–2.0典型 1.4–1.6低紧实落定高过冲弹跳VICTIM_FRACTIONvictim 在驱动进度中的完成比例0.4–0.5上限 ~0.6低于 0.4 撞击感读不出高于 0.6 变成平行运动STAGE_W舞台宽度px用于摆放画外元素等于组合渲染宽度data-width过小会让画外元素露边INTRUDER_TILT闯入者初始倾角deg5–15°典型 ~10°低干净滑入高可见的“旋入扶正”FADE_IN_SHARPNESSintruder 显影速度乘数3–81/FADE_IN_SHARPNESS处即不透明高早显影、读作实体DWELL_MIN落定后的高潮停留≥ 1.0 s典型 1.0–1.5 s这是新内容被阅读的窗口6.2 逐参数详解DRIVER_AT—— 什么时候开始撞击相位相关通常在组合开画后数秒示例会安排在“前一段旁白/阅读拍子落定之后”再触发位移太早观众还没读完 setup 拍撞击抢戏太晚画面停滞、转场拖沓硬约束必须保证在组合结束前留出 ≥DWELL_MIN的高潮停留。DRIVER_DUR—— 撞击有多快0.6–1.4 s短时长读作 zippy/punchy敏捷重拳长时长读作 heavy/landed沉重落地约束需与BOUNCE_FACTOR联动——长时长配高 bounce会读作“漂浮”应压低回弹。BOUNCE_FACTOR—— 弹簧性格back.out系数范围 1.2–2.0示例常落在 1.4–1.6低值 ≈ 紧实落定高值 ≈ 过冲/弹跳约束ease 家族保持back.out若想引入振荡才升级为elastic.out——换家族等于重写手感。VICTIM_FRACTION—— 因果性的关键旋钮0.4–0.5硬上限约 0.6低于 0.4victim 在撞击还没被看清时就消失了观众不知道“它为什么走”高于 0.5–0.6victim 滑出的节奏拖到与 intruder 同步碰撞隐喻失效、读作两条平行动画本规则的标准形态取 ~0.5。STAGE_W—— 画外的距离基准应等于组合渲染宽度即根节点声明的data-width使元素平移一个完整画宽后完全出画取值过小会导致开场时 intruder 部分可见露边穿帮。INTRUDER_TILT—— 旋入的可见度5–15°典型中量感冲击约 10°符号必须与进入方向一致同轴冲量传递的直觉方向反了会读作“被弹回来”。FADE_IN_SHARPNESS—— 显影速度3–8要求 1intruder 在1/FADE_IN_SHARPNESS处进度即达到不透明低值伴随运动的柔和淡入高值很早显影、读作实体高速砸入。DWELL_MIN—— 高潮后的阅读窗口≥1.0 s典型 1.0–1.5 s太短显得仓促、内容来不及读过长则拖住整个组合规则文档特别强调“撞击后的停留是新内容被阅读的地方——不要跳过”。7. 变体四种可叠加的“撞击后处理”7.1 受害者受击旋转Impact rotation on victimvictim 不只是滑出去还带着受击角旋转着飞出。只需把 transform 叠加一个随victimP增长的旋转项const victimRot victimP * -VICTIM_KICK_DEG; // rotates as it slides victim.style.transform translate(-50%, -50%) translateX(${victimX}px) rotate(${victimRot}deg);VICTIM_KICK_DEG通常取 15–25°幅度应与观众感知到的 intruder“质量”匹配——撞得越重、kick 越大。7.2 纵向碰撞Vertical collisionintruder 从上方砸入、victim 被压向下方——同样的数学换成 Y 轴即可。视觉语义从“被撞飞”变成“被重物压落”。7.3 落定后的衰减摆动Wobble after settleintruder 居中后先做一次阻尼正弦摆动再静止营造“撞击余震”然后才进入高潮停留。实现上在DRIVER_AT DRIVER_DUR处再驱动一个相位对象const wobble { p: 0 }; tl.to( wobble, { p: Math.PI * WOBBLE_CYCLES * 2, duration: WOBBLE_DUR, ease: none, onUpdate: () { const rot Math.sin(wobble.p) * WOBBLE_AMP_DEG * (1 - wobble.p / (Math.PI * WOBBLE_CYCLES * 2)); // linear decay intruder.style.transform translate(-50%, -50%) rotate(${rot}deg); }, }, DRIVER_AT DRIVER_DUR, );注意(1 - p/(2π·CYCLES))这一项是线性衰减包络——幅度随摆动相位收敛到 0保证摆完后是绝对静止衔接高潮停留时无跳变。摆动 tween 也必须走ease: none正弦本身提供节奏与 sine-wave-loop 的相位驱动手法同源。7.4 多受害者级联Multi-victim rippleintruder 依次撞飞一排对齐的卡片每个 victim 拿到不同的驱动相位偏移、先后滑出形成级联涟漪。实现上为每个 victim 复制一条“派生式计算”只是各自的victimP使用(driver.p - offset_i)裁剪到[0,1]后除以各自的 fraction。8. 核心原则让“撞击”看起来是真的单驱动 单一事实来源进入弹簧同时驱动双方运动。为 intruder 与 victim 分别写独立 tween 会摧毁因果链——它们只是碰巧在时间上靠近而不是相撞。Victim 在驱动的一部分进度处完成退出intruder 抵达中心时 victim 已彻底消失。“撞击”是二者重叠的那一瞬此后 victim 只是在撤出 intruder 将要占据的空间。有方向的动量传递intruder 从正 X 来 → victim 往负 X 走严格同轴。若两者走不同轴会读成“擦肩而过”而非“相撞”。Intruder 的 z-index 高于 victim重叠期闯入者必须在前面它是碰撞的赢家否则 victim 看起来“穿隧”而过。Intruder 带旋转进入、落定扶平小倾角 → 0° 的收敛读作“旋入然后落地生根”spin-and-plant是动量的可视化补充。撞击后必须有高潮停留撞击是头条节拍headline beat撞击后的停留是新内容被阅读的地方。9. 硬性约束与 HyperFrames 契约的对齐清单规则正文列出的 Critical Constraints可与 hyperframes-core 的 Non-Negotiable Rules 互相印证时间线必须 pausedgsap.timeline({ paused: true })绝不tl.play()渲染器靠 seek 逐帧推进。注册 key data-composition-idwindow.__timelines[collide-scene]必须与场景根 id /data-composition-id三方一致hyperframes-core 称之为 host-id 规则。单驱动、多派生值集中于同一个onUpdate禁止用分离的tl.to()分别补间 intruder 和 victim。.scene必须overflow: hidden画外运动会超出帧。两卡都要will-change: transform, opacity仅动画可视属性白名单内的属性。Intruder z-index 显式 victim不依赖 DOM 顺序明确书写。布局常量预计算动画技能叠加约束STAGE_W等常量在组合 setup 期确定tween 期不做 DOM 测量、不用Math.random/Date.now/performance.now、不用repeat: -1、不用 CSSkeyframes驱动主时间线。渲染时长以data-duration为准本示例data-duration3需保证DRIVER_AT DRIVER_DUR DWELL_MIN ≤ 3否则高潮停留会被切掉。以上结构性错误通常无法被lint/validate/inspect自动发现见 hyperframes-core 的“silent bugs”清单所以写完后应执行npx hyperframes lint0 错误→npx hyperframes validate→npx hyperframes inspect→ 必要时用npx hyperframes snapshot --at midpoints逐帧目检 → 用户批准后npx hyperframes render。10. 组合玩法如何与其它规则拼出完整镜头规则的 Combinations 章节给出了三条典型的“拼装”路径hacker-flip-3dintruder 的文本在进入阶段用字符级 3D 翻转解密效果揭示——闯入者边砸边“解码”强化数据冲击叙事sine-wave-loopintruder 落定进入高潮停留后叠一层有界低频呼吸/抖动防止静止帧“死掉”。注意该规则的礼仪优先用 VO 驱动的顺序揭示填满镜头jitter 其次呼吸是最后手段且保持低振幅vertical-spring-ticker把 intruder 换成一台“把旧内容顶出去”的纵向弹簧 ticker——slot-machine 式的逐格滚动与位移撞击结合。蓝图级应用ticker-takeover这类“规则拼接”在.agents/skills/hyperframes-animation/blueprints的成品蓝图中是真实落地的。以 ticker-takeover.md 为例它描述了一个Ticker 位移 / 接管场景Scene 10.0–1.4stypewriter 逐字铺出引导短语Scene 21.4–3.0s一行中的强调词像老虎机一样纵向滚过 2–3 个候选词vertical-spring-tickerScene 33.0–4.2s签名动作hero 从画外带动量砸入并把整组文本物理地撞出画面——蓝图明确标注这条运动映射到reactive-displacement文本是被位移的质量体并给出调参建议把 hero 的“重落地”表达为更长的power2settle而不是规则默认的back.outScene 44.2s–结束hero 居中静止阅读叠加低振幅 sine-wave-loop。这恰好展示了 Reactive Displacement 在“物理接管”叙事中的经典用途也说明参数默认值不是教条——当闯入者是“重物”时应按语义改写 settle 缓动。11. 实战落地清单与避坑提示编写一个可渲染的 Reactive Displacement 组合推荐按下述顺序走查确认舞台尺寸STAGE_W取组合渲染宽度确保 intruder 初始完全在画外。确定拍序先让上一内容/文本阅读拍落定DRIVER_AT在它之后再定 intruder 进入节奏与落地留白。先锁 causal 骨架以DRIVER_DUR、VICTIM_FRACTION≈0.5、BOUNCE_FACTOR≈1.5起步先让“撞击”成立再调性格。调性格顺序手感短/重由DRIVER_DUR决定软/弹由BOUNCE_FACTOR决定撞击清晰度由VICTIM_FRACTION决定画外进出量由STAGE_W决定动感由INTRUDER_TILT/ 变体旋转决定实体感由FADE_IN_SHARPNESS决定。确认高潮停留DRIVER_AT DRIVER_DUR DWELL_MIN ≤ contenteditable="false">【免费下载链接】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），仅供参考