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

前言【React动画实现方案之 Framer Motion，让你的页面“自己”动起来】相信很多前端同学都或多或少和动画打过交道。有的时候是产品想要的过度效果；有的时候是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的基础用法。
快速开始Framer Motion 需要 React 18 或更高版本。
安装从npm安装framer-motion
npm install framer-motion输入安装后，您可以通过framer-motion引入Framer Motion

import { motion } from "framer-motion"export const MyComponent = ({ isVisible }) => (<motion.div animate={{ opacity: isVisible ? 1 : 0 }} />)

使用方式Framer motion的核心API是motion的组件。每个HTML和SVG标签都有对应的motion组件。
他们渲染的结果与对应的原生组件完全一致，并在其之上增加了一些动画和手势相关的props 。
比如：
<motion.div /><motion.span /><motion.h1 /><motion.svg />...示例比如我们现在想要实现一个侧边栏效果。
节点的挂载与卸载(mount、unmount)

文章插图
如果我们自己来实现的话，可能要考虑它的keyframe，它的初始状态与最终的css样式 。那么如果用framer-motion来如何实现呢？
首先我们来设计一个会动的按钮Icon：

import * as React from "react";import { motion } from "framer-motion";const Path = props => (<motion.pathfill="transparent"strokeWidth="3"stroke="hsl(0, 0%, 18%)"strokeLinecap="round"{...props}/>);const MenuToggle = ({ toggle }) => (<button onClick={toggle}><svg width="23" height="23" viewBox="0 0 23 23"><Pathvariants={{closed: { d: "M 2 2.5 L 20 2.5" },open: { d: "M 3 16.5 L 17 2.5" }}}/><Pathd="M 2 9.423 L 20 9.423"variants={{closed: { opacity: 1 },open: { opacity: 0 }}}transition={{ duration: 0.1 }}/><Pathvariants={{closed: { d: "M 2 16.346 L 20 16.346" },open: { d: "M 3 2.5 L 17 16.346" }}}/></svg></button>);

接下来，就由这个按钮来控制侧边栏的