OpenMontage SVG 图标微动效指南用 svg-icon-enrichment 将图标当作“部件集合”驱动起来【免费下载链接】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图标级微动效internal icon micro-animation是视频合成中让静止画面“活过来”的高性价比手段——时针转动、剪刀开合、录制红点呼吸、数据流虚线游走。OpenMontage 的 HyperFrames 动画技能库中.agents/skills/hyperframes-animation/rules/svg-icon-enrichment.md正是解决这一问题的原子规则rule它把单个 SVG 图标视为由多个可独立动画的内部部件clock hand、blade、dot、data line组成的组合体用一条暂停的 GSAP 时间线分别驱动这些部件。本文将以该规则文档为主体结合仓库中的技能索引、确定性命中契约与 HyperFrames 运行时实现讲解从 HTML/CSS 编写到 GSAP 驱动、参数选取到避坑的完整过程。读完你将能够为一个“不透明”的图标 SVG 添加可预测、可逐帧 seek、随机渲染不抖动的内部动效并把它无缝编排进 OpenMontage 的 HyperFrames 合成工作流。核心理念SVG 图标不是一张图片而是一组“部件”svg-icon-enrichment 规则的开篇即点明立场Treats an SVG icon as a composition of animated PARTS, not an opaque image把 SVG 图标当作可动部件的组合而非不透明图片。与之形成对照的是同目录下的另一个规则 svg-path-draw后者通过stroke-dasharray/stroke-dashoffset让图标轮廓“描画”出来outline drawing而 svg-icon-enrichment 关注的是轮廓画完之后内部部件各自的生命运动。两者在叙事上常常前后衔接——先由 svg-path-draw 把轮廓一笔笔画出再由 enrichment 激活内部动画观感是“图标组装完成后苏醒了”the icon woke up。在规则文档中这一组合被单独列为“Stroke draw → enrichment chain”变体// Phase 1: outline draws (0 → OUTLINE_DUR) tl.fromTo( #icon-outline, { strokeDashoffset: 360 }, { strokeDashoffset: 0, duration: OUTLINE_DUR, ease: power2.inOut }, 0, ); // Phase 2: enrichment starts at OUTLINE_DUR实现原理非常直白SVG 内部由带id/class的line、circle、path、g子元素组成GSAP 时间线按选择器定位这些部件对其施加 4 种签名运动模式signature motion patterns之一。所有运动都跑在一条paused: true的时间线内从而保证 HyperFrames 逐帧 seek 时结果确定deterministic。四种签名运动模式Rotation / Oscillation / Pulse / Dash flow规则文档把常见的图标内部运动收敛为四种模式每种模式都有明确的使用对象、数学驱动与实现建议Pattern模式Use For适用对象Math数学驱动Tip要点Rotation旋转Clock时钟、gear齿轮、loader加载、dial刻度盘transform: rotate(deg)通过秒计数器线性推进transform-origin使用 viewBox 单位见下文关键陷阱Oscillation摆动Scissors剪刀、wings翅膀、toggle开关两组相对部件施加rotate(±sin*amp)两个部件符号相反opposite signsPulse脉冲Recording dot录制点、heart心跳、notification通知scale(1 sin*amp) opacity外圈相对圆点滞后 π/2 相位产生涟漪效果Dash flow虚线流动Cutting line切割线、data stream数据流strokeDashoffset随时间线性推进负值 → 自左向右流动正值 → 自右向左这套模式归纳与同一技能的 rules-index 中的定位一致——svg-icon-enrichment 属于“SVG Icons”分类下的一条原子配方与 svg-path-draw 并列标签为svg, icon, animation, micro-animation, rotation, pulse。按技能使用规范见 hyperframes-animation/SKILL.md动画作者通常一次挑选 2–4 条规则在单条暂停时间线里组合即可完成一个场景无需从零写蓝图。完整示例时钟指针、录制红点与数据流的 HTML 结构规则文档给出了一个可直接入手的示例一行三个 320px 图标时钟、录制圆点、数据流胶囊下方配品牌文案整体是一个带时间线生命周期的.scene。HTML 的关键是每个图标都给出viewBox内部运动部件都带独立idhand-min、hand-sec、rec-dot、rec-ring、data-flow以便时间线逐一定位div classscene >.scene { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: {bgColor}; font-family: {font}; } .stack { display: flex; flex-direction: column; align-items: center; gap: 80px; } .row { display: flex; gap: 120px; } .icon-svg { width: 320px; height: 320px; filter: drop-shadow(0 12px 32px {shadowColor}); } .clock-hand { /* transform-origin in SVG must be in viewBox units, not pixels */ transform-origin: 60px 60px; transform-box: fill-box; } .brand { font-size: 64px; font-weight: 900; letter-spacing: 14px; text-transform: uppercase; color: {textColor}; }.clock-hand上预先写好了transform-origin: 60px 60px; transform-box: fill-box;并附带注释“SVG 中的 transform-origin 必须是 viewBox 单位而非像素”。这其实是规则文档里最危险陷阱的伏笔——下一节的 GSAP 示例故意先展示一种写法再在“关键原则”中解释为什么对细长line不能依赖这套 CSS 组合。GSAP 时间线一条 paused 时间线驱动全部部件规则文档要求所有部件动画运行在同一条paused: true的时间线内并通过onUpdate把数值状态写回各部件样式。时钟指针用“数值代理 线性驱动”脉冲用正弦相位数据流推进strokeDashoffsetscript srchttps://cdn.jsdelivr.net/npm/gsap3.14.2/dist/gsap.min.js/script script window.__timelines window.__timelines || {}; const tl gsap.timeline({ paused: true }); // Pattern 1 — Rotation (clock hands) // Minute hand: MIN_REVOLUTIONS full rotations over TOTAL_DURATION const minState { deg: 0 }; tl.to( minState, { deg: 360 * MIN_REVOLUTIONS, duration: TOTAL_DURATION, ease: none, onUpdate: () { document.getElementById(hand-min).style.transform rotate(${minState.deg}deg); }, }, 0, ); // Second hand: SEC_REVOLUTIONS full rotations over TOTAL_DURATION (faster) const secState { deg: 0 }; tl.to( secState, { deg: 360 * SEC_REVOLUTIONS, duration: TOTAL_DURATION, ease: none, onUpdate: () { document.getElementById(hand-sec).style.transform rotate(${secState.deg}deg); }, }, 0, ); // Pattern 2 — Pulse (recording dot, ring opacity inverse) const pulseState { p: 0 }; tl.to( pulseState, { p: Math.PI * 2 * PULSE_CYCLES, duration: TOTAL_DURATION, ease: none, onUpdate: () { const dotScale 1 Math.sin(pulseState.p) * PULSE_DOT_AMP; const ringScale 1 Math.sin(pulseState.p Math.PI / 2) * PULSE_RING_AMP; const ringOpacity PULSE_RING_OPACITY_BASE Math.sin(pulseState.p) * PULSE_RING_OPACITY_AMP; const dot document.getElementById(rec-dot); const ring document.getElementById(rec-ring); dot.style.transform scale(${dotScale}); dot.style.transformOrigin 60px 60px; ring.style.transform scale(${ringScale}); ring.style.transformOrigin 60px 60px; ring.style.opacity String(ringOpacity); }, }, 0, ); // Pattern 3 — Dash flow (data stream) const flowState { offset: 0 }; tl.to( flowState, { offset: DASH_FLOW_TOTAL_OFFSET, // negative for L→R flow, positive for R→L duration: TOTAL_DURATION, ease: none, onUpdate: () { document.getElementById(data-flow).style.strokeDashoffset String(flowState.offset); }, }, 0, ); // Brand fades in early tl.from(.brand, { opacity: 0, y: 16, duration: 0.6, ease: power3.out }, BRAND_AT); window.__timelines[enrichment-scene] tl; /script从代码结构可以清晰看到该规则与 HyperFrames 确定性契约的贴合时间线暂停创建、同步构建、注册到window.__timelines且键与data-composition-id一致。这套要求与 hyperframes-core/references/determinism-rules.md 中“动画运行时契约”逐条对应——不允许Date.now()/performance.now()、不允许repeat: -1、不允许在async/setTimeout/Promise/事件回调中构建时间线因为渲染器是对每个时间值做一次全新 seek任何依赖“按顺序播放累计状态”的实现都会在并行采样时失步。规则文档也在“关键约束”中强调SVG 子元素上不得使用 CSSanimation连续动画必须由时间线驱动否则会与 HyperFrames 的逐帧 seek 时钟脱离、产生闪烁。参数选择指南把“手感”量化成可调区间规则文档最有实战价值的部分是把看似“凭感觉”的动效手感量化成区间与约束。全部核心常量及取值建议如下MIN_REVOLUTIONS—— 分针在TOTAL_DURATION内的整转数区间0.5–2.0连续可调越快越像延时摄影约束若可见结束帧重要避免整数转数否则动画“恰好回到起点”观感突兀SEC_REVOLUTIONS—— 秒针在TOTAL_DURATION内的整转数区间4–10必须明显快于分针约束SEC_REVOLUTIONS MIN_REVOLUTIONS × 3否则“秒针更快”的速度差读不出来PULSE_CYCLES—— 3–5 秒合成内脉冲周期数区间2–4效果≥5 读作“焦虑的闪烁”≤1 读作“被遗忘”PULSE_DOT_AMP—— 圆点缩放幅度区间0.05–0.20效果0.05 呼吸感breathing0.20 搏动感throbbingPULSE_RING_AMP—— 外圈缩放幅度通常应低于 DOT_AMP区间0.04–0.12约束必须 PULSE_DOT_AMP否则外圈反客为主盖过圆点PULSE_RING_OPACITY_BASE / PULSE_RING_OPACITY_AMP—— 外圈透明度基线 正弦振幅区间BASE 0.4–0.6AMP 0.3–0.5约束BASE − AMP ≥ 0且BASE AMP ≤ 1不越界DASH_FLOW_TOTAL_OFFSET——TOTAL_DURATION内stroke-dashoffset的总位移区间−400 ~ −100负值 自左向右或 100 ~ 400自右向左效果绝对值大 流得快小 缓慢漂移约束必须是 dash 周期dash gap的整数倍否则循环结束帧会出现相位跳变phase jumpBRAND_AT—— 品牌文案淡入时刻区间0.3–1.0 秒太早会与图标入场抢注意力太晚显得“贴上去的”缓动族ease family选择旋转 none线性运动本身就是目的脉冲相位驱动 none曲线交给 sin品牌文案入场 power3.out这些区间直接服务于“图标是装饰不是标题”的定位——细节节奏以观感小、确定性高为默认。可结合同技能的 sine-wave-loop 文档互相印证该文档强调脉冲相位驱动必须ease: none非线性的相位 tween 会破坏正弦波形且“不同部件用 π/2 相位错开同步运动显得机械、失相位才显得有生命”——这正是时钟分秒针、圆点与圆环差分运动背后的同一套美学原则。关键陷阱SVG 旋转中心与 CSS transform-origin 的 bbox 陷阱这是规则文档用两个“❗”标注的最重要实现细节务必在动笔前理解。陷阱一SVG 内绕显式点旋转不要依赖 CSS transform。对 CSS 组合transform: rotate(...)transform-origin: 60px 60pxtransform-box: fill-box文档明确指出其原点是在元素自身 bbox 局部坐标系中解释的不是viewBox 坐标。对于细长linebbox 就是线条自身的窄包络60 60在 bbox-local 中指向线条外部的一个点结果是指针不是绕轴心原地旋转而是沿一条偏离中心的弧线甩动。同理小内圆rec-dotbbox 是小圆本身而非整个 viewBox也会踩中同样的坑。正确写法是用 SVG 的transform属性并带上显式旋转中心// 绕 (cx, cy) 旋转 —— 中心点用 viewBox 坐标显式给出 el.setAttribute(transform, rotate(${deg} ${cx} ${cy}));陷阱二绕中心点缩放同理。不要依赖 CSS 原点而是用“平移—缩放—平移回去”的组合el.setAttribute(transform, translate(${cx} ${cy}) scale(${s}) translate(-${cx} -${cy}));这与同类规则中的另一条实践经验遥相呼应——svg-path-draw 文档在处理圆环起始角度时同样使用“styletransform-origin: 100px 100px; transform: rotate(-90deg);”来让描边从 12 点钟方向开始。SVG 变换原点是一个高频坑区两条规则都在各自的示例中显式规避。关键原则与硬约束在 HyperFrames 内成立的前提规则文档列出的原则可归纳为几条判断标准连续动画必须放进时间线——绝不用 CSSkeyframes或requestAnimationFrame二者都会与 HyperFrames 的逐帧 seek 失步见 determinism-rules 的解释。幅度保持克制——图标是装饰不是标题脉冲缩放严格控制在上述区间转速按合成时长校准而不是按“绝对时间感”拍脑袋。同一图标的不同部件处于不同相位——分针秒针不同速、圆点与圆环相差 π/2。纯同步 机械相位错开 有生命。若微动效是整场的高光节拍戏剧性峰值后合成必须继续 ≥ 1 秒climax dwell ≥ 1s否则观众来不及“读完”这个动画。对应的硬约束清单Critical Constraints时间线必须暂停gsap.timeline({ paused: true })注册键 data-composition-id对应window.__timelines[enrichment-scene]SVG 子元素上无 CSSanimation——必须是时间线驱动每个可动子元素的transform-origin都要显式设置流动/虚线线条使用stroke-linecap: round保证虚线边缘干净用id定位 SVG 子元素——document.getElementById足够选择器链进svg与 HTML 行为一致组合方式把微动效编进更大的场景规则文档在结尾给出三种跨规则组合路径均指向同技能内的相邻文件svg-path-draw—— 轮廓先描画enrichment 随后激活“描画 → 唤醒”链条orbit-3d-entry—— 轨道环绕的条目本身就是被 enrich 的图标如品牌字标被一组时钟/齿轮环绕公转sine-wave-loop—— 整个图标做轻微浮动idle内部部件同时动画两层运动叠加再结合一个工程化组合——逐图标入场错峰per-icon entry stagger一排多个图标都在动时让每个图标的 enrichment 随其淡入时刻开始而不是全部同步——不同步反而显得有机feels organic。实现上可以复用 svg-path-draw 文档中多段描边的错峰思路后一段在上一段进行到约 70%–80% 时启动视觉上就衔接成连续动作而非 N 段孤立动画。这一节的引用关系在技能目录结构中真实存在SKILL.md 的“Routing”表指明“按触发器/标签挑选原子规则”查rules-index.md、“读某条规则的完整 HTML/CSS/GSAP 配方”查rules/name.md组合使用的完整场景级模板则见 blueprints-index.md。在 OpenMontage 管线中如何落地svg-icon-enrichment 规则文档位于 OpenMontage 仓库的 HyperFrames 动画技能包内.agents/skills/hyperframes-animation/。按 skills/core/hyperframes.md 的分层说明OpenMontage 把“创作语法”renderer_family与“技术运行时”render_runtime可选remotion/hyperframes/ffmpeg分离HTML/GSAP 原生友好的场景kinetic typography、product promo、图标动效密集的营销片头优先选择hyperframes。技术栈映射关系为edit_decisions.cuts[]→index.html时间线中的每个div 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），仅供参考
OpenMontage SVG 图标微动效指南：用 svg-icon-enrichment 将图标当作“部件集合”驱动起来
OpenMontage SVG 图标微动效指南用 svg-icon-enrichment 将图标当作“部件集合”驱动起来【免费下载链接】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图标级微动效internal icon micro-animation是视频合成中让静止画面“活过来”的高性价比手段——时针转动、剪刀开合、录制红点呼吸、数据流虚线游走。OpenMontage 的 HyperFrames 动画技能库中.agents/skills/hyperframes-animation/rules/svg-icon-enrichment.md正是解决这一问题的原子规则rule它把单个 SVG 图标视为由多个可独立动画的内部部件clock hand、blade、dot、data line组成的组合体用一条暂停的 GSAP 时间线分别驱动这些部件。本文将以该规则文档为主体结合仓库中的技能索引、确定性命中契约与 HyperFrames 运行时实现讲解从 HTML/CSS 编写到 GSAP 驱动、参数选取到避坑的完整过程。读完你将能够为一个“不透明”的图标 SVG 添加可预测、可逐帧 seek、随机渲染不抖动的内部动效并把它无缝编排进 OpenMontage 的 HyperFrames 合成工作流。核心理念SVG 图标不是一张图片而是一组“部件”svg-icon-enrichment 规则的开篇即点明立场Treats an SVG icon as a composition of animated PARTS, not an opaque image把 SVG 图标当作可动部件的组合而非不透明图片。与之形成对照的是同目录下的另一个规则 svg-path-draw后者通过stroke-dasharray/stroke-dashoffset让图标轮廓“描画”出来outline drawing而 svg-icon-enrichment 关注的是轮廓画完之后内部部件各自的生命运动。两者在叙事上常常前后衔接——先由 svg-path-draw 把轮廓一笔笔画出再由 enrichment 激活内部动画观感是“图标组装完成后苏醒了”the icon woke up。在规则文档中这一组合被单独列为“Stroke draw → enrichment chain”变体// Phase 1: outline draws (0 → OUTLINE_DUR) tl.fromTo( #icon-outline, { strokeDashoffset: 360 }, { strokeDashoffset: 0, duration: OUTLINE_DUR, ease: power2.inOut }, 0, ); // Phase 2: enrichment starts at OUTLINE_DUR实现原理非常直白SVG 内部由带id/class的line、circle、path、g子元素组成GSAP 时间线按选择器定位这些部件对其施加 4 种签名运动模式signature motion patterns之一。所有运动都跑在一条paused: true的时间线内从而保证 HyperFrames 逐帧 seek 时结果确定deterministic。四种签名运动模式Rotation / Oscillation / Pulse / Dash flow规则文档把常见的图标内部运动收敛为四种模式每种模式都有明确的使用对象、数学驱动与实现建议Pattern模式Use For适用对象Math数学驱动Tip要点Rotation旋转Clock时钟、gear齿轮、loader加载、dial刻度盘transform: rotate(deg)通过秒计数器线性推进transform-origin使用 viewBox 单位见下文关键陷阱Oscillation摆动Scissors剪刀、wings翅膀、toggle开关两组相对部件施加rotate(±sin*amp)两个部件符号相反opposite signsPulse脉冲Recording dot录制点、heart心跳、notification通知scale(1 sin*amp) opacity外圈相对圆点滞后 π/2 相位产生涟漪效果Dash flow虚线流动Cutting line切割线、data stream数据流strokeDashoffset随时间线性推进负值 → 自左向右流动正值 → 自右向左这套模式归纳与同一技能的 rules-index 中的定位一致——svg-icon-enrichment 属于“SVG Icons”分类下的一条原子配方与 svg-path-draw 并列标签为svg, icon, animation, micro-animation, rotation, pulse。按技能使用规范见 hyperframes-animation/SKILL.md动画作者通常一次挑选 2–4 条规则在单条暂停时间线里组合即可完成一个场景无需从零写蓝图。完整示例时钟指针、录制红点与数据流的 HTML 结构规则文档给出了一个可直接入手的示例一行三个 320px 图标时钟、录制圆点、数据流胶囊下方配品牌文案整体是一个带时间线生命周期的.scene。HTML 的关键是每个图标都给出viewBox内部运动部件都带独立idhand-min、hand-sec、rec-dot、rec-ring、data-flow以便时间线逐一定位div classscene >.scene { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: {bgColor}; font-family: {font}; } .stack { display: flex; flex-direction: column; align-items: center; gap: 80px; } .row { display: flex; gap: 120px; } .icon-svg { width: 320px; height: 320px; filter: drop-shadow(0 12px 32px {shadowColor}); } .clock-hand { /* transform-origin in SVG must be in viewBox units, not pixels */ transform-origin: 60px 60px; transform-box: fill-box; } .brand { font-size: 64px; font-weight: 900; letter-spacing: 14px; text-transform: uppercase; color: {textColor}; }.clock-hand上预先写好了transform-origin: 60px 60px; transform-box: fill-box;并附带注释“SVG 中的 transform-origin 必须是 viewBox 单位而非像素”。这其实是规则文档里最危险陷阱的伏笔——下一节的 GSAP 示例故意先展示一种写法再在“关键原则”中解释为什么对细长line不能依赖这套 CSS 组合。GSAP 时间线一条 paused 时间线驱动全部部件规则文档要求所有部件动画运行在同一条paused: true的时间线内并通过onUpdate把数值状态写回各部件样式。时钟指针用“数值代理 线性驱动”脉冲用正弦相位数据流推进strokeDashoffsetscript srchttps://cdn.jsdelivr.net/npm/gsap3.14.2/dist/gsap.min.js/script script window.__timelines window.__timelines || {}; const tl gsap.timeline({ paused: true }); // Pattern 1 — Rotation (clock hands) // Minute hand: MIN_REVOLUTIONS full rotations over TOTAL_DURATION const minState { deg: 0 }; tl.to( minState, { deg: 360 * MIN_REVOLUTIONS, duration: TOTAL_DURATION, ease: none, onUpdate: () { document.getElementById(hand-min).style.transform rotate(${minState.deg}deg); }, }, 0, ); // Second hand: SEC_REVOLUTIONS full rotations over TOTAL_DURATION (faster) const secState { deg: 0 }; tl.to( secState, { deg: 360 * SEC_REVOLUTIONS, duration: TOTAL_DURATION, ease: none, onUpdate: () { document.getElementById(hand-sec).style.transform rotate(${secState.deg}deg); }, }, 0, ); // Pattern 2 — Pulse (recording dot, ring opacity inverse) const pulseState { p: 0 }; tl.to( pulseState, { p: Math.PI * 2 * PULSE_CYCLES, duration: TOTAL_DURATION, ease: none, onUpdate: () { const dotScale 1 Math.sin(pulseState.p) * PULSE_DOT_AMP; const ringScale 1 Math.sin(pulseState.p Math.PI / 2) * PULSE_RING_AMP; const ringOpacity PULSE_RING_OPACITY_BASE Math.sin(pulseState.p) * PULSE_RING_OPACITY_AMP; const dot document.getElementById(rec-dot); const ring document.getElementById(rec-ring); dot.style.transform scale(${dotScale}); dot.style.transformOrigin 60px 60px; ring.style.transform scale(${ringScale}); ring.style.transformOrigin 60px 60px; ring.style.opacity String(ringOpacity); }, }, 0, ); // Pattern 3 — Dash flow (data stream) const flowState { offset: 0 }; tl.to( flowState, { offset: DASH_FLOW_TOTAL_OFFSET, // negative for L→R flow, positive for R→L duration: TOTAL_DURATION, ease: none, onUpdate: () { document.getElementById(data-flow).style.strokeDashoffset String(flowState.offset); }, }, 0, ); // Brand fades in early tl.from(.brand, { opacity: 0, y: 16, duration: 0.6, ease: power3.out }, BRAND_AT); window.__timelines[enrichment-scene] tl; /script从代码结构可以清晰看到该规则与 HyperFrames 确定性契约的贴合时间线暂停创建、同步构建、注册到window.__timelines且键与data-composition-id一致。这套要求与 hyperframes-core/references/determinism-rules.md 中“动画运行时契约”逐条对应——不允许Date.now()/performance.now()、不允许repeat: -1、不允许在async/setTimeout/Promise/事件回调中构建时间线因为渲染器是对每个时间值做一次全新 seek任何依赖“按顺序播放累计状态”的实现都会在并行采样时失步。规则文档也在“关键约束”中强调SVG 子元素上不得使用 CSSanimation连续动画必须由时间线驱动否则会与 HyperFrames 的逐帧 seek 时钟脱离、产生闪烁。参数选择指南把“手感”量化成可调区间规则文档最有实战价值的部分是把看似“凭感觉”的动效手感量化成区间与约束。全部核心常量及取值建议如下MIN_REVOLUTIONS—— 分针在TOTAL_DURATION内的整转数区间0.5–2.0连续可调越快越像延时摄影约束若可见结束帧重要避免整数转数否则动画“恰好回到起点”观感突兀SEC_REVOLUTIONS—— 秒针在TOTAL_DURATION内的整转数区间4–10必须明显快于分针约束SEC_REVOLUTIONS MIN_REVOLUTIONS × 3否则“秒针更快”的速度差读不出来PULSE_CYCLES—— 3–5 秒合成内脉冲周期数区间2–4效果≥5 读作“焦虑的闪烁”≤1 读作“被遗忘”PULSE_DOT_AMP—— 圆点缩放幅度区间0.05–0.20效果0.05 呼吸感breathing0.20 搏动感throbbingPULSE_RING_AMP—— 外圈缩放幅度通常应低于 DOT_AMP区间0.04–0.12约束必须 PULSE_DOT_AMP否则外圈反客为主盖过圆点PULSE_RING_OPACITY_BASE / PULSE_RING_OPACITY_AMP—— 外圈透明度基线 正弦振幅区间BASE 0.4–0.6AMP 0.3–0.5约束BASE − AMP ≥ 0且BASE AMP ≤ 1不越界DASH_FLOW_TOTAL_OFFSET——TOTAL_DURATION内stroke-dashoffset的总位移区间−400 ~ −100负值 自左向右或 100 ~ 400自右向左效果绝对值大 流得快小 缓慢漂移约束必须是 dash 周期dash gap的整数倍否则循环结束帧会出现相位跳变phase jumpBRAND_AT—— 品牌文案淡入时刻区间0.3–1.0 秒太早会与图标入场抢注意力太晚显得“贴上去的”缓动族ease family选择旋转 none线性运动本身就是目的脉冲相位驱动 none曲线交给 sin品牌文案入场 power3.out这些区间直接服务于“图标是装饰不是标题”的定位——细节节奏以观感小、确定性高为默认。可结合同技能的 sine-wave-loop 文档互相印证该文档强调脉冲相位驱动必须ease: none非线性的相位 tween 会破坏正弦波形且“不同部件用 π/2 相位错开同步运动显得机械、失相位才显得有生命”——这正是时钟分秒针、圆点与圆环差分运动背后的同一套美学原则。关键陷阱SVG 旋转中心与 CSS transform-origin 的 bbox 陷阱这是规则文档用两个“❗”标注的最重要实现细节务必在动笔前理解。陷阱一SVG 内绕显式点旋转不要依赖 CSS transform。对 CSS 组合transform: rotate(...)transform-origin: 60px 60pxtransform-box: fill-box文档明确指出其原点是在元素自身 bbox 局部坐标系中解释的不是viewBox 坐标。对于细长linebbox 就是线条自身的窄包络60 60在 bbox-local 中指向线条外部的一个点结果是指针不是绕轴心原地旋转而是沿一条偏离中心的弧线甩动。同理小内圆rec-dotbbox 是小圆本身而非整个 viewBox也会踩中同样的坑。正确写法是用 SVG 的transform属性并带上显式旋转中心// 绕 (cx, cy) 旋转 —— 中心点用 viewBox 坐标显式给出 el.setAttribute(transform, rotate(${deg} ${cx} ${cy}));陷阱二绕中心点缩放同理。不要依赖 CSS 原点而是用“平移—缩放—平移回去”的组合el.setAttribute(transform, translate(${cx} ${cy}) scale(${s}) translate(-${cx} -${cy}));这与同类规则中的另一条实践经验遥相呼应——svg-path-draw 文档在处理圆环起始角度时同样使用“styletransform-origin: 100px 100px; transform: rotate(-90deg);”来让描边从 12 点钟方向开始。SVG 变换原点是一个高频坑区两条规则都在各自的示例中显式规避。关键原则与硬约束在 HyperFrames 内成立的前提规则文档列出的原则可归纳为几条判断标准连续动画必须放进时间线——绝不用 CSSkeyframes或requestAnimationFrame二者都会与 HyperFrames 的逐帧 seek 失步见 determinism-rules 的解释。幅度保持克制——图标是装饰不是标题脉冲缩放严格控制在上述区间转速按合成时长校准而不是按“绝对时间感”拍脑袋。同一图标的不同部件处于不同相位——分针秒针不同速、圆点与圆环相差 π/2。纯同步 机械相位错开 有生命。若微动效是整场的高光节拍戏剧性峰值后合成必须继续 ≥ 1 秒climax dwell ≥ 1s否则观众来不及“读完”这个动画。对应的硬约束清单Critical Constraints时间线必须暂停gsap.timeline({ paused: true })注册键 data-composition-id对应window.__timelines[enrichment-scene]SVG 子元素上无 CSSanimation——必须是时间线驱动每个可动子元素的transform-origin都要显式设置流动/虚线线条使用stroke-linecap: round保证虚线边缘干净用id定位 SVG 子元素——document.getElementById足够选择器链进svg与 HTML 行为一致组合方式把微动效编进更大的场景规则文档在结尾给出三种跨规则组合路径均指向同技能内的相邻文件svg-path-draw—— 轮廓先描画enrichment 随后激活“描画 → 唤醒”链条orbit-3d-entry—— 轨道环绕的条目本身就是被 enrich 的图标如品牌字标被一组时钟/齿轮环绕公转sine-wave-loop—— 整个图标做轻微浮动idle内部部件同时动画两层运动叠加再结合一个工程化组合——逐图标入场错峰per-icon entry stagger一排多个图标都在动时让每个图标的 enrichment 随其淡入时刻开始而不是全部同步——不同步反而显得有机feels organic。实现上可以复用 svg-path-draw 文档中多段描边的错峰思路后一段在上一段进行到约 70%–80% 时启动视觉上就衔接成连续动作而非 N 段孤立动画。这一节的引用关系在技能目录结构中真实存在SKILL.md 的“Routing”表指明“按触发器/标签挑选原子规则”查rules-index.md、“读某条规则的完整 HTML/CSS/GSAP 配方”查rules/name.md组合使用的完整场景级模板则见 blueprints-index.md。在 OpenMontage 管线中如何落地svg-icon-enrichment 规则文档位于 OpenMontage 仓库的 HyperFrames 动画技能包内.agents/skills/hyperframes-animation/。按 skills/core/hyperframes.md 的分层说明OpenMontage 把“创作语法”renderer_family与“技术运行时”render_runtime可选remotion/hyperframes/ffmpeg分离HTML/GSAP 原生友好的场景kinetic typography、product promo、图标动效密集的营销片头优先选择hyperframes。技术栈映射关系为edit_decisions.cuts[]→index.html时间线中的每个div 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），仅供参考
