🌟 让 React 组件动起来！Framer Motion 入门指南

3Katrina
295 阅读3分钟

前言

大家好呀！👋 今天想和大家分享一个超棒的动画库——Framer Motion！如果你想让你的 React 应用变得更加生动、流畅，那它绝对是你的不二之选。


🎬 什么是 Framer Motion？

Framer Motion 是一个专为 React 打造的动画库，它提供了简单易用的 API，让我们可以用几行代码就能实现丝滑的动画效果。无论是微交互、页面过渡，还是复杂的动画序列，它都能轻松搞定！

它的核心思想是：声明式动画。也就是说，我们只需要告诉组件“初始状态是什么”、“最终状态是什么”，以及“如何过渡”，剩下的就交给 Framer Motion 自动处理啦！


✨ 为什么选择 Framer Motion？

对比传统 CSS/React 动画

在传统方式中，我们通常需要用 CSS transition 或 React 的 useState + className 切换来实现动画，代码较为繁琐。例如，实现一个简单的淡入效果：

传统 CSS Transition 方式

import { useState } from "react";
import "./styles.css"; // 需要额外写 CSS

const TraditionalFadeIn = () => {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div
      className={`box ${isVisible ? "fade-in" : ""}`}
      onClick={() => setIsVisible(true)}
      style={{ background: "skyblue", padding: 20 }}
    >
      <h2>传统方式实现的动画</h2>
    </div>
  );
};

// styles.css
.box {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.box.fade-in {
  opacity: 1;
}

使用 Framer Motion

import { motion } from "framer-motion";

const MotionFadeIn = () => {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
      style={{ background: "skyblue", padding: 20 }}
    >
      <h2>Framer Motion 实现的动画</h2>
    </motion.div>
  );
};

xixi.gif

为什么 Framer Motion 更优？

  1. 简单易上手：语法直观，学习成本低。
  2. 高性能：基于 CSS 和 GPU 加速，动画流畅不掉帧。
  3. 强大的动画控制：支持弹簧动画、关键帧、手势交互等高级功能。
  4. React 友好：完美集成 React，支持组件化动画。
  5. 功能更强大：传统 transition 只能处理简单属性变化，而 Framer Motion 支持物理弹簧动画、手势交互等高级特性。

Framer Motion 让动画开发从“手动挡”升级到“自动挡”，既减少代码量，又解锁更多可能性！


🛠 快速上手

接下来讲讲使用Framer Motion的步骤

1. 安装

首先，在你的 React 项目中安装 Framer Motion：

npm install framer-motion
# 或者
yarn add framer-motion

2. 基本动画示例

让我们来写一个简单的“淡入+上浮”动画组件：

import { motion } from "framer-motion";

const FadeInBox = () => {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}  // 初始状态：透明 + 向下偏移
      animate={{ opacity: 1, y: 0 }}   // 动画结束状态：不透明 + 回到原位
      transition={{ duration: 0.5 }}  // 动画时长 0.5 秒
      style={{
        background: "linear-gradient(90deg, #ff6b6b, #4ecdc4)",
        padding: "20px",
        borderRadius: "8px",
        color: "white",
      }}
    >
      <h2>Hello, Framer Motion! 👋</h2>
    </motion.div>
  );
};

export default FadeInBox;

效果：组件会从透明状态淡入，同时从下方平滑上升，整个过程仅需 0.5 秒！ 看看效果吧

gsfa.gif

3. 进阶动画：悬停 & 点击效果

Framer Motion 还支持交互式动画，比如鼠标悬停（whileHover）和点击（whileTap）：

<motion.button
  whileHover={{ scale: 1.05, boxShadow: "0 4px 8px rgba(0,0,0,0.2)" }}
  whileTap={{ scale: 0.95 }}
  style={{
    background: "#4CAF50",
    color: "white",
    padding: "10px 20px",
    border: "none",
    borderRadius: "4px",
    cursor: "pointer",
  }}
>
  Click Me!
</motion.button>

效果：

  • 鼠标悬停时，按钮轻微放大并显示阴影。
  • 点击时，按钮会稍微缩小，模拟按压效果。

xt.gif


🎨 更多炫酷功能

Framer Motion 的强大之处远不止于此，你还可以实现：

  • 手势动画（拖拽、滑动）
  • 关键帧动画（多阶段动画）
  • 布局动画（自动平滑过渡）
  • SVG 动画（路径绘制、变形）

🏁 总结

Framer Motion 让 React 动画变得超级简单！无论是简单的淡入淡出，还是复杂的交互式动画，它都能优雅地实现。如果你想让你的网站或应用更加生动有趣，不妨试试它吧！

💡 小建议：先从简单的 opacity 和 scale 动画练手，再逐步尝试更复杂的效果。官方文档（www.framer.com/motion/）也非常友好，推荐阅读！

希望这篇小教程对你有帮助！如果有任何问题，欢迎在评论区交流~ 😊

avatar
文章
阅读
粉丝