使用 Framer Motion 滚动显示

Framer Motion 是一个用于在 React 上轻松快速地创建精彩动画的库，它允许我们使用组件创建简单或复杂的动画，并设置我们熟悉的 props 等值。我非常喜欢 Framer Motion 的一点是，我们无需花费时间创建 CSS 文件并进行所有设置即可创建动画，这使我们能够在短时间内创作出非常棒的作品。

在这篇博客中，我将向您展示如何使用框架运动实现滚动显示动画，您会惊讶于它有多么简单。

我将使用 React-Interception-Observer 来控制屏幕事件，如果您想了解更多，可以查看文档。

当然，您可以创建一个 React 自定义 Hook 来控制屏幕中的交叉点，也可以使用带有Intersection Observer API的 vanilla js ，但在这种情况下，我想展示一个小型 React 库，让我们能够轻松快速地控制 React 中的交叉点。

安装必要的库

首先让我们为我们的项目安装库

• npm 安装 react-intersection-observer --save
• npm 安装 framer-motion

我将创建一个 Box 组件，只是为了让它动起来，并在我们向下滚动时显示它，但您可以使用任何组件或元素，例如卡片、标题等... 您在应用程序中拥有

React-Interception-Observer 库

现在让我们将 React-Interception-Observer 库导入到我们的组件中，并使用useInView钩子

现在我们必须使用 useInView 钩子并像这样分解它
const {inView, entry, ref} = useInView();
当元素在屏幕视图上时，InView 会用 false 或 true 告诉我们，entry 是根和组件之间的信息，就像我们向下滚动时它具有的不同状态
，ref 是我们想要观察的 DOM 元素

现在它看起来应该是这样的

import {useInView} from "react-intersection-observer";
const Box = ({text}) => {

  const {inView, entry, ref} = useInView();
  return (
    <div ref={ref}>
    {text} 
    </div>
  )
}
export default Box;

使用 Framer 运动进行动画

现在让我们开始动画部分，我们将进行下一步

• 将框架运动导入到我们的组件
• 使用运动组件
• 创建初始动画
• 使用框架运动useAnimation钩子
• 当inView为 true时启动动画

import { motion, useAnimation } from "framer-motion";

<div ref={ref}>
    <motion.div

      initial={{
        x: "100vw"
      }}
      animate={animationControl}
      className="box"
    >
      {text}
    </motion.div>
    </div>

首先，我们从 Framer-motion 库中导入motion和useAnimation
。 在本例中，我们需要使用

运动组件

运动组件让我们通过道具创建动画，我们可以从 HTML 标签创建任何运动组件。

例如 motion.a、motion.div、motion.main、motion.p 等...
我们对这些组件有不同的道具，我邀请您查看文档以了解更多信息。
在这个例子中，我们将使用animate和initial。

运动初始道具

initial 是我们希望组件开始执行动画的位置，在这种情况下，我们希望组件从 100vw 开始，使其消失在右侧 X 角。

提示：检查包含所有应用程序元素的容器是否具有 overflow-x: hidden，以避免您的网站因元素超出屏幕视图而崩溃

运动控制动画

好吧……一切看起来都很好，但是我们如何触发我们的元素呢？因为它现在消失了，这不是我们的目标，对吧？
这时useAnimation hook 就派上用场了，它允许我们启动或停止动画，这正是我们想要的。

首先，我们需要创建一个变量来保存来自钩子的对象

 const animationControl = useAnimation();

你可以使用任何你想要的名字，这将让我们控制我们的动画
，现在我们可以做一些简单的事情，像这样

if (inView) {
    animationControl.start({
      x: 0,
      transition: {
        delay: 0.7,
      }
    });
  }

这意味着如果inView为真（元素在我们的视口上），那么我们将调用我们的控制方法来启动我们想要的动画，在这种情况下，让元素在 x: 0 处回来，这意味着回到它应该在的初始位置

我添加了 700 毫秒的延迟，以便不立即触发它，这样用户就可以享受更多动画，完整地观看元素。

运动动画道具

最后，我们必须显示或触发动画，我们创建了一个控件，该控件仅允许在视口中触发动画，但要显示或运行该动画，我们需要使用动画道具，它会获取一个具有我们想要的属性的对象，在这种情况下，我们将使用具有我们在上一步中设置的对象animationControl 。

最终代码应该看起来像

结果

我希望这对你有用:)，请随时查看我的个人网站，祝你有美好的一天，快乐代码🧑🏻‍💻