用途:为 Svelte/SvelteKit + Tailwind 项目分析并实现有目的的 UI 动画,强调“不需要到处加动画”,按优先级聚焦关键节点:首屏介绍、悬停反馈、内容揭示、背景效果、导航过渡。
主要能力:按四阶段工作流推进。分析阶段扫描 src/routes/ 页面与 src/lib/components/ 组件,检查 tailwind.config.js 与 app.html 中已有动画/关键帧,列出动画候选并记录已安装的动画库(svelte/transition、auto-animate、motion 等),输出动画审计表。计划阶段把动画映射到组件,确定触发方式(加载、滚动进入、悬停、点击),评估工作量并分阶段落地。实现阶段扩展 Tailwind 配置、加入 reduced-motion 支持、创建可复用 actions(如 scrollReveal、mousePosition、staggerAnimate),并按模式应用动画。验证阶段做浏览器视觉检查、reduced-motion 验证、CLS 检查与性能审计。
使用方式:触发方式包括页面加载(CSS animation + animation-delay 做错落)、滚动进入(Svelte actions 配合 IntersectionObserver)、悬停(Tailwind hover: 或 mouseenter/mouseleave)、点击(Svelte 响应式语句驱动)。常见模式如用 svelte/transition 的 fly 配合 delay 实现子项错落,或编写 scrollReveal action 在元素进入视口时添加动画类。性能规则要求只动画 transform 与 opacity,避免动画布局属性。
适用场景:Svelte/SvelteKit 项目的界面动效设计与实现,尤其是需要兼顾性能与可访问性的场景。
限制:资料未提供具体安装命令、版本要求、收费与价格信息;部分能力依赖项目已安装的库(auto-animate、motion、GSAP)。可访问性要求全局 CSS 包含 prefers-reduced-motion 处理。