hyperframes-animation
HyperFrames动画知识库，快速生成确定性动画
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hyperframes-animation。 它的用途是：HyperFrames动画知识库，快速生成确定性动画 完整的 Skill 内容见：https://321skill.com/skills/hyperframes-animation-x-8/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我想用GSAP创建一个文字渐入效果，再配合Lottie图标，两段动画间隔0.5秒。' 它会从HyperFrames知识库中检索GSAP适配器的Fade规则和Lottie适配器的图标动画蓝图，生成带时间线控制的代码，并确保动画在单暂停时间线上同步且可seek。
介绍
HyperFrames Animation 是一个专门为前端动画开发设计的知识库，帮助开发者和设计师高效创建高质量动画。它解决了动画开发中常见的痛点：如何快速组合原子运动规则、如何在不同运行时（如GSAP、Lottie、Three.js）之间切换、如何保证动画的确定性和可回溯性。通过提供原子运动规则、多阶段场景蓝图、场景过渡模板以及24种命名文本动画效果，你无需从零开始编写复杂动画逻辑。
使用方式非常灵活：你可以从库中挑选2-4条原子规则自由组合，或直接加载一个完整的场景蓝图，也可以查询特定运行时的API（如GSAP的缓动函数、Lottie播放器控制、Three.js动画混合器）。此外，它还支持审查现有动画编排（动画映射）并给出优化建议。所有动画都基于HyperFrames原生特性：单暂停时间线、seek安全、确定性执行，确保动画行为可预测。
适合前端开发工程师、UI/UX设计师、视频剪辑师以及内容创作者，尤其是需要跨平台（Web、移动端、3D）实现复杂动画效果的专业人士。无论你是制作产品演示、宣传短片、文字动画，还是课程课件中的动态演示，都能从中获得即用方案。
使用建议：先明确目标运行时（如纯Web用GSAP、需要SVG动画用Lottie），然后选择对应的适配器模块。对于复杂场景，推荐先加载蓝图再进行微调，而非从零组合原子规则。注意该知识库专注于确定性动画，不适合需要随机性或物理模拟的场景。
核心特点
与普通动画库不同，HyperFrames集成了7种运行时适配器（GSAP、Lottie、Three.js等），并提供原子规则+蓝图双模式，所有动画在单暂停时间线上确定性执行，seek安全，可追溯。
注意事项
不适合需要物理引擎模拟、随机粒子效果或非确定性动画的场景。
常见问题
如何快速创建一个淡入淡出动画？
选择GSAP适配器，加载原子规则中的'Fade In/Out'，指定持续时间和缓动函数即可。
能在Three.js中复用Lottie动画吗？
不能直接复用，但可以分别使用对应适配器，通过场景蓝图将两者同步到同一时间线上。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hyperframes-animation-x-8/raw/index.md 读取 hyperframes-animation 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hyperframes-animation-x-8/raw/index.md（查看排版版本）