在前端开发过程中，我们经常需要在页面上有动态效果，通过添加 css 动画是一种传统方式。然而，在大型应用程序中，手动管理动画状态可以变得非常麻烦。此时，现代前端库和框架为我们提供了很多使用更简单、灵活的动画工具。其中，npm 包 Framer-motion 是一种非常常用且功能强大的工具。
Framer-motion 是一个基于 React 的动画库，它提供了很多功能强大、易于使用和灵活的组件，能够轻松创建复杂的、流畅的交互动画。这篇文章将介绍如何在项目中使用 Framer-motion 包制作动画效果。
安装 framer-motion
在开始使用 Framer-motion 之前，我们需要在项目中安装这个包。我们可以通过运行以下命令安装：
npm install framer-motion --save
使用 Framer-motion
接下来我们来看看如何使用 Framer-motion 包，主要有如下 4 个组件：
- motion
motion 是 Framer-motion 的基本组件，它的作用是将其子元素用动画包装起来，通过 Tween 的形式实现渐进动画，motion 标签可以设置一系列 onClick、onDragEnd 等常用事件来实现特定的交互效果。
import { motion } from "framer-motion";
<motion.div animate={{ x: 100 }} />;上述代码表示创建一个简单的 div 元素，它将被向右移动 100px，通过 animate 属性来实现。
- AnimatePresence
AnimatePresence 用于对整个组件进行进入和退出动画控制，可以用于路由切换和区块切换时控制动画流程，如下代码表示一个简单的在 div 元素在实现进入和退出动画：
-- -------------------- ---- -------
------ - ------- --------------- - ---- ----------------
----- ----------- - -
------- - -------- -- -- -------- --
-------- - -------- -- -- - --
--
----- --- - -- -- -
----- ----------- ------------- - ----------------
------ -
------- ----------- -- -----------------------------------------
-----------------
---------- -- -
-----------
----------------
-----------------
-------------
----------------------
--
--
------------------
--
--上述代码中，我们通过 useState 进行动态控制 isVisible 属性，点击 button 实现 div 的进入和退出动画，boxVariants 对象为 div 渐进动画的属性，AnimatePresence 组件用于包含 motion 组件，控制整个过程的渐进过渡。
- useAnimation
useAnimation 是一种 hooks 命名，它创建了一个能够控制动画的对象，通过控制对象状态达到控制动画的目的，使用方式如下：
-- -------------------- ---- -------
------ - ------- ------------ - ---- ----------------
----- --- - -- -- -
----- -------- - ---------------
----- ------------- - -- -- -
---------------- -- --- ---
--
------ -
-------------- ----------------------- -------------------
----- ---
----------------
--
--上述代码中，handleOnClick 函数实现了点击按钮 div 元素向右移动的效果，控制效果的在一开始创建了一个 useAnimation() 的对象，当点击之后通过对象的 start() 方法来控制 div 的暂停和开始。
- useDrag/useMotionValue
与 useAnimation 相似，useDrag 和 useMotionValue 组件是 Framer-motion 包提供的更灵活的动画控制组件，其中 useMotionValue 提供了一段平滑值的存储和动态修改，而 useDrag 可以控制一个 div 随拖动进行一些巧妙的控制。如下代码演示了拖拽一个 div 元素的过程：
-- -------------------- ---- -------
------ - -------- - ---- --------
------ - ------- --------------- ------- - ---- ----------------
----- --- - -- -- -
----- ------------ -------------- - ----------------
----- - - ------------------
----- - - ------------------
----- ------------ - ---------
------------ -- -- --------------------
---------- -- -- ---------------------
------- ------- -- -
----------------------
----------------------
--
---
------ -
-----------
-----------
-----
-----
---------- ------ ---------- - --- - - --
------------- --------- --- --
------------------ ----- -- ---- -- ------ ---- ------- --- --
-----------------
-
---- ---
-------------
--
--上述代码中，我们实现了一个能够拖拽的 div 元素，该元素拖拽后能保存其状态并进行过渡动画。
示例代码
最后，我们来看一下一段应用 framer-motion 制作的 FlipCard 组件的示例代码，具体实现的效果如下图：
-- -------------------- ---- -------
------ - -------- - ---- --------
------ - ------- --------------- - ---- ----------------
----- -------- - -
-------- - -------- - --
------- - -------- --- --
--
----- -------- - -- ------ ---- -- -- -
----- ----------- ------------- - ----------------
----- ------------- - -- -- -
-------------------------
--
------ -
---- --------------------- ------------------------
---------------- --------------- ----------------
-----------
---------------------------
-------------- - ------ - --------
-------------------
------------------ - -------- - ----------
-------------
-
-------
-------------
-----------
---------------------------
-------------- - ------- - -------
-------------------
------------------ - --------- - ---------
-------------
-
------
-------------
------------------
------
--
--
------ ------- ---------上述代码中，我们通过创建一个 FlipCard 组件以及 front 和 back 的传递参数来实现一个美观的卡片翻转效果。
总之，Framer-motion 是一个非常实用的 React 动画库，它支持许多功能丰富、易于实现和灵活的动画工具，在大型项目开发中非常实用。希望这篇文章能够帮助你了解 Framer-motion 的使用和实现方式，同时也能给你带来更好的动画制作体验和控制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5ef99048403f2923b035b9e6