SuperAPI AI 工具集

animation-principles

设计与创作

查看项目

更新于 10-16 03:14

技能介绍

用途:将动画原则应用到某一个具体 UI 动效上,使界面显得自然、引导注意力并表达状态变化;适用于调校动画手感。产品级的时长与动效规范需另寻资料,当前未提供。

主要能力(缓动):ease-out 用于进入元素(减速);ease-in 用于退出元素(加速);ease-in-out 用于位置间移动;linear 仅用于持续动画(如进度条)。

时长参考:微动 50-100ms(按钮状态、开关);短 150-250ms(提示、淡入淡出、小幅移动);中 250-400ms(页面转场、弹窗);长 400-700ms(复杂编排)。

动效原则:每个动画都要传达信息;UI 中通常越快越好;遵循物理规律(加速、减速);相关元素协调编排;动画可被中途取消。

动画类型:进入(淡入、滑入、放大);退出(淡出、滑出、缩小);强调(脉冲、抖动、弹跳);过渡(形变、交叉淡化、共享元素);加载(骨架微光、转圈、进度)。

交错与序列:相关项按每项 30-50ms 交错;最重要的元素先行;序列总时长控制在 700ms 以内;相关移动方向保持一致。

最佳实践:支持 prefers-reduced-motion;不要为动画而动画;在低性能设备上测试;为响应感把动画保持在 400ms 以内;使用 will-change 或 transform 提升性能。

限制:资料未提供具体代码、安装命令、平台支持与价格信息。