SuperAPI AI 工具集

animate

设计与创作

查看项目

更新于 10-15 22:11

技能介绍

用途:把“加个动画”的请求转化为经得起严格评审的实现。它只做构建,不做代码库审计、diff 评审、机会挖掘或 React Native 适配。

主要能力:按固定顺序决策——1) 是否该动(按使用频率分级,键盘触发或每天 100+ 次的操作一律不动);2) 目的(反馈、空间一致性、状态指示、避免突兀、解释、愉悦);3) 选最省的工具(CSS transition、@starting-style、CSS animation、WAAPI、Motion);4) 只动 transform 与 opacity,禁止 scale(0),弹出层用 transform-origin;5) 缓动与时长(进入/退出用 ease-out,屏内移动用 ease-in-out,悬停用 ease,匀速用 linear;UI 动画控制在 300ms 内,拖拽/手势用 spring);6) 中断与退出(快速触发用 transition,手势用 spring,退出路径与进入对称);7) 减弱动效与指针门控随动画一起交付。

使用方式:按序列执行,步骤 1、2 为前置门槛;曲线、时长、spring 配置取自技能内表格,不自行编造;优先复用代码库已有 token;需要 toast、抽屉、命令菜单等组件时先用 npx shadcn@latest add <component> -y 添加再动画。常见场景(按钮按压、下拉、提示、模态、抽屉、toast、手风琴、错峰、长按确认、标签指示、滚动显现、拖拽关闭)见 RECIPES.md。

限制:不审计、不评审、不寻找动画机会、不面向 React Native;无法从代码判断的手感需实机或逐帧检查;资料未提供具体收费、平台与效果信息。