用途:animate 用于审计项目中的每个交互元素,添加或修正 UI 动画与微交互,让界面更具质感。
主要能力:按元素优先级逐个处理,用正确时长与缓动补全或修复动画;通过截图与录屏验证动画效果;不触碰触发布局变化的属性;识别 Framer Motion、Motion One 或纯 CSS/Tailwind 并采用对应实现方式。
使用方式:先确认开发服务器运行(如访问 http://localhost:3000 返回 200),检查动画库,安装并验证 Playwright,然后写入 _animate_verify.mjs 验证脚本,用 --url、--selector、--action(hover/click/scroll/focus)等参数截图与录屏。受登录保护的页面可复用或新建认证状态,示例命令:TEST_EMAIL=you@example.com TEST_PASSWORD=secret node _animate_auth.mjs。之后进行动画审计,查找按钮、弹窗、下拉、卡片、提示、骨架屏、滚动揭示、标签页等元素并分级,按积分排序后进入迭代循环。
规则与限制:只动画 transform 与 opacity;进入用 ease-out,退出用 ease-in,进入时长大于退出;单个 UI 元素不超过 400ms,滚动揭示可到 600ms;必须包含 prefers-reduced-motion;每个元素类型最多 3 次迭代;不改变功能与无障碍语义;仅当根目录存在 DESIGN-BRIEF.md 时按其 Animation level 调整,未提供的细节暂未提供。