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

Hello~

👋🏻

我是 @好奇代码的三木

一个UI&UX Designer / Developer

CSS

HTML

JavaScript

React

Threejs

Nextjs

Nodejs

WebGL

TypeScript

mini-Programme

Shell

我的课程

JavaScript

高手之路全能课在B站课堂！让你真正彻底掌握JS

点击了解

我目前主要使用的框架是🥰React，如果要在React环境中去实现很多交互动画或者元素动画，其实并不好处理。所以一般都会搭配一些第三方库以提高开发效率。

而Framer-motion这个库，是我体验过的最好用的React生态下的交互动效库。

尝试鼠标悬浮在元素上

页面滚动与元素联动

尝试拖拽中间的元素

实现SVG的动态效果

在学习使用Framer-motion的过程中，我自己是参考他们的官方文档进行学习的。但是作为文档，它并不是按照教程的思路来设计内容，所以其实看文档来学习，一开始还是让我感觉很头疼。

而且很多同学英文也不好，包括我，其实也只是勉强能看得懂英文的文档，所以整体的学习效果并不好。

为了让更多人能够学会使用Framer-motion，因此我就自己按照自己的思路，设计并整理了这样一个Framer-motion教程。

希望这个教程能够帮到你更好地学会如何使用Framer-motion，用它做出更多有趣高级的效果。

#

Framer-Motion

Framer-motion是Framer公司出的一个基于React的用来高效实现各种交互和动画效果的开源库。

Framer是一个网页版跨平台的高保真原型工具/无代码/低代码建站工具。我这个教程网站，就是通过Framer来制作完成并通过Framer一键发布的。

Framer

Framer-Motion

Github

👈这是我出的Framer的建站教程包含无代码和使用代码配合的两个部分

#

支持与联系

可以扫码请我喝杯咖啡

如果我的内容对你有用

👈👈👈

或者加群一起学习👉

如果需要直接联系我