React动画实现方案之 Framer Motion，让你的页面“自己”动起来

aaaqqq15

已于 2022-10-30 10:44:07 修改

阅读量692

点赞数

文章标签： javascript 前端 react.js

于 2022-10-28 10:46:21 首次发布

本文链接：https://blog.csdn.net/aaaqqq15/article/details/127567130

版权

本文介绍了如何使用Framer Motion在React应用中实现动画效果，包括安装、基本用法和示例，如节点挂载卸载、列表动画，强调其简化动效开发的便利性，同时指出其包体积过大可能带来的问题。

摘要由CSDN通过智能技术生成

前言

相信很多前端同学都或多或少和动画打过交道。有的时候是产品想要的过度效果；有的时候是UI想要的酷炫动画。但是有没有人考虑过，是不是我们的页面上面的每一次变化，都可以像是自然而然的变化；是不是每一次用户点击所产生的交互，都可以在页面上活过来呢？

欢迎你打开了新的前端动画世界——《Framer Motion》

效果体验

这里，我在framer官网上面给大家录制了一下大概的使用效果。
请添加图片描述

在我们的常规认知中，实现这样的效果其实需要很多的css来实现，或者说需要我们进行大量的定制化逻辑编写。但是如果我们使用framer motion的话，只需要如下代码：

import { AnimatePresence, motion } from 'framer-motion';


const [selectedId, setSelectedId] = useState(null);


{items.map(item => (

  <motion.div layoutId={item.id} onClick={() => setSelectedId(item.id)}>

    <motion.h5>{item.subtitle}</motion.h5>

    <motion.h2>{item.title}</motion.h2>

  </motion.div>

))}


<AnimatePresence>

  {selectedId && (

    <motion.div layoutId={selectedId}>

      <motion.h5>{item.subtitle}</motion.h5>

      <motion.h2>{item.title}</motion.h2>

      <motion.button onClick={() => setSelectedId(null)} />

    </motion.div>

  )}

</AnimatePresence>

从上面的实现我们可以看出，framer-motion可以说是我们在用react动效开发过程中的必备利器。那么接下来，我给大家简单介绍一些framer motion的基础用法。