SuperAPI AI 工具集

motion-animation-patterns

设计与创作

查看项目

更新于 10-16 02:32

技能介绍

用途:在 React 19 应用中统一实现 Motion(Framer Motion)动画,保证动效一致、性能良好且可访问。适用于页面过渡、模态框/对话框进出场、列表错峰动画、悬停与点击微交互、骨架屏加载、折叠展开、Toast 通知等场景。

主要能力:提供集中式动画预设库(frontend/src/lib/animations.ts),要求所有动画从该文件导入而非内联数值。预设涵盖过渡时长(fast/normal/slow/spring/gentleSpring)、基础动画(fadeIn、fadeScale、scaleIn)、RTL 感知滑动(slideInRight、slideInLeft、slideUp、slideDown)、列表错峰(staggerContainer、staggerItem 等)、模态框(modalBackdrop、modalContent、sheetContent、dropdownDown/Up)、页面过渡(pageFade、pageSlide)、微交互(tapScale、hoverLift、buttonPress、cardHover)、加载态(pulse、shimmer)及工具类(toastSlideIn、collapse)。附带 references/animation-presets.md 与 examples/component-patterns.md。

使用方式:从 motion/react 导入 motion 与 AnimatePresence,从 @/lib/animations 导入预设并展开到组件上;条件渲染的进出场必须用 AnimatePresence 包裹,页面过渡可用 mode="wait"。

限制与注意:禁止内联动画值、禁止在条件渲染中省略 AnimatePresence、禁止直接动画 width/height 等布局属性、禁止与 CSS transition 混用;大列表慎用布局动画;需验证 60fps 并测试 RTL 与减弱动效偏好。具体安装命令与版本信息暂未提供。