用途：当需要为用 SVG 部件拼装的角色骨骼制作动画时使用本技能。
主要能力与规则：动画应作用于变换属性（x、y、scale、rotation），而非布局；使用时间线（timeline）编排多部件表演节拍；对 SVG 元素使用稳定支点（svgOrigin 或正确作用域内的 transform origin）；在 Remotion 中不要让 GSAP 通过 requestAnimationFrame 自行推进，而应由当前帧驱动一个暂停的时间线。
浏览器用法示例： gsap.set("#arm_right", { svgOrigin: "390 310" }); const tl = gsap.timeline({ defaults: { ease: "power2.inOut" } }); tl.to("#head", { rotation: -8, duration: 0.2 }) .to("#arm_right", { rotation: 35, duration: 0.4 }, "<");
Remotion 用法： const frame = useCurrentFrame(); const progress = frame / durationInFrames; timeline.progress(progress);
HyperFrames 用法：使用 HTML/SVG/GSAP 组件配合确定性时间线，并在最终渲染前通过 HyperFrames CLI 校验。
适用场景：SVG 角色骨骼动画制作，含浏览器预览与 Remotion 逐帧渲染。
限制与质量清单：部件在运动过程中应保持与支点连接；眨眼、视线和嘴型应足够分离以便辨识；姿势保持时长应足以传达情绪；帧采样应显示有意义的变化而非冻结动画。
参考来源：GSAP 变换与 SVG 处理 https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/ ；GSAP 时间线 https://gsap.com/docs/v3/GSAP/Timeline/ ；Remotion useCurrentFrame https://www.remotion.dev/docs/use-current-frame 。安装命令与收费信息暂未提供。