以 skill 自身的术语
该 skill 用于设计和实现微交互、动效设计、过渡效果以及用户反馈模式，以提升可用性并让用户获得愉悦体验。它提供了明确的时长指南：100-150ms 用于悬停、点击等微反馈，200-300ms 用于开关、下拉菜单等小型过渡，300-500ms 用于弹窗、页面切换等中型过渡，500ms 以上用于复杂的编排动画。
该 skill 涵盖了带骨架屏和进度指示器的加载状态、滑动关闭等手势交互、页面过渡，以及水波纹等反馈模式。它强调有意义的动效应传递信息而非仅作装饰，遵循四项原则：反馈用于确认操作，方向感用于展示元素移动，焦点用于引导注意力，连续性用于在过渡期间保持上下文。
它产出什么
- 带悬停、轻点和弹簧动画的按钮微交互
- 带脉冲动画的骨架屏加载状态
- 具有流畅弹簧式状态过渡的开关组件
- 使用 AnimatePresence 实现带透明度和垂直位移的页面过渡
工作方式
- 01按交互规模遵循时长指南
悬停、点击等微反馈使用 100-150ms，开关等小型过渡使用 200-300ms，弹窗等中型过渡使用 300-500ms，复杂动画使用 500ms 以上。
- 02选择合适的缓动函数
进入元素使用 ease-out（减速），退出元素使用 ease-in（加速），状态间移动使用 ease-in-out，需要活泼的过冲效果时使用 spring。
- 03尊重无障碍偏好设置
检测 prefers-reduced-motion 媒体查询，当用户请求减少动效时将动画时长缩短到 0.01ms，确保动画不会造成不适。