hyperframes-animation
HyperFrames动画知识库，提供原子级动画规则、场景蓝图与多运行时适配器。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hyperframes-animation。 它的用途是：HyperFrames动画知识库，提供原子级动画规则、场景蓝图与多运行时适配器。 完整的 Skill 内容见：https://321skill.com/skills/hyperframes-animation/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我需要为产品首页的标题设计一个吸引人的入场动画，使用GSAP，希望有弹性效果和渐显。’，它会引导你查阅“弹性”原子规则在GSAP适配器中的具体实现（如`elastic.out`缓动函数），并结合“渐显”规则，快速生成组合代码片段。或者，你可以直接询问：‘有没有适合数据仪表盘场景的动画蓝图？’，它会提供多阶段场景蓝图的描述和加载方式。
介绍
该Skill旨在解决前端开发者在实现复杂、高质量动画时面临的知识碎片化和跨运行时兼容性问题。它并非一个运行时库，而是一个集成了原子动画规则、多阶段场景蓝图、场景过渡技巧以及七大主流动画运行时（如GSAP、Lottie、Three.js等）适配器API的知识库。开发者可以像查阅字典一样，快速查找特定动画效果（如“弹性缓动”）在目标运行时中的具体实现方式，或直接加载预设的场景蓝图来组合复杂的动画序列。
使用时，开发者可以根据任务需求灵活选择路径：对于简单动画，可以挑选2-4条原子规则进行组合；对于复杂场景，可以直接加载现成的多阶段场景蓝图；当需要针对特定运行时（如Three.js）进行优化或排查问题时，可以查阅对应的适配器API文档。它还提供了对现有动画编排的审查功能（动画地图）和24种预定义的文字动画效果。
该Skill非常适合前端开发者、UI设计师以及任何需要在Web项目中实现精细、可控动画的创作者。无论是开发数据可视化大屏、制作产品宣传页，还是构建交互式游戏界面，都能从中找到系统化的指导和现成的解决方案。
建议在项目初期或动画设计阶段使用，以统一团队的动画规范和技术选型。注意，它本身不执行动画，而是提供生成动画所需的知识和代码片段，因此需要结合具体的动画库或运行时使用。对于追求极致轻量、仅需基础CSS动画的场景可能过于复杂。
核心特点
与单一动画库（如GSAP）或零散的代码片段不同，它系统化地整合了跨多个主流动画运行时的“知识映射”和“设计模式”，提供从原子规则到完整场景蓝图的完整知识体系，并能对现有动画进行“编排审计”。
注意事项
不适合仅需简单、一次性CSS关键帧动画的超轻量级场景，其价值在于处理复杂、可维护的动画系统。
常见问题
这个Skill和GSAP库有什么区别？
它不是GSAP的替代品，而是包含了如何在GSAP（及其他6种运行时）中实现特定动画效果的知识和最佳实践指南。你可以把它看作GSAP等库的“高级使用手册”和“设计模式库”。
我能直接用这个Skill播放动画吗？
不能。它本身不播放动画，而是提供生成动画的规则、蓝图和API参考。你需要将学到的知识或代码片段，在你选择的动画运行时（如GSAP、CSS）中实现。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hyperframes-animation/raw/index.md 读取 hyperframes-animation 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hyperframes-animation/raw/index.md（查看排版版本）