快捷導(dǎo)航

React動(dòng)畫實(shí)現(xiàn)方案Framer Motion讓頁(yè)面自己動(dòng)起來

更新時(shí)間：2022年10月28日 15:33:48 作者：馬睿不想說話

這篇文章主要為大家介紹了React動(dòng)畫實(shí)現(xiàn)方案Framer Motion讓頁(yè)面自己動(dòng)起來，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

相信很多前端同學(xué)都或多或少和動(dòng)畫打過交道。有的時(shí)候是產(chǎn)品想要的過度效果；有的時(shí)候是UI想要的酷炫動(dòng)畫。但是有沒有人考慮過，是不是我們的頁(yè)面上面的每一次變化，都可以像是自然而然的變化；是不是每一次用戶點(diǎn)擊所產(chǎn)生的交互，都可以在頁(yè)面上活過來呢？

歡迎你打開了新的前端動(dòng)畫世界——《Framer Motion》

效果體驗(yàn)

這里，我在framer官網(wǎng)上面給大家錄制了一下大概的使用效果。

在我們的常規(guī)認(rèn)知中，實(shí)現(xiàn)這樣的效果其實(shí)需要很多的css來實(shí)現(xiàn)，或者說需要我們進(jìn)行大量的定制化邏輯編寫。但是如果我們使用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>

從上面的實(shí)現(xiàn)我們可以看出，framer-motion可以說是我們?cè)谟胷eact動(dòng)效開發(fā)過程中的必備利器。那么接下來，我給大家簡(jiǎn)單介紹一些framer motion的基礎(chǔ)用法。

快速開始

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的組件。每個(gè)HTML和SVG標(biāo)簽都有對(duì)應(yīng)的motion組件。

他們渲染的結(jié)果與對(duì)應(yīng)的原生組件完全一致，并在其之上增加了一些動(dòng)畫和手勢(shì)相關(guān)的props。

比如：

<motion.div />
<motion.span />
<motion.h1 />
<motion.svg />
...

示例

比如我們現(xiàn)在想要實(shí)現(xiàn)一個(gè)側(cè)邊欄效果。

節(jié)點(diǎn)的掛載與卸載(mount、unmount)

如果我們自己來實(shí)現(xiàn)的話，可能要考慮它的keyframe，它的初始狀態(tài)與最終的css樣式。那么如果用framer-motion來如何實(shí)現(xiàn)呢？

首先我們來設(shè)計(jì)一個(gè)會(huì)動(dòng)的按鈕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>
);

接下來，就由這個(gè)按鈕來控制側(cè)邊欄的展示(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>
  );
};

也就是說，其實(shí)我們更多需要做的事情，從思考如何設(shè)計(jì)各元素之間的css聯(lián)動(dòng)與keyframe書寫變成了如何按照文檔寫好framer-motion的配置。哪個(gè)更輕松相信大家一目了然。

列表

側(cè)邊欄一般都是帶有菜單的，那么我們是不是可以讓這個(gè)側(cè)邊欄也有一個(gè)逐次出現(xiàn)的效果呢？就像這樣：

這里我們是不是已經(jīng)開始肌肉記憶般的計(jì)算延遲時(shí)間，思考如何進(jìn)行整體效果的分配。那么如果這里我們使用frame motion，它的實(shí)現(xiàn)方式應(yīng)該是怎么樣的呢？

首先我們先來進(jìn)行單個(gè)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>
  );
};

然后我們?cè)谝逊庋bItem的基礎(chǔ)上，再進(jìn)行整個(gè)菜單的封裝：

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>
);

沒錯(cuò)，動(dòng)畫！就是這么簡(jiǎn)單！