以 skill 自身的术语
处理 HyperFrames 合成中的推近、拉远、缩放、重新取景、Ken Burns 运镜、镜头移动、视觉匹配/甩镜切换,以及可安全跳转的 2D/3D 关键帧。支持 GSAP、CSS keyframes、Anime.js、WAAPI、FLIP、路径、遮罩、SVG 变形/描边、文字轨迹和 3D 深度。关键帧是一种姿态契约:可见状态、连续的主体一致性、可安全跳转的运行时、经过验证的像素。
聚焦于片段内部的视觉运动,而非片段组装或场景策略。要求同步运行时构建、已注册的时间线实例,以及确定性时序。作者需通过 hyperframes lint、check、keyframes 命令、聚焦的 --shot 诊断,以及在关键时刻的快照进行验证。
它产出什么
- 在 window.__timelines[compositionId] 中注册的 GSAP 时间线实例,paused: true
工作方式
- 01识别主体与状态
在编写关键帧之前,先识别动画主体、可见状态、最终状态和运行时。
- 02选择最小机制
选择能证明该提示的最小机制,仅当机制不明确时才查阅 references/keyframe-patterns.md。
- 03编写并注册
在声明的运行时中编写可安全跳转的关键帧,以同步方式构建并注册该运行时实例。
- 04通过诊断进行验证
使用 hyperframes lint、check、keyframes 命令、一次聚焦的 --shot,以及在关键时刻的快照进行验证。
- 05修复并重新测试
如果验证失败,先修复源关键帧,再重新运行最小的失败诊断,然后才进行渲染。