SuperAPI AI 工具集

animate-ui

设计与创作

查看项目

更新于 10-16 04:35

技能介绍

animate-ui 是 Prototyper UI 的动画约定文档,用于在编写、审查或调试动画/过渡代码时统一决策,例如为新组件添加动画或修改现有动画。

用途与结构:文档先给出可复制的模式,再列查找表、规则,最后是逐组件细节。五种模式覆盖约 95% 的动画工作,需原样复制类字符串:A 定位浮层(Popover、Menu、Tooltip、Select、Combobox、Context Menu、HoverCard、Menubar);B 居中 Dialog(含轻微过冲缩放);C 侧边 Sheet(按方向滑入滑出);D 按压反馈;E 状态过渡。

主要能力:定义缓动令牌(ease-smooth、ease-out-fluid、ease-in-quart 等)及进入/退出/屏内变化的决策树;时长分级从 100ms 到 350ms,退出比进入快 20%–33%;缩放取值表(浮层 0.95、Dialog 进入 1.02/退出 0.98、按压 0.97/0.98/0.95 等);定位浮层统一使用 origin-(--transform-origin)。

性能与限制:只动画 transform、opacity、clip-path;禁止 transition-all、直接动画宽高内外边距、运行时改 CSS 变量、长期使用 will-change;必须显式枚举过渡属性。交互动画优先用可中断的 CSS transition,浮层进出用关键帧。

无障碍:需加 motion-reduce:transition-none、motion-reduce:animate-none、motion-safe: 前缀、hover-only: 等,并提供减弱动效替代。

决策门:动画须有明确目的、出现频率低、能提升感知性能;键盘触发动作和每会话数百次的动作不加动画。文档还给出各浮层组件的精确类字符串与 Checkbox SVG 描画等特殊模式。具体安装与集成方式暂未提供。