SuperAPI AI 工具集

animation-principles

设计与创作

查看项目

更新于 10-15 22:37

技能介绍

用途:将动画原则应用于 UI 动效,使界面交互自然、引导注意力并传达状态变化。

主要能力:提供缓动选择(ease-out 用于进入元素、ease-in 用于退出、ease-in-out 用于位置移动、linear 仅用于进度条等连续动画);时长分级(微 50-100ms 用于按钮状态与开关,短 150-250ms 用于提示、淡入淡出与小位移,中 250-400ms 用于页面转场与弹窗,长 400-700ms 用于复杂编排);动效原则(有目的、快速、符合物理、协调编排、可中断);动画类型(进入、退出、强调、过渡、加载);交错与序列(相关项间隔 30-50ms,先呈现最重要元素,总序列控制在 700ms 内,方向一致)。

使用方式:作为动效设计参考,在实现 UI 动画时按上述原则选择缓动、时长与编排方式。

适用场景:按钮状态、提示、页面转场、弹窗、加载态等界面动效设计。

限制:需支持 prefers-reduced-motion;避免无意义动画;在低性能设备上测试;响应式动画建议控制在 400ms 内;可用 will-change 或 transform 提升性能。具体实现代码与安装方式暂未提供。