SuperAPI AI 工具集

motion-scale

设计与创作

查看项目

更新于 10-15 21:36

技能介绍

用途:为设计系统生成一致的动画与过渡令牌,涵盖时长(duration)、缓动(easing)和延迟(delay),并尊重用户的减少动效偏好。

主要能力:提供时长刻度参考(instant 0ms、fastest 50ms、fast 100ms、normal 200ms、slow 300ms、slower 400ms、slowest 500ms);缓动曲线令牌(linear、ease-in cubic-bezier(0.4, 0, 1, 1)、ease-out cubic-bezier(0, 0, 0.2, 1)、ease-in-out cubic-bezier(0.4, 0, 0.2, 1)、ease-bounce、ease-elastic 等);延迟令牌与 stagger 序列延迟;语义化过渡别名(hover、focus、active、enter、exit、move、expand、collapse);输出 CSS 自定义属性、Tailwind 配置或 JSON 令牌三种格式。

使用方式:按流程选择时长刻度(通常 5-7 步)、定义基准时长(200ms 为标准)、选择缩放比例(1.5x 或 2x)、挑选缓动曲线、创建语义别名、加入减少动效支持、选择输出格式。CSS 输出以 :root 变量形式提供,Tailwind 通过 theme.extend 配置,JSON 以 motion.duration/easing/delay 结构组织。

适用场景:新项目动效令牌搭建、跨组件过渡时间标准化、替换硬编码动画值、实现 reduced motion、构建微交互模式,以及按钮悬停、模态框进出、下拉菜单、列表错峰动画、加载指示器、骨架屏等组件模式。

限制:资料未提供安装命令、包管理方式、版本信息、收费模式或平台支持范围;具体集成步骤需结合项目环境自行判断。减少动效提供三种策略(全部移除、减少而非移除、提供替代方案),需按产品需求选择。