mcpField
S
svg-character-animation

svg-character-animation

github.com/calesthio创意与媒体72.7k1.3k 次安装今天更新
代码仓库

关于 svg-character-animation

svg-character-animation 是用于制作 SVG 分件角色动画的技能，提供 GSAP 时间线、稳定支点及 Remotion 帧驱动动画的指导，并附有质量检查清单。

主要功能

  1. 01通过变换控制角色动作
  2. 02用 GSAP 时间线编排多部件动作
  3. 03为 SVG 元素设置稳定支点
  4. 04在 Remotion 中按帧驱动时间线
  5. 05动画质量检查清单

适用场景

  1. 01为 SVG 分件角色制作动画
  2. 02按时间线协调多个部件的动作
  3. 03依据当前帧驱动 Remotion 动画

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/calesthio/openmontage --skill svg-character-animation

安装后在 Claude Code 中输入/svg-character-animation确认已加载。

详细介绍

SVG 角色动画

在为由 SVG 部件构成的角色骨架制作动画时，使用此技能。

运行时规则

  • 为变换（x、y、scale、rotation）添加动画，而不是调整布局。
  • 使用时间轴编排多部件的表演节拍。
  • 对于 SVG 元素，使用稳定的枢轴点（svgOrigin 或正确限定作用范围的变换原点）。
  • 在 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 进行验证。

质量检查清单

  • 运动过程中，各部件在枢轴点处保持连接。
  • 眨眼、视线和嘴型彼此区分明显，便于辨认。
  • 姿势停留时间足够长，能够传达情绪。
  • 帧采样呈现有意义的变化，而不是静止动画。

来源

评论

支持 Markdown