animejs-skills
为Claude提供专业的Anime.js v4动画库开发技能
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：animejs-skills。 它的用途是：为Claude提供专业的Anime.js v4动画库开发技能 完整的 Skill 内容见：https://321skill.com/skills/animejs-skills/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我需要一个按钮点击时，让卡片列表依次淡入并带一点弹性效果。”，它会基于Anime.js Skill，生成利用`stagger`函数和弹性缓动函数的完整JavaScript代码，并说明如何绑定事件。或者，你可以说：“创建一个时间线，让Logo先旋转，然后文字沿着一条贝塞尔曲线路径移动进来。”，它会提供使用`createTimeline`、`motionPath`等功能的实现方案。
介绍
该Skill为Claude深度集成了Anime.js v4动画库的专业知识，旨在解决开发者在网页中实现复杂、高性能动画时遇到的难题。它涵盖了从基础属性动画到高级时间线控制、SVG变形、滚动驱动动画等全场景功能。
使用时，开发者只需向Claude提出与网页动画相关的需求，例如“实现一个元素淡入并弹跳的效果”或“创建一个基于滚动的SVG路径绘制动画”，Claude便能基于此Skill生成精确的Anime.js代码，包括模块化导入、参数配置和最佳实践。
该Skill非常适合前端开发者、UI/UX设计师以及任何需要在Web项目中添加交互式动画的创作者。无论是构建数据可视化、产品展示页面还是交互式游戏，都能从中获得高效支持。
与同类动画库Skill相比，本Skill专注于Anime.js v4这一特定且强大的库，提供了其模块化架构、时间线同步、WAAPI集成等最新特性的深度支持，而非泛泛而谈通用动画概念，确保了代码的现代性和可优化性。
核心特点
本Skill深度聚焦于Anime.js v4的模块化API和最新特性（如createTimer、与Web Animations API同步），能生成充分利用其树摇优化、时间线精细控制等优势的代码，而非仅提供通用动画语法。
注意事项
不适合需要直接操作Three.js等3D库或复杂物理引擎的动画场景。
常见问题
如何用Anime.js实现滚动触发动画？
可以使用scroll-driven animations配置或结合Intersection Observer API与Anime.js时间线。
Anime.js能动画SVG路径变形吗？
可以，使用`d`属性进行SVG路径（morphing）动画是Anime.js的核心功能之一。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/animejs-skills/raw/index.md 读取 animejs-skills 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/animejs-skills/raw/index.md（查看排版版本）