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

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

尝试鼠标悬浮在元素上

页面滚动与元素联动

尝试拖拽中间的元素

实现SVG的动态效果

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

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

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

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

#

Framer-Motion

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

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

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

#

支持与联系

可以扫码请我喝杯咖啡

如果我的内容对你有用

👈👈👈

或者加群一起学习👉

如果需要直接联系我