React 中的 3 个高级 Framer 运动效果

动画是提升用户体验的强大工具，而在 React 中创建动画时，Framer Motion 是一个广受欢迎的库。
之前，我们介绍了 5 个可以添加到网站的简单动画。在本文中，我们将介绍 3 个可以在 React 中使用 Framer Motion 创建的复杂动画或效果，它们将使您的网站更上一层楼。

查看我博客上的这篇文章

1. 跟随鼠标效果

在这个效果中，一个小元素（例如一个圆圈）会跟随鼠标移动。为了实现这个效果，我们首先需要跟踪光标每次移动时的位置。我们将鼠标位置的 x 和 y 值存储在一个状态变量中。然后，我们创建一个在 上运行函数的效果pointermove。

为了获取鼠标相对于跟随鼠标的对象的位置，我们将向ref该元素添加一个。在pointermove函数中，我们使用窗口的clientX和 clientY 属性作为对象参数。代码效果如下：

useEffect(() => {
  //  check if DOM element referenced by ref has been mounted
  if (ref.current) {
    const handlePointerMove = ({ clientX, clientY }) => {
      const element = ref.current;
      // calculate x and y coordinates
      const x = clientX - element.offsetLeft - element.offsetWidth / 2;
      const y = clientY - element.offsetTop - element.offsetHeight / 2;
      // update state
      setCoordinates({ x, y });
    };

    window.addEventListener("pointermove", handlePointerMove);
    return () => window.removeEventListener("pointermove", handlePointerMove);
  }
}, []);

这里，element指的是 ref 对象当前引用的 DOM 元素（在本例中是跟随鼠标的圆圈）。 x 和 y 坐标是通过从指针在屏幕上的水平和垂直坐标（clientX 和 clientY）中减去offsetLeft和计算得出的offsetTop。最后，我们从上面计算的值中减去元素宽度和高度的一半，以确保指针位于圆圈的中心。

接下来，我们使用组件创建圆圈motion.div，并为其分配 ref 对象。x 和 y 值将使用来自状态的值进行动画处理，我们还将添加一个弹簧过渡来创建炫酷的弹跳效果。

完整代码和演示如下：

2. 可拖动列表

大多数列表（例如待办事项列表、已保存项目列表或简单的自定义标签）都有一个共同的功能，那就是通过拖放功能重新排列项目。让我们深入了解如何在 React 中使用 Framer Motion 创建可拖放列表。

为了实现此效果，我们将利用ReOrder.GroupFramer Motion 中提供的组件。列表将由该组件包裹，或者您也可以直接在该组件内布局列表项。该组件提供一些很酷的属性ReOrder.Group：

• as：确定您希望列表有序还是无序。
• axis：指定列表的方向。例如，待办事项列表为垂直方向，标签页为水平方向。
• values：用作源的值数组。
• onReorder(newOrder)：这是在项目被拖动并重新排序时运行的回调函数。通常，stateSetter如果列表项存储在状态数组中，则会传递此函数。

此外，该组件还有一些有用的 props 。你可以在官方文档Reorder.Item中查看。

基础部分相当简单。为了创建一个可拖动列表的演示，以下代码提供了基础知识：

export default function App() {
  const [listItems, setListItems] = useState(list);

  return (
    <Reorder.Group axis="y" onReorder={setListItems} values={listItems}>
      {listItems.map((el) => (
        <Reorder.Item key={el} value={el}>
          <span>{el}</span>
        </Reorder.Item>
      ))}
    </Reorder.Group>
  );
}

这里，我们映射了一个列表项的状态数组。每个项都表示为Reorder.Item中的Reorder.Group。轴是垂直的，而默认的 prop 是一个无序列表。示例如下：

3.视差效果

视差效果是一种广泛使用的技术，通过在用户滚动网页时以不同的速度移动元素来营造深度和动感。我们只需使用 Framer Motion 的几行代码即可创建此效果。在我们的示例中，我们将在全屏图像上显示一些文本。文本将以与背景不同的速度移动。

为了创建此效果，我们首先计算页面相对于参考点（在本例中为文本）的垂直滚动进度。然后，我们将利用useTransform钩子将该值映射到 [-60, 60] 的范围内，该范围表示文本沿 y 轴的最大和最小位移。然后将此转换后的值作为文本样式中的 y 属性应用，从而创建所需的视差效果。

function App() {
  const textRef = useRef();
  const { scrollYProgress } = useScroll({ target: textRef });
  const y = useTransform(scrollYProgress, [0, 1], [-60, 60]);

  return (
    <div className="app">
      <motion.div className="text" ref={textRef} style={{ y: y, x: "-50%" }}>
        <h2>Hello, World!</h2>
        <p>Framer motion parallax effects are super cool!</p>
      </motion.div>
      <img
        src="https://cdn.pixabay.com/photo/2012/08/27/14/19/mountains-55067_640.png"
        className="background-image"
      />
    </div>
  );
}

scrollYProgress根据页面滚动的百分比，给出一个从 0 到 1 的值。textRef演示
如下：

感谢您的阅读

也请查看我博客上的这篇文章。