SuperAPI AI 工具集

motion-system

设计与创作

查看项目

更新于 10-16 06:19

技能介绍

用途:把动效作为系统化设计令牌层来定义,而非零散动画集合,为产品建立统一的动效词汇,包括时长刻度、缓动曲线、编排规则与无障碍处理,使动画决策一致、有目的且可被任何团队实现。

主要能力:定义少量命名时长令牌,示例包括 duration-instant 50ms(即时状态变化)、duration-fast 100ms(小元素过渡)、duration-normal 200ms(多数过渡默认)、duration-moderate 300ms(中等元素过渡)、duration-slow 400ms(页面级过渡)、duration-deliberate 600ms(高强调时刻);令牌数量不宜超过实际用例,通常 4–6 个足够。定义语义化缓动令牌:ease-standard cubic-bezier(0.2, 0, 0, 1) 用于多数 UI 过渡,ease-decelerate cubic-bezier(0, 0, 0.2, 1) 用于元素进入,ease-accelerate cubic-bezier(0.3, 0, 1, 0.3) 用于元素离开,ease-spring spring / cubic-bezier(0.34, 1.56, 0.64, 1) 用于趣味或触感交互,ease-linear linear 仅用于循环动画。编排规则:相关元素进入时错开 30–50ms 并以最重要元素领衔;同一语义组使用相同时长与缓动;错开序列总时长不超过 500ms;方向保持一致。减少动效:在系统层处理 prefers-reduced-motion: reduce,禁用滑动、缩放、旋转,替换为即时状态变化或简单透明度淡入淡出,保留传达必要状态信息的动画(加载指示、进度),并全局覆盖时长令牌为 duration-instant(0ms 或 1ms)。

使用方式:将时长与缓动值定义为 CSS 自定义属性或平台等价令牌;在 :root 层级的 prefers-reduced-motion 查询中应用减少动效覆盖;为每个令牌记录名称、值、用例与实时示例;把动效令牌纳入设计令牌导出流程,与颜色、间距令牌并列。每个产品还应定义 3–5 条动效原则,例如有目的、快速、符合物理、无障碍。

适用场景:需要跨组件、跨团队统一动画决策的产品设计系统与前端实现。

限制:资料未提供具体安装命令、代码示例、平台支持范围、收费或价格信息,暂未提供。