SuperAPI AI 工具集

motion-design

设计与创作

查看项目

更新于 10-15 17:18

技能介绍

用途:为界面添加有目的性的动画与微交互,在不牺牲性能的前提下提升用户体验。适用于按钮、开关、页面切换、滚动揭示、加载态与列表入场等场景。

主要能力:提供时长与缓动令牌(--duration-、--ease-);微交互模式(按钮悬停/按下、开关、点赞弹跳);页面过渡与 View Transitions API;滚动触发动画(animation-timeline 与 IntersectionObserver 两种方式);加载动画(骨架屏、spinner、三点弹跳);CSS 动画技法(transition 与 animation 选择、fill-mode);弹簧缓动;错峰列表;性能与减弱动画处理。

用法要点:先读 .agents/design-context.md,风格原型决定动画性格;有设计系统则复用其过渡令牌。时长方面,按钮 100-150ms、开关 200ms、下拉 200-250ms、弹窗 250-300ms、页面过渡 300-400ms、展开收起 250-350ms、加载循环 700-1200ms,退出比进入短约 20-30%。缓动上,进入用 ease-out,退出用 ease-in,位移用 ease-in-out,趣味反馈用弹簧。只动画 transform 与 opacity,二者由 GPU 合成,不触发布局或重绘;避免动画 width/height、top/left,will-change 仅在即将动画的元素上少量使用。列表错峰每项 40-80ms、总时长不超过 600ms,超过 8-10 项封顶。始终处理 prefers-reduced-motion,用透明度等非位移替代并给加载器非旋转兜底;闪烁不超过每秒 3 次,超过 5 秒的自动动画需提供暂停控制。验证时用 Playwright 截图对比动画中与静止态,并以 reducedMotion: 'reduce' 重跑确认内容可见且静止,再在 DevTools 检查长帧与 Layout。

限制:资料未提供官方站点信息、收费方式、安装命令或支持平台,暂未提供。