Framer Motion实战：5分钟教你用React打造炫酷页面过渡动画

Framer Motion实战：5分钟教你用React打造炫酷页面过渡动画

最近在重构一个React项目时，我遇到了一个很具体的问题：页面切换时，内容总是“硬切”，用户体验非常生硬。用户反馈说，从一个列表页跳转到详情页时，感觉像是屏幕“闪”了一下，缺乏连贯性。这让我意识到，在单页应用（SPA）大行其道的今天，页面过渡动画早已不是锦上添花的装饰，而是提升产品质感、引导用户注意力的核心交互设计。经过一番调研和尝试，我最终选择了Framer Motion，它不仅完美解决了我的问题，其简洁优雅的API设计更是让我这个“动画恐惧症”患者也能轻松上手。今天，我就把自己从零开始，用Framer Motion实现丝滑路由过渡的实战经验分享给你，整个过程，真的只需要5分钟就能看到效果。

1. 为什么是Framer Motion？不仅仅是另一个动画库

在React生态里，动画库的选择其实不少。从经典的react-spring到轻量的react-transition-group，各有千秋。但Framer Motion之所以能迅速脱颖而出，成为许多团队的首选，背后有更深层的原因。它不仅仅是一个“做动画”的工具，更是一套完整的声明式动画设计系统。

首先，它的学习曲线极其平缓。你不需要预先掌握复杂的CSS关键帧动画或Web Animation API。Framer Motion的核心哲学是：将动画视为组件状态的自然延伸。一个元素从隐藏到显示，从A点移动到B点，就像React组件从stateA变化到stateB一样，你只需要声明它的初始状态（initial）和目标状态（animate），剩下的过渡效果，库会帮你以最流畅的方式完成。

其次，它的性能优化是“开箱即用”的。Framer Motion底层使用requestAnimationFrame进行调度，并智能地应用了will-change等CSS属性来提示浏览器进行硬件加速。这意味着，即使是在中低端设备上，复杂的路径动画或物理弹簧效果也能保持60fps的流畅度，开发者无需为性能优化耗费额外精力。

提示：Framer Motion对服务器端渲染（SSR） 和静态站点生成（SSG） 有着出色的支持，与Next.js、Gatsby等现代框架集成无缝，这对于需要SEO友好的应用至关重要。

最后，也是最打动我的一点，是它对交互手势的原生支持。拖拽、缩放、轻扫这些手势交互，在其他库中可能需要引入额外依赖或编写大量胶水代码，但在Framer Motion里，仅仅是为组件添加一个drag、whileTap属性那么简单。这种设计让实现富有表现力的微交互变得轻而易举。

为了更直观地对比，我们可以看看在实现一个简单的淡入淡出动画时，不同方案的代码差异：

这张表清晰地展示了Framer Motion在开发效率与功能完备性上的平衡。它把复杂留给了库内部，把简单和强大留给了开发者。

2. 5分钟快速上手：从零配置到第一个动画

理论说得再多，不如动手一试。让我们立刻开始，在5分钟内创建一个React项目并实现第一个Framer Motion动画。我假设你已经有了Node.js和npm（或yarn、pnpm）的基础环境。

2.1 项目初始化与安装

首先，创建一个新的React应用。如果你喜欢Vite的快速，可以这样操作：

npm create vite@latest my-motion-app -- --template react
cd my-motion-app
npm install

接下来，安装Framer Motion库：

npm install motion

是的，你没看错，包名就是motion。安装完成后，你就可以在项目中引入它了。

2.2 你的第一个动画组件

打开src/App.jsx，让我们用最简单的代码实现一个元素的淡入和放大效果。

import { motion } f