使用 framer-motion 和 React.js 的动画共享布局

在现代 Web 开发中，动画和动态交互已经成为了不可或缺的一部分，特别是在 React.js 中。在本文中，我们将介绍如何使用 Framer Motion 库与 React.js 共享布局，并在屏幕上进行流畅的动态交互。

Framer Motion 简介

Framer Motion 是一个基于 React 的动画库，它为开发者提供了很多可定制的动画效果，包括动态变化、拖拽和交互式布局等。

使用 Framer Motion 库，你可以轻松创建动画效果。它具有以下几点优势：

• 可定制性强
• 支持多种动画效果
• 响应式动画
• 支持手势和物理模拟动画

我们将使用 Framer Motion 及 React 来创建动画共享布局的示例。

React 的动画共享布局

动画共享布局是指所有组件都共享相同的动画效果。在 React 的应用中，我们可以通过 Framer Motion 库来实现这个效果。

下边我们将创建一个简单的列表，其中每个列表项都会在屏幕上渐入渐出地出现和消失。

首先，我们需要安装 Framer Motion 库:

npm install framer-motion

接下来，在我们的 React 应用中，定义一个可重用的动画组件：

import React from "react";
import { motion } from "framer-motion";

const AnimatedListItem = ({ children }) => {
  const variants = {
    visible: { opacity: 1, y: 0 },
    hidden: { opacity: 0, y: 10 }
  };

  return (
    <motion.li variants={variants} whileHover={{ scale: 1.03 }}>
      {children}
    </motion.li>
  );
};

export default AnimatedListItem;

在此代码块中，我们定义了一个名为 AnimatedListItem 的可重用组件。该组件使用 Framer Motion 库的 motion 组件，并定义了两个动画效果：visible 和 hidden。

在 visible 变异里，我们使用了两个属性：

• y：指定组件垂直方向的移动距离。
• opacity：指定组件透明度。

在 hidden 变异里，我们同样使用 y 属性来让组件缓慢消失。

此外，我们在组件设置了一个 whileHover 属性，它将在鼠标悬停在组件上时播放动画效果。

接下来，在我们的应用中使用此组件来创建一个列表：

import React, { useState } from "react";
import AnimatedListItem from "./AnimatedListItem";

const List = () => {
  const [items, setItems] = useState([
    "Apple",
    "Banana",
    "Cherry",
    "Durian",
    "Elderberry"
  ]);

  const removeItem = index => {
    const newArray = [...items];
    newArray.splice(index, 1);
    setItems(newArray);
  };

  return (
    <ul>
      {items.map((item, index) => (
        <AnimatedListItem key={index}>
          <div style={{ display: "flex", alignItems: "center" }}>
            <div style={{ flexGrow: 1 }}>{item}</div>
            <button onClick={() => removeItem(index)}>×</button>
          </div>
        </AnimatedListItem>
      ))}
    </ul>
  );
};

export default List;

以上代码区块中，我们使用 useState 钩子来声明一个 items 数组，并且通过一个 removeItem 函数来删除其中的列表项。此外，我们渲染了一个包含 AnimatedListItem 组件的列表。

在整个应用的生命周期中，每当我们添加或删除列表项，都会使用上文定义的动画效果。

结论

Framer Motion 库为开发者提供了强大的动画效果和交互式布局，可以轻松地创建漂亮的用户界面和动态交互。使用 Framer Motion 与 React.js 结合，您可以轻松地实现动画共享布局，在提升应用的用户体验方面有很大的帮助。