用途：该技能用于使用 Motion 库（https://motion.dev）完成所有动画实现工作，主要面向 React 组件，为界面添加动效、过渡、手势、滚动效果与交互式动画。
主要能力：支持基础动画（animate）、过渡配置（transition）、弹簧物理（spring，含 Gentle/Wobbly/Stiff 预设）、手势交互（whileHover、whileTap、drag 及 dragConstraints）、布局动画（layout）、滚动联动（useScroll、useTransform）、子元素交错（staggerChildren）、进出场动画（AnimatePresence）。可动画属性包括 GPU 加速的 transform 类（x、y、z、scale、rotate、skew 等）、视觉类（opacity、background、color、borderRadius）以及 SVG 专用（pathLength、pathOffset、pathSpacing）。
使用方式：React 中从 "motion/react" 导入 motion、AnimatePresence、useScroll、useTransform 等，通过 JSX 属性声明动画。示例：<motion.div animate={{ opacity: 1, y: 0 }} />；弹簧过渡 transition={{ type: "spring", stiffness: 100 }}。
适用场景：状态切换（加载→成功）、空间变化（进入/退出视图）、引导注意、确认用户操作；常见模式含加载旋转、Toast 通知、抽屉、手风琴。
限制与注意：应优先动画 transform 与 opacity，避免手动动画 width/height（改用 layout），避免滚动中动画，限制同时动画数量。需尊重 prefers-reduced-motion，Motion 会自动处理，弹簧变为即时过渡。时序建议：微交互 150-250ms，面板/模态 200-300ms，页面过渡 300-500ms。Motion 为 MIT 许可、生产可用，支持 TypeScript、可摇树优化，兼容 React 18+（含 Suspense）。