用途:为界面添加微交互、动效设计、过渡与用户反馈模式,提升交互的直观性与完成度。
主要能力与约定:React 组件动画优先使用 Framer Motion;CSS 动画仅使用 transform 和 opacity 以保证 60fps 性能;交互元素优先使用弹簧物理动画而非线性或缓动;所有动画必须可被用户取消或覆盖。
时间尺度:100-150ms 用于微反馈(悬停、点击);200-300ms 用于小型过渡(开关、下拉);300-500ms 用于中型过渡(模态框、页面切换);500ms 以上用于复杂编排动画。
无障碍:必须始终尊重 prefers-reduced-motion: reduce,当用户偏好减少动效时将动画时长设为 0,此为强制要求。
参考文件按需阅读:animation-libraries.md 用于选择或配置 Framer Motion、GSAP 或基于 CSS 的方案;microinteraction-patterns.md 用于构建按钮反馈、开关、涟漪、加载指示器、提示条;scroll-animations.md 用于实现滚动触发显现、视差或基于交叉观察的动画。
限制:资料未提供安装命令、具体代码示例、收费与平台信息,暂未提供。