SuperAPI AI 工具集

micro-animation-design

设计与创作

查看项目

更新于 10-15 21:12

技能介绍

微交互动效设计(Micro Animation Design)用于定义界面中的微交互、状态切换与反馈动画规范。

主要能力按类别划分: 反馈类:按钮按压缩小至 95%、100ms;开关滑动加变色 200ms;复选框勾选描绘 200ms;点赞/爱心放大加变色 300ms,使用弹簧缓动。 状态切换类:手风琴展开/收起用高度加透明度,250ms;标签切换滑动加淡入 200ms;模态框进入从 95% 放大加淡入 200ms,退出仅淡出 150ms(退出应快于进入)。 加载类:骨架屏微光渐变扫过 1.5s 无限循环;加载旋转 360°、800ms 无限;进度条按缓动填充宽度;内容淡入透明度 0→1,每项错开 50ms。 提示注意类:徽标脉冲缩放 1→1.1→1,600ms,新计数时触发一次;错误抖动 translateX 从 -4px→4px→0,300ms;成功勾号描绘 SVG 路径 400ms。

实现要点:为确保 60fps,只动画 transform 与 opacity;谨慎使用 will-change;始终遵循 prefers-reduced-motion。

适用场景为网页与应用的交互细节设计。资料未提供安装命令、平台支持、收费与价格信息,暂未提供。