免费在 GitHub 公开中文介绍

svg-character-animation

为由SVG部件组成的角色添加头部、手臂和眨眼等动作，用GSAP编排表演，并支持在Remotion中按帧播放、在HyperFrames中验证动作。

原文查看原文说明

Animate SVG character rigs with GSAP, CSS transforms, Remotion frame control, and HyperFrames-compatible browser previews.

calesthio/OpenMontage

实测评分未实测

查看安装方法

适用场景

协调头部与手臂动作
检查眨眼、视线和口型
在Remotion中按帧同步播放
在HyperFrames中验证动作

中文介绍

功能

帮助为由SVG部件组成的角色添加动作与表情。使用GSAP和CSS变换调整位置、缩放和旋转，将多个部件的动作编排到同一时间轴上，制作歪头同时移动手臂等表演。也会检查关节在运动中是否保持连接，眨眼、视线与口型是否清晰，以及姿势保持的时间是否足以传达情绪。

适用场景

适合为已拆分部件的SVG角色制作动画。除了在浏览器中播放，也可用于配合Remotion的当前帧控制播放，或在HyperFrames最终输出前检查动作。

使用示例

“让SVG角色的头部与右臂协调运动。”
“根据Remotion的当前帧控制GSAP时间轴。”
“检查关节是否分离，以及表情是否清楚可辨。”

注意事项

对象须为由SVG部件组成的角色。在Remotion中，应暂停GSAP时间轴，由当前帧控制进度，不让其自动推进。在HyperFrames中，应在最终输出前通过CLI验证。此技能采用MIT许可证。

本介绍由 AI（OpenAI Codex）根据公开的 SKILL.md 撰写。准确的规格请查看下方原文。

文档检查

AI 根据 SKILL.md 的内容检查了需要注意的操作和使用前提。评分只依据实际运行的结果（实测对比）。

安全性发送数据、删除文件、执行命令等是否有说明: A良好所示代码用于变换和播放控制，不含外部发送、删除或凭据读取操作。
安装难易度所需工具和 API 密钥是否少且有说明: B部分不足展示GSAP、Remotion和HyperFrames CLI的用法，但没有安装步骤。

不计入评分。由 AI（OpenAI Codex）于 2026年10月23日评估。仅供参考，安装前请同时查看原文。

如果您认为评估有误，请申请复核

包含的文件（1）

SKILL.md1.6 KB

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

SVG Character Animation

Use this skill when animating character rigs made from SVG parts.

Runtime Rules

Animate transforms (x, y, scale, rotation) rather than layout.
Use timelines for multi-part acting beats.
For SVG elements, use stable pivots (svgOrigin or correctly scoped transform origins).
In Remotion, do not let GSAP advance with requestAnimationFrame; drive a paused timeline from the current frame.

Browser Pattern

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 Pattern

const frame = useCurrentFrame();
const progress = frame / durationInFrames;
timeline.progress(progress);

HyperFrames Pattern

Use HTML/SVG/GSAP components with deterministic timelines and validate via the HyperFrames CLI before final render.

Quality Checklist

Parts stay connected at pivots during motion.
Blinks, gaze, and mouth shapes are separate enough to read.
Pose holds are long enough to communicate emotion.
Frame sampling shows meaningful deltas, not frozen animation.

Sources

GSAP core transform properties and SVG handling: https://gsap.com/docs/v3/GSAP/CorePlugins/CSS/
GSAP timelines and sequencing: https://gsap.com/docs/v3/GSAP/Timeline/
Remotion useCurrentFrame: https://www.remotion.dev/docs/use-current-frame

评价

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

同一仓库的技能