hyperframes-animation
HyperFrames动画知识库与多运行时适配器，一站式解决复杂动画开发需求。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hyperframes-animation。 它的用途是：HyperFrames动画知识库与多运行时适配器，一站式解决复杂动画开发需求。 完整的 Skill 内容见：https://321skill.com/skills/hyperframes-animation-x-2/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我需要为产品首页的标题创建一个吸引眼球、逐字出现的打字机效果，并且要能兼容Lottie播放。”，它会引导你从24种命名文本效果中选择“打字机”，并生成适配Lottie播放器的动画配置代码。或者，你可以说：“审查当前这个Three.js粒子系统的动画序列，看看有没有性能瓶颈。”，它会调用‘动画地图’功能，分析并可视化你的动画编排，指出可以优化的阶段。
介绍
该Skill旨在解决开发者在实现复杂、高性能动画时面临的知识碎片化和多运行时适配难题。它整合了原子级的动画规则、多阶段场景蓝图、场景过渡技巧以及更广泛的动效设计知识，并原生支持包括GSAP、Lottie、Three.js在内的七种主流动画运行时，让开发者无需在不同技术栈间反复切换。
使用时，开发者可以根据具体动画任务，灵活选择2-4条原子规则进行组合创作，或直接加载预设的多阶段场景蓝图来快速搭建复杂动画序列。同时，Skill提供了针对各运行时的API速查（如GSAP缓动函数、Lottie播放器控制），方便开发者进行运行时特定的精细调整。
它非常适合需要处理复杂交互动画、数据可视化动效或跨平台动画一致性的前端开发者、UI设计师和动效设计师。无论是构建一个流畅的页面过渡，还是设计一个复杂的3D产品展示动画，都能从中找到系统化的指导和现成的解决方案。
建议在使用时，先通过其“动画地图”功能对现有动画的编排进行审计，理解其结构，再运用提供的规则进行优化或重构。对于文本动画，可以直接调用其内置的24种命名效果，快速提升界面的视觉吸引力。
核心特点
核心区别在于其“HyperFrames-native”架构，提供单一暂停时间线、支持安全跳转和确定性动画，确保了复杂动画状态的可预测性与可控性；同时，它罕见地将原子动画规则、场景蓝图与七大运行时（GSAP/Lottie/Three.js等）的专用API深度整合，形成从设计理论到具体技术实现的完整闭环。
注意事项
不适合仅需简单CSS过渡或对动画性能要求极低、无需复杂编排和状态管理的超轻量级场景。
常见问题
HyperFrames动画知识库能帮我做什么？
提供从原子动画规则、场景蓝图到具体运行时（如GSAP、Three.js）API调用的全套知识，用于设计、组合、调试和审计复杂动画。
支持哪些动画库或技术？
默认支持GSAP，并适配Lottie、Three.js、Anime.js、CSS关键帧、Web Animations API和TypeGPU共七种运行时。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hyperframes-animation-x-2/raw/index.md 读取 hyperframes-animation 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hyperframes-animation-x-2/raw/index.md（查看排版版本）