中文教程｜ Framer Motion ｜基于React最好的动效库

Motion

教程

Framer

官方文档

JavaScript | 高手之路

全能课

Best

MasterJS

Made By

这里开始

基本动效实现

交互行为与事件

new

布局动效

高级布局变化

排序变化

元素退出效果

MotionValue

其他

GSAP 中文文档教程

React-Three-Fiber 中文文档

特点

Framer-motion这个库，在我看来有👏🏻两个核心和👍🏼两大能力。

两个核心

👉一个核心是motion这个组件：

通过这个组件我们可以使用具有更多能力的各种html元素组件。

import {motion} from 'framer-motion'

function App(){
	return <motion.div></motion.div>
}

通过motion.div这样的形式的元素组件能够使用很多Framer-motion提供的能力，来实现各种快捷的动效和交互。

任意元素都可以通过moition.[tagName]的方式来获取到对应的具有motion库能力的元素组件。

👉另一个核心是motionValue这个类型：

在Framer-motion库中，有很多非常强大的自定义hook，这些hook很多都和motionValue这个东西相关。

motionValue你可以先把它理解为是一种可以追踪元素变化状态的一种类型数据，通过各种hook，我们可以很方便的实现许多看似复杂的功能和效果。

👉 可以和第三方库结合使用，比如styled-components。

尤其是要使用一些🥳伪元素伪类的CSS能力的时候，可以通过结合这个库来实现。

鼠标悬浮和拖拽效果

使用提示

前提

👉 需要会使用React框架，所以你必须会写React代码~

引入库

// 通过NPM安装，本地项目中依赖导入
// npm install framer-motion
import {motion} from 'framer-motion'

// 在线ESM模块导入
import {motion} from "https://esm.sh/framer-motion@8.3.3";

👉 既通过NPM安装库的包，也可以通过在线ESM模块导入的方式，根据你项目情况自行选择合适的方式。

配合第三方库

import { motion } from "framer-motion";
import styled from "styled-components";

const Box = styled(motion.div)`
  background: white;
  border-radius: 30px;
  width: 150px;
  height: 150px;
`;

export const Example = () => <Box animate={{ scale: 2 }} />;

教程适用的库版本

👉 这个教程制作的时候Framer-motion的大版本是10.0。

Framer-motion的核心使用逻辑基本是不变的，从1.0到10.0都没有改变，每次大版本更新基本上都是增删改查一些内容，所以不用担心。

如果涉及到教程中知识点的变化我会进行迭代更新。

特别提示

👉 motion组件元素可以和一般组件混用，并不是说motion组件只能嵌套motion组件。

// motion组件嵌套一般组件
<motion.div>
	<div></div>
</motion.div>

//一般组件嵌套motion组件
<div>
   <motion.div></motion.div>
</div>

animate与initial

特点

使用提示