SuperAPI AI 工具集

framer-motion

前端与建站

查看项目

更新于 10-15 18:31

技能介绍

用途:为 React 应用添加生产级动画,覆盖 motion 组件、variants、手势、页面过渡与滚动动画。

主要能力:motion 组件基础动画(initial/animate/exit/transition);whileHover、whileTap 等手势;variants 编排与 staggerChildren 交错;AnimatePresence 退出动画;whileInView 滚动触发;drag 拖拽与 dragConstraints;layout 与 layoutId 布局动画;tween、spring、inertia 过渡类型与内置/自定义缓动;useReducedMotion 等 hooks。

使用方式:安装 npm install framer-motion 或 pnpm add framer-motion,从 "framer-motion" 导入 motion 等。资料提供核心概念索引(motion-component、variants、gestures、hooks)、示例(page-transitions、list-animations、scroll-animations、micro-interactions)与模板(page-transition.tsx、animated-list.tsx)。

适用场景:页面过渡、列表动画、滚动动画、微交互、模态框、手风琴等。

限制与建议:尊重减少动效偏好,使用 useReducedMotion;layout 动画开销较大,按需使用;退出动画需包裹 AnimatePresence;交互用 spring,页面过渡用 tween;优先使用 opacity、scale、x、y 等 GPU 加速属性。具体版本、收费与平台支持暂未提供。