SuperAPI AI 工具集

motion-react

前端与建站

查看项目

更新于 10-16 09:30

技能介绍

用途:作为 Motion for React(从 motion/react 导入,原 Framer Motion)的工作参考,用于构建或调试产品界面动效,覆盖退出动画、布局与共享元素过渡、弹簧、motion values、高度变化与手势。迁移前应先查看已安装版本与官方升级指南,主版本间改动不止重命名导入。

主要能力:用 initial/animate/exit 声明状态;AnimatePresence 让已卸载组件播放退场(key 必需;mode="wait" 适合图标切换,mode="popLayout" 适合状态切换与淡入淡出,initial={false} 跳过首次挂载动画,退场元素 props 会过期,需向 AnimatePresence 与元素同时传 custom 实现方向感知滑动)。variants 支持函数形式接收 custom。layout 可动画 CSS 无法动画的属性(flex-direction、justify-content),layoutId 用于共享元素形变。高度可通过 react-use-measure 的 useMeasure 与 animate={{ height }} 实现,但测量 ref 与动画元素必须分开,内层负责 padding,首帧 0 需回退为 "auto"。motion values(useMotionValue、useSpring、useTransform、useMotionTemplate)可绕开 React 每帧渲染,适合指针跟踪等高频场景;普通模板字符串不会响应。手势含 drag、dragConstraints、dragMomentum、whileTap。useReducedMotion 与 MotionConfig reducedMotion="user" 处理无障碍。

使用方式与限制:CSS 能合理实现时优先用 CSS;只有真实弹簧物理、布局变化、共享元素形变、卸载组件退场等场景才引入 Motion,同时权衡包体积。弹簧抖动时优先提高 damping;组件构建配方见 RECIPES.md。限制包括复杂布局动画出现形变、动画难以控制、调试像黑盒;文档多只覆盖理想路径。其余价格、平台等信息暂未提供。