在现代的网页和应用设计中，动画不仅仅是视觉的点缀，更是用户体验的重要组成部分。它能够使界面更具吸引力，提升交互的流畅性，甚至在不经意间传达品牌的个性和态度。然而，要创造出令人惊叹的动效并不容易——直到有了 Framer Motion。本文将带你深入探索 Framer Motion 的奥秘，掌握其核心概念和实用技巧，助你在界面设计的旅程中走得更远。

Framer Motion：是一个专业的动画和交互效果库，特别设计用于React应用程序的创建，它提供了简单且强大的工具，帮助开发者和设计师轻松地实现复杂的动画效果，从而增强用户界面的视觉吸引力和交互性，通过使用Framer Motion开发者可以轻松地创建各种动画，如过渡动画、交互式元素动画和响应式布局动画，从而提升其应用程序的用户体验，其官方地址为：地址 ：

目前Framer Motion需要React 18版本才可以，低版本的react项目是无法使用的，终端执行如下命令安装，如果是项目是升级到React 19的用户可以安装Framer Motion 12 alpha版，它目前可与React 19 RC配合使用，安装命令如下(因为大部分项目还是react18，所以本文就以18版本举例)：

<code># react18版本可安装

npm install framer-motion

# react19版本可安装

npm install framer-motion@12.0.0-alpha.0

Framer Motion提供了一个牛逼的组件：<motion />​，该组件可直接将其视为一个普通的HTML或SVG元素，然后我们可以直接为组件设置动画属性的效果，大大增强了动画功能，它可以接受多种属性来定义和控制动画的行为和外观，以下是一些常用的属性及其作用：

1）animate：指定元素的动画状态，可以是一个对象，其中包含要动画化的 CSS 属性及其目标值，也可以是预定义的动画变体（如"whileHover"）。

2）initial：定义元素的初始状态，当组件首次渲染时，会从这个状态开始动画到 animate 属性定义的状态。

3）exit：定义元素离开动画的状态，当元素即将从 DOM 中移除时，会执行这个状态的动画。

4）transition：定义动画过渡的时间、缓动函数（如 ease-in-out）、延迟等参数。可以是一个对象，每个属性的变化都可以定义不同的过渡效果。

5）variants：定义不同动画状态的集合，用于组件在不同状态之间切换时使用，可以定义多个状态集合，以便根据应用的逻辑选择不同的变体。

6）whileHover、whileTap等：提供预定义的动画状态，当用户与元素交互时自动触发，例如，whileHover 可以定义鼠标悬停时的动画效果。

7）drag、dragConstraints、dragElastic、dragMomentum：用于支持元素的拖拽行为，drag 表示元素是否可拖拽，dragConstraints 定义拖拽的约束条件，dragElastic 控制拖拽松弛度，dragMomentum 控制惯性效果。

8）layout、layoutId：控制元素布局和布局动画，layout 可以使元素根据其父容器重新布局，layoutId 则用于在不同页面或组件之间保持布局的一致性。

这些属性使得 <motion /> 组件非常灵活，能够满足各种复杂的动画和交互设计需求，怎么使用呢？直接打出下面的例子，通过motion组件设置一个div，然后其设置本身的css样式后，然后给组件motion.div设置动画效果：

最终呈现的效果如下所示：

当然<motion />也提供了使用强大的手势识别器扩展React的事件系统，它支持悬停、点击、平移和拖动等操作，非常的酷炫，如下给出代码：

<code>import { motion } from "framer-motion";

import './index.less'

const Motion = () => {

return (

<>

<div className="container">code>

<motion.div

className="box"code>

initial={ { opacity: 0, scale: 0.5 }} // 初始状态

animate={ { opacity: 1, scale: 1 }} // 动画状态

transition={ { duration: 2 }} // 动画过渡时长

whileHover={ { scale: 1.2 }} // 悬浮状态放大1.2倍

whileTap={ { scale: 1.1 }} // 点击状态放大1.1倍

drag="x" // 拖拽code>

dragConstraints={ { left: -100, right: 100 }} // 拖拽约束

>

内容

</motion.div>

</div>

</>

)

};

export default Motion;

上面我们给div设置了hover、tap、drag等效果，这里我们在浏览器看一下，效果非常酷炫呀！

大概的基础演示就这么多，接下来我们开始详细进入到Framer Motion功能性的讲解！

Framer Motion中有多种动画制作方式，这里可根据自身需求的复杂程度进行扩展，那么如何制作动画呢？这里有如下几种方式：

简单过度动画：通过motion组件和animate(动画)与transition(过渡)道具来完成。