用途:为 HyperFrames 组合提供全部动画知识,涵盖原子运动规则、多阶段场景蓝图、场景间转场、更广泛的运动设计技法以及按运行时划分的适配器。组合契约(数据属性、子组合、确定性)见 hyperframes-core。
主要能力:默认方式是组合原子规则——从 rules-index.md 选 2-4 条规则,用单条暂停的 GSAP 时间线粘合。当场景匹配已有预设计多阶段模板(如品牌揭示、社交证明),或需要可运行的复杂 4-5 阶段编排代码时,加载蓝图(blueprints-index.md 指向具体配方)。转场用 CSS 驱动,位于 transitions/overview.md 与 catalog.md。
使用方式:按需路由查阅——规则索引选模式、rules/<name>.md 看完整 HTML/CSS/GSAP 配方、blueprints/<id>.md 看场景配方、techniques.md 查运动设计技法;适配器覆盖 GSAP、Lottie/dotLottie、Three.js/WebGL、Anime.js、CSS 关键帧、WAAPI、TypeGPU/WebGPU 以及 HTML-as-texture 后处理。GSAP 是 95% 运动工作的默认运行时,各运行时实例注册到各自全局变量以便统一 seek。可用 node skills/hyperframes-animation/scripts/animation-map.mjs <composition-dir> --out <composition-dir>/.hyperframes/anim-map 审计编排。
限制:前提是 hyperframes-core 的不可协商规则(单一暂停时间线、data-duration 决定长度、禁用 Math.random/Date.now/performance.now、禁用 repeat: -1 等),此处不重述。动画层额外要求:布局常量须预计算,不得在补间时用 getBoundingClientRect() 测量;空间运动只用 GSAP 变换别名(x、y、scale、rotation),非空间属性限 opacity/color/backgroundColor/borderRadius,禁用 width/height/top/left 做布局变化。相关技能:hyperframes-core、hyperframes-creative、hyperframes-cli。