Anime.js 动画设计与预览

解决的问题

做前端动效时，常见问题不是“能不能写动画”，而是要在对话中快速确认效果、再拿到可复制的工程代码。Anime.js 能处理 CSS 属性、DOM、SVG 路径和时间轴，但参数、缓动、timeline 写法容易散落在文档里。若没有统一流程，结果常是演示和最终代码不一致，或者代码缺少 CDN、结构和注释，需要二次整理。

技能如何工作

该技能围绕三类输出工作：需求澄清、交互演示、完整代码。

• 先确认要动画的元素、效果、时长、是否循环。
• 可用 show_widget 生成自包含 HTML 小部件，从 CDN 加载 animejs@3.2.2，用按钮或自动播放触发效果。
• 再输出可直接复制的 HTML + JS，包含动画元素、anime() 配置、必要注释。

支持 transform、stagger、SVG path 和 timeline 等常见模式，并在需要时参考 references/api_reference.md 与 references/examples.md 检查属性和示例。

适用边界

它适合快速制作 UI 动效、原型演示和前端代码草图，不替代生产级动画系统。输出依赖 Anime.js 与 HTML/CSS/JS 环境，若项目已有动画库、构建约束或可访问性要求，需要额外适配。资料未描述复杂交互、性能优化或跨浏览器兼容测试，实际采用时仍应以真实环境验证为准。