用途:为现有组件或已接受的 UI 方案实现界面动画,涵盖缓动、弹簧、打断、退场与 reduced motion 适配。执行时保留宿主的任务流程、当前阶段、工具可用性与输出约定;规划只描述动效,实现在宿主的编写阶段完成。
主要能力与规则:先判断频率与目的——高频(如快捷键、命令面板)不做动画;键盘触发的动作视为不适合动画。目的须命名为反馈、空间一致性、状态指示、避免突兀变化、解释或少数首次场景的愉悦感之一,否则不构建。工具按需自下而上选择:CSS transition、@starting-style、CSS animation、WAAPI、Motion。属性只用 transform 与 opacity,不用 scale(0),入场用 scale(0.9–0.97) 加 opacity: 0;弹出层以触发器为 transform-origin,模态框居中。缓动按场景选 ease-out、ease-in-out、ease 或 linear,UI 不用 ease-in;提供强缓动曲线与时长表,UI 动画一般低于 300ms。拖拽、手势、可打断场景用弹簧,并说明弹簧参数。快速重复触发用 transition 而非 keyframes;退场与入场路径对称。减弱动效与 hover 指针门控随动画一并交付。
使用方式:按顺序执行构建步骤,复用项目现有 stack 与 motion token,不另建并行体系;能覆盖常见组件(按钮按下、下拉、提示、模态、抽屉、吐司、折叠、交错、按住确认、标签指示、滚动显现、拖拽关闭)时参考 references/RECIPES.md。完成后简要说明门控结果、所选食材,以及需靠实际体验确认的部分。
适用场景:既有界面组件或已接受的 UI 方案中加入动效。
限制:安装与具体调用方式、价格与平台信息暂未提供;不得编造曲线、时长或弹簧配置;测量结果仅在真实观测后报告,视觉估算与未能执行的检查须明确标注。