插件安装： 在运行 setup 或 freshness 命令之前，当此技能位于 HyperFrames 插件内部时，请遵循插件执行规则。独立安装则遵循下方的更新说明。
HyperFrames Keyframes
关键帧是一种姿势合约：可见状态、连续主体身份、安全寻址运行时、已验证像素。
对于广泛的场景制作，请使用 hyperframes-animation。对于完整的命令文档，请使用 hyperframes-cli。仅在需要选择实现机制而非视觉风格时，才使用 references/keyframe-patterns.md。
创作者编辑边界
关键帧负责视觉运动，而非剪辑组装。源范围内的硬切、修剪、拼接和重新排序属于 /hyperframes-core：为每个保留范围创作一个媒体元素，使用 data-start 和 data-duration 放置它，并通过 data-media-start 选择其源偏移。相邻范围构成硬切。交叉淡入淡出使用不同轨道上重叠的剪辑加上视觉不透明度关键帧；声音淡入淡出使用 /hyperframes-audio。
| 创作者请求 | 真实机制 |
|---|---|
| 推近/拉远 | 在剪辑内部的非时间视觉/裁切包装器上，使用带 x/y 或百分比平移的关键帧 scale。对于硬推近使用 set/short 补间，对于平滑移动使用补间。 |
| 平滑的多状态缩放或重新取景 | 保持一个主体包装器存活，并将多个缩放/重新取景状态作为姿势梯，带每段缓动进行创作。 |
| 平移、重新取景或肯·伯恩斯相机移动 | 对包装器平移和缩放进行动画处理。几何是创作的；这不是面部跟踪或自动语义重新取景。 |
| 连锁相机移动 | 在一个注册的安全寻址时间线上，链接标记的变换节拍。 |
| 匹配剪辑或扫视平移 | /hyperframes-animation 负责视觉交接；/hyperframes-registry 提供基元；关键帧保留创作的几何、方向和速度。没有自动的匹配帧发现。 |
| 裁切和遮罩重新取景 | 在内层视觉包装器上对 clip-path 或遮罩进行插值，以进行裁切/重新取景，不改变源时间。多边形关键帧可以形成多边形/遮罩过渡。 |
| 方向擦除剪辑或虹膜/揭示剪辑 | 在重叠的视觉剪辑之间对遮罩/剪辑边界进行动画处理；/hyperframes-animation 负责交接编舞。 |
| 分屏交接 | 保持两个视觉剪辑由 core 放置，然后对其内部裁切/遮罩包装器和分隔几何体设置关键帧。 |
| 恒定源重定时 | /hyperframes-core 拥有规范化的 data-playback-rate（0.1..10），用于渲染安全的画面和音调保持的声音。它对整个媒体元素是恒定的。 |
| 源速度渐变 | data-automation 中在 <video>/<audio> 上的 rate 通道（t 为剪辑秒数，v 为 0.1..10，对数插值）；它覆盖恒定速率。 |
| 冻结/保持 | 可以保持一个视觉姿势、最终源帧或完成的子合成。不支持任意的源中间冻结；预处理一个静态/派生片段，将其作为自己的剪辑放置，然后用另一个源范围继续。 |
当同时编辑画面和声音时，加载 /hyperframes-core、此技能用于视觉运动，以及 /hyperframes-audio 用于淡入淡出、交叉淡入淡出、音量自动化、避让/切入或效果于已放置的轨道上。
视觉过渡或裁切处理不是时间上的源修剪或拼接。/hyperframes-core 拥有时间线、剪辑时间和源范围；关键帧仅对位于这些剪辑内部的包装器上的可见交接或裁切进行动画处理。对于可复制的组合画面/声音配方，请使用 /hyperframes-core → references/creator-editing-recipes.md。
过程
- 识别动画主体、可见状态、最终状态和运行时。
- 选择能证明提示的最小机制。仅在机制不明确时阅读
references/keyframe-patterns.md。 - 在声明的运行时内创作安全寻址的关键帧。同步构建并注册运行时实例。
- 使用
hyperframes lint、hyperframes check、hyperframes keyframes、一个聚焦的--shot以及在证明时间的快照进行验证。 - 如果证明失败，修复源关键帧并在渲染前重新运行最小的失败诊断。
合约
- 命名移动的主体。
- 命名证明预期运动所需的姿势，包括最终状态。
- 对可见通道设置关键帧，而非隐藏的辅助状态。
- 当连续性重要时，保持对象身份。
- 仅在预期运动是替换或溶解时进行交叉淡入淡出。
- 保持可读或语义状态足够长的时间以便观察。
- 最后一帧是动画的一部分，不是清理。
- 除非被要求，否则不要重置到静止状态。
- 除非被要求，否则不要以黑色结束。
- 如果编辑起始场景，除非被要求重新设计，否则保留布局、文案、资源、颜色和最终状态。
运行时规则
GSAP：
- 在页面加载时同步构建
- 使用
gsap.timeline({ paused: true }) - 注册为
window.__timelines[compositionId] - 注册键必须匹配
data-composition-id - 不要为渲染关键运动调用
tl.play() - 保持重复次数有限
CSS 关键帧：
- 有限的持续时间和迭代次数
- 确定性的延迟
animation-fill-mode: both- 当时间属于某个剪辑时使用
data-start
Anime.js：
- 同步创建
autoplay: false- 有限的持续时间和循环
- 将每个实例推送到
window.__hfAnime
WAAPI：
- 有限的
duration fill: "both"- 确定性的构造
- 文本表面不列出 WAAPI；使用
--shot（它会寻址 WAAPI）和快照进行验证
永远不要用于渲染关键运动：
Date.now()performance.now()- 未设种子的
Math.random() - 悬停/滚动触发器
- 定时器
- 异步创建的时间线
- 未注册的
requestAnimationFrame - 无限循环
GSAP 骨架
const root = document.querySelector("[data-composition-id]");
const compositionId = root.dataset.compositionId;
const tl = gsap.timeline({ paused: true });
tl.addLabel("state-a", 0);
tl.to(".subject", {
keyframes: [
{ x: 0, opacity: 1, duration: 0.2 },
{ x: 120, opacity: 1, duration: 0.4, ease: "power2.out" },
{ x: 100, opacity: 1, duration: 0.2, ease: "power2.inOut" },
],
ease: "none",
});
window.__timelines = window.__timelines || {};
window.__timelines[compositionId] = tl;
使用标签表示语义状态。使用位置参数代替链式延迟。对稍后接触同一属性的 from()/fromTo() 补间，使用 immediateRender: false。
关键帧形式
- 数组关键帧：带每步持续时间的姿势梯。
- 百分比关键帧：一个补间内的精确时间。
- 属性数组：紧凑的多停止点变化。
- 当每个停止点带有自己的缓动时，父级使用
ease: "none"。 - 当每个片段应共享相同感觉时使用
easeEach。
不要从示例中复制数字距离或时间。根据实际合成几何和时间推导它们。
对于一个在两个盒子之间移动的主体，首选一个连续的变换补间或 FLIP。仅当观看者应感受到不同节拍时才将 x/y/scale 拆分为多个缓动关键帧；每个片段都会改变速度，可能被理解为卡顿。
通道
首选合成器/视觉通道：x/y/z、xPercent/yPercent、scale、rotationX/Y/Z、skew、transformOrigin、svgOrigin、opacity、autoAlpha、clip-path、遮罩、CSS 变量、SVG 路径/描边值、相机变换、着色器统一变量。
避免布局/生命周期通道：top/left/right/bottom、width/height、margin/padding、display、visibility、后期 DOM 创建、执行主体运动的辅助叠加层。
对于可见性变化，在已注册的可寻址 GSAP 时间线上使用 autoAlpha，或在显式边界上使用零持续时间 tl.set()。仅针对非剪辑元素或剪辑内部的包装器；永远不要针对 .clip 本身。永远不要对原始的 visibility 进行持续时间补间，也永远不要对 display 进行补间。
机制选择
选择能证明提示的最小机制：
| 需求 | 机制 |
|---|---|
| 同一主体改变框或层级 | 共享元素 / FLIP |
| 主体沿可见路径移动 | 路径行进 |
| 描边增长或描摹 | 描边绘制 |
| 一个形状变成另一个形状 | 形状插值 |
| 揭示边界可见 | 裁剪、遮罩或着色器统一变量 |
| 许多项目按顺序移动 | 交错 / 索引延迟 |
| 文本本身移动 | 行、词、字符或带细分 |
| 表面弯曲、拉伸或裁剪 | 父/子反向变换 |
| UI 有状态 | 显式状态机 |
| 场景有深度 | DOM 3D、Three.js 或 WebGL 相机/对象关键帧 |
机制可以组合，但每种机制都必须澄清想法。装饰不是证明。
时间
- 仅在需要澄清原因或方向时使用预期。
- 加速离开静止。
- 峰值证明明确展示机制。
- 后续运动体现能量和方向。
- 仅当主体应感到弹性或触感时使用过冲。
- 匀速路径行进通常需要
ease: "none"。 - 离散的 UI 状态通常需要尖锐的缓出。
- 重复元素需要有序偏移，而非完全相同的时间。
- 最终锁定需要比过渡姿势更长的保持时间。
- 平滑意味着同一主体上的连续速度。
- 不要重叠写入同一变换属性的补间，除非重叠是有意的且已验证。
- 避免在同一个英雄表面也在缩放或移动时，对大的
clip-path/遮罩变化进行动画处理；在主移动稳定后使用嵌套揭示。
文本
保留行盒、字间距、可读性和最终适配。如果文本内部移动，移动字符或遮罩带，而不仅仅是文本周围的装饰。对可读帧进行快照。
SVG
对于描边增长，首选 DrawSVGPlugin，然后是 stroke-dasharray/stroke-dashoffset。对于形状插值，首选 MorphSVGPlugin；在需要时将基元转换为路径，并将复杂的轮廓拆分为更简单的部分。
3D
单独的缩放是假深度。在稳定的父级上使用透视、transform-style: preserve-3d、z 轴行进、旋转、相机/世界运动、遮挡以及在对象交叉时的图层顺序。
使用一个或两个能揭示深度关系的诊断角度。如果有角度的证明未显示深度交叉，则改进 z 轴/相机/遮挡。
画布 / WebGL
通过确定性状态对相机位置、相机目标、对象变换、材质不透明度、着色器统一变量和后处理强度设置关键帧。从 HyperFrames 时间渲染。使用 --ghost，因为标记框无法看到内部画布运动。
CLI 证明
npx hyperframes lint
npx hyperframes check
npx hyperframes keyframes .
npx hyperframes keyframes . --json
npx hyperframes keyframes . --runtime all
npx hyperframes keyframes . --selector "<selector>" --shot "<file>" --samples <n>
npx hyperframes keyframes . --selector "<selector>" --shot "<file>" --layout strip --from <t0> --to <t1>
npx hyperframes keyframes . --shot "<file>" --ghost --angle <angle>
npx hyperframes snapshot . --at <times>
为真实的动画主体选择 <selector>。选择 <times> 表示第一帧、证明姿势、最终减去保持以及精确的最终帧。仅在必须证明深度时选择 <angle>。
| 工具 | 证明内容 |
|---|---|
keyframes | 目标、显式停止点、路径、轨迹、组合的父/子运动、CSS 停止点、Anime 注册 |
--shot | 幽灵、路径形状、时间间隔、DOM 3D 投影、聚焦的选择器证明 |
--layout strip | 原地运动、重叠、接触、细微缩放/不透明度、文本波浪 |
--ghost | 画布、WebGL、着色器运动、渲染的 3D |
snapshot --at | 遮罩、文本可读性、完整状态、最终锁定、黑色/重置尾部 |
如果选择器证明看起来有问题……
……[内容已截断用于翻译]