hyperframes-animation
为HyperFrames提供全面的动画知识库与多运行时适配器。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hyperframes-animation。 它的用途是：为HyperFrames提供全面的动画知识库与多运行时适配器。 完整的 Skill 内容见：https://321skill.com/skills/hyperframes-animation-x-4/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我需要为产品介绍页制作一个文字逐字出现，同时背景元素淡入的动画，使用GSAP实现。’ 它会首先推荐2-3条相关的原子动画规则（如“打字机效果”、“交错淡入”），然后提供一个整合了这些规则的多阶段场景蓝图，并给出对应的GSAP API实现代码片段。
介绍
该Skill旨在解决开发者在实现复杂、高性能动画时面临的知识分散和跨运行时适配难题。它整合了原子级的动画规则、多阶段场景蓝图、场景过渡技巧以及广泛的动效设计知识，并内置了对GSAP、Lottie、Three.js等七大主流动画运行时的适配器。
使用时，开发者可以根据具体动画任务，灵活组合2-4条原子规则来构建效果，或直接加载预设的场景蓝图快速搭建复杂动画序列。对于特定运行时的API查询（如GSAP的缓动函数、Three.js的动画混合器），Skill也提供了便捷的查阅功能。
它非常适合需要精细控制动画逻辑的前端开发者、动效设计师以及全栈开发者，尤其是在使用HyperFrames框架或需要跨多个动画库进行开发的场景。
建议用户首先明确目标动画的运行环境（如GSAP或CSS），然后从原子规则或场景蓝图中寻找匹配的解决方案，并利用其提供的审计功能来分析和优化现有动画的编排。
核心特点
与单一动画库的Skill不同，它深度集成了HyperFrames框架的“单时间线、可安全跳转、确定性”等原生特性，并提供了覆盖七种主流动画运行时的统一知识接口与适配方案，实现了从设计规则到具体运行时API的无缝衔接。
注意事项
该Skill主要服务于HyperFrames框架及其兼容的动画运行时，对于非HyperFrames项目或使用其他小众动画库的场景，其核心价值可能无法完全发挥。
常见问题
这个Skill能帮我直接用GSAP写动画吗？
可以，它提供了GSAP运行时适配器，包含GSAP的API参考（如缓动函数、时间线控制）以及符合HyperFrames理念的GSAP动画编排最佳实践。
我没有用HyperFrames，能用这个Skill吗？
可以，其中的动画设计规则、多阶段蓝图和动效技巧是通用的，但其核心的“单时间线、可跳转”等高级特性需要HyperFrames运行时支持才能完全实现。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hyperframes-animation-x-4/raw/index.md 读取 hyperframes-animation 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hyperframes-animation-x-4/raw/index.md（查看排版版本）