用途:为 HyperFrames 视频合成提供全部动画知识,涵盖原子运动规则、多阶段场景蓝图、场景间转场、更广泛的运动设计技法,以及按运行时划分的适配器 API。合成契约(数据属性、子合成、确定性)见 hyperframes-core。
主要能力:默认方式是组合原子规则——从 rules-index.md 选 2-4 条规则,用一条暂停的 GSAP 时间线粘合,比从蓝图起步更快、代码更少。当场景匹配已有预设计多阶段模板(如品牌揭示、社会证明)或需要复杂 4-5 阶段编排的可运行代码时,加载 blueprints-index.md 中的蓝图。转场见 transitions/overview.md 与 transitions/catalog.md;技法见 techniques.md。
运行时选择:GSAP 是 95% 运动工作的默认选择,覆盖时间线编排、变换、缓动、错峰,所有原子规则均基于 GSAP;Lottie 用于自带预烘焙时间线的资源;Three.js 用于 3D 场景与着色器视觉;Anime.js 用于轻量补间;CSS 用于简单重复装饰;WAAPI 用于原生关键帧;TypeGPU/WebGPU 用于 GPU 渲染画布。多运行时可在同一合成中共存,各自注册到对应全局对象以便统一 seek。
使用方式:按路由表查阅对应文件;用脚本审计编排:node skills/hyperframes-animation/scripts/animation-map.mjs <composition-dir> --out <composition-dir>/.hyperframes/anim-map,读取 window.__timelines 上注册的时间线,输出 animation-map.json。
限制:须遵守 hyperframes-core 的不可协商规则(单一暂停时间线、data-duration 决定长度、禁用 Math.random/Date.now/performance.now、禁用 repeat:-1、禁止在异步中构建时间线等)。动画层面还要求:布局常量须预先计算,不得在补间时用 getBoundingClientRect() 测量;空间运动只用 GSAP 变换别名(x、y、scale、rotation),不得用 width/height/top/left 做布局变化。仅在非 clip 元素或 clip 内包装器上使用核心允许的例外。