hyperframes-animation
HyperFrames 动画知识库，原子规则与多运行时适配器
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hyperframes-animation。 它的用途是：HyperFrames 动画知识库，原子规则与多运行时适配器 完整的 Skill 内容见：https://321skill.com/skills/hyperframes-animation-x-7/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'使用 HyperFrames 动画知识库，为我的产品介绍页面添加一个标题从左侧滑入并伴随淡入的效果，使用 GSAP 运行时，并应用缓动函数 easeOutCubic。' 它会根据原子运动规则组合出 GSAP 动画代码，包括时间线配置、缓动参数和 seek-safe 调用，可直接复制到项目中。
介绍
HyperFrames 动画知识库专为 HyperFrames 框架打造，解决了在统一动画架构下高效构建确定性动画的问题。它提供了原子运动规则、多阶段场景蓝图、场景过渡方案以及更广泛的运动设计技巧，让你无需在多个动画库间切换，即可实现从简单到复杂的动画效果。
使用方式灵活：你可以挑选 2-4 条原子规则自由组合，或直接加载预定义的场景蓝图；也可以查询特定运行时（如 GSAP 缓动函数、Lottie 播放器、Three.js 混合器）的 API 细节。此外，它还支持对现有动画编排进行审计（动画映射检查），并内置 24 种命名文字动画效果，满足常见动画需求。
适合前端开发者、UI 设计师和内容创作者，尤其是那些深度使用 HyperFrames 框架构建交互式应用、演示素材或宣传页面的团队。无论你是需要快速原型、生产级动画，还是进行动画性能调优，这个 skill 都能提供一站式参考。
建议在使用前熟悉 HyperFrames 的基础概念，以便充分利用其单暂停时间线、seek-safe 等特性。对于不需要 HyperFrames 约束的通用动画项目，可考虑直接使用原生动画库。注意，该 skill 不包含物理模拟或粒子系统等高级特效。
核心特点
与通用动画教程或 API 文档不同，HyperFrames 动画知识库专为 HyperFrames 框架定制，提供确定性单暂停时间线、seek-safe 特性，并集成七种运行时适配器（GSAP、Lottie、Three.js 等）和 24 种命名文字动画效果，可直接用于组合生成该框架下的动画代码。
注意事项
不适用于非 HyperFrames 框架的动画项目，也无法处理复杂物理模拟或粒子特效。
常见问题
这个 skill 支持哪些动画库？
支持 GSAP（默认）、Lottie、Three.js、Anime.js、CSS keyframes、Web Animations API、TypeGPU 七种运行时适配器，你可以根据需要选择或切换。
能直接生成动画代码吗？
可以。通过选择 2-4 条原子运动规则组合，或加载多阶段场景蓝图，即可生成对应运行时的动画代码，并自动适配 HyperFrames 的单暂停时间线。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hyperframes-animation-x-7/raw/index.md 读取 hyperframes-animation 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hyperframes-animation-x-7/raw/index.md（查看排版版本）