怎么使用Framer Motion实现React动画

这篇文章主要介绍“怎么使用Framer Motion实现React动画”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么使用Framer Motion实现React动画”文章能帮助大家解决问题。

在我们的常规认知中，实现这样的效果其实需要很多的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.h6>{item.subtitle}</motion.h6>    <motion.h3>{item.title}</motion.h3>  </motion.div>))}<AnimatePresence>  {selectedId && (    <motion.div layoutId={selectedId}>      <motion.h6>{item.subtitle}</motion.h6>      <motion.h3>{item.title}</motion.h3>      <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.h2 /><motion.svg />...

示例

比如我们现在想要实现一个侧边栏效果。

节点的挂载与卸载(mount、unmount)

如果我们自己来实现的话，可能要考虑它的keyframe，它的初始状态与最终的CSS样式。那么如果用framer-motion来如何实现呢？

首先我们来设计一个会动的按钮Icon：

import * as React from "react";import { motion } from "framer-motion";const Path = props => (  <motion.path    fill="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">      <Path        variants={{        closed: { d: "M 2 2.5 L 20 2.5" },        open: { d: "M 3 16.5 L 17 2.5" }        }}      />      <Path        d="M 2 9.423 L 20 9.423"        variants={{        closed: { opacity: 1 },        open: { opacity: 0 }        }}        transition={{ duration: 0.1 }}      />      <Path        variants={{        closed: { d: "M 2 16.346 L 20 16.346" },        open: { d: "M 3 2.5 L 17 16.346" }        }}      />    </svg>  </button>);

接下来，就由这个按钮来控制侧边栏的展示(mount)与隐藏(unmount):

import * as React from "react";import { useRef } from "react";import { motion, useCycle } from "framer-motion";import { useDimensions } from "./use-dimensions";const sidebar = {  open: (height = 1000) => ({    clipPath: `circle(${height * 2 + 200}px at 40px 40px)`,    transition: {      type: "spring",      stiffness: 20,      restDelta: 2    }  }),  closed: {    clipPath: "circle(30px at 40px 40px)",    transition: {      delay: 0.5,      type: "spring",      stiffness: 400,      damping: 40    }  }};export const Example = () => {  const [isOpen, toggleOpen] = useCycle(false, true);  const containerRef = useRef(null);  const { height } = useDimensions(containerRef);  return (    <motion.nav      initial={false}      animate={isOpen ? "open" : "closed"}      custom={height}      ref={containerRef}    >      <motion.div className="background" variants={sidebar} />      <MenuToggle toggle={() => toggleOpen()} />    </motion.nav>  );};

也就是说，其实我们更多需要做的事情，从思考如何设计各元素之间的css联动与keyframe书写变成了如何按照文档写好framer-motion的配置。哪个更轻松相信大家一目了然。

列表

首先我们先来进行单个Item的封装：

import * as React from "react";import { motion } from "framer-motion";const variants = {  open: {    y: 0,    opacity: 1,    transition: {      y: { stiffness: 1000, velocity: -100 }    }  },  closed: {    y: 50,    opacity: 0,    transition: {      y: { stiffness: 1000 }    }  }};const colors = ["#FF008C", "#D309E1", "#9C1AFF", "#7700FF", "#4400FF"];export const MenuItem = ({ i }) => {  const style = { border: `2px solid ${colors[i]}` };  return (    <motion.li      variants={variants}      whileHover={{ scale: 1.1 }}      whileTap={{ scale: 0.95 }}    >      <div className="icon-placeholder" style={style} />      <div className="text-placeholder" style={style} />    </motion.li>  );};

然后我们在已封装Item的基础上，再进行整个菜单的封装：

import * as React from "react";import { motion } from "framer-motion";const itemIds = [0, 1, 2, 3, 4];const variants = {  open: {    transition: { staggerChildren: 0.07, delayChildren: 0.2 }  },  closed: {    transition: { staggerChildren: 0.05, staggerDirection: -1 }  }};export const Navigation = () => (  <motion.ul variants={variants}>    {itemIds.map(i => (      <MenuItem i={i} key={i} />    ))}  </motion.ul>);

关于“怎么使用Framer Motion实现React动画”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。