使用 Framer Motion 创建精美的滚动动画-js教程-PHP中文网

首页

web前端

js教程

使用 Framer Motion 创建精美的滚动动画

Mary-Kate Olsen

Oct 31, 2024 pm 07:02 PM

介绍

滚动是我们每天在屏幕上做的事情，但你有没有想过滚动如何影响用户体验？在当今世界，滚动也已成为为用户提供流畅且令人满意的体验的一种方式。借助 Framer Motion 等工具，开发人员可以将滚动变成一种引人入胜且具有视觉吸引力的体验。

今天，我们将探索动画滚动的不同方法。我们将了解滚动动画的类型以及它们的使用方法。我们将了解该模式，以便我们可以将滚动动画添加到我们的任何项目或网站。

我们将使用 Framer Motion 在 Next.js 中创建动画。如果您喜欢使用任何其他框架或库，您可以使用它。

那么，事不宜迟，让我们开始吧。

滚动动画的类型

滚动动画有两种类型：

滚动-链接动画：根据您滚动的距离移动或改变的动画，元素将在您滚动时不断更新。
滚动-触发动画：当元素进入或离开视口时触发普通动画。

Create Beautiful Scroll Animations Using Framer Motion

通过 Framer 运动，您可以实现这两点。让我们一一了解一下。

滚动链接动画

滚动链接动画是动画的进度或移动直接链接到用户滚动的距离的动画。在这种类型的动画中，元素随着用户滚动而不断变化。

这意味着如果您位于第一点，那么动画将跟踪您，并且它也将位于第一点。而且，如果您滚动并转到第二点，动画将跟随您到达该点。

主要特点

动画与滚动进度同步。
当您滚动时，动画会根据您滚动的程度实时更新。
这些动画可以涉及移动、缩放、旋转或更改元素的外观，通常使用 Framer Motion 中的 useScroll 和 useTransform 钩子（我们将在前面了解这些）。

滚动触发的动画

当您滚动时元素进入或离开特定视口时，就会发生滚动触发的动画。这意味着动画仅在用户滚动到页面的特定部分时才开始。

所以，如果我在第一点，并且为第三点设置了滚动触发的动画，那么该动画将在第三点发生。这意味着只有当我到达该视口时才会触发动画（在本例中是第三点）

要了解这一点，你可以看这个视频？。在这里，您会看到橙色元素何时出现在视口中意味着它在屏幕上完全可见，然后显示导航栏。

主要特点

由滚动位置触发：一旦到达特定的滚动位置，动画就会被激活，而不是像滚动链接动画一样与滚动持续同步。这通常是使用 whileInView 或 onEnter 等条件来实现的。
离散动画：与滚动链接动画不同，滚动触发动画在特定时刻发生，例如当元素进入或退出时视口。这些可能包括淡入、滑入或当用户滚动经过某个点时发生的其他视觉效果。
一次性或可重复动画： 滚动触发动画可以设置为仅在元素首次进入视图时播放一次，或者可以在元素首次进入视图时重复播放。元素再次进入视口，具体取决于用例。

  <motion.div
    initial="hidden"
    whileInView="visible"
    viewport={{ once: true }}  // animation will occur only once
  />

登录后复制

接下来是什么？

现在我们了解了这两种类型的滚动动画及其差异，让我们开始了解创建这些动画所使用的模式。这将允许您向任何项目添加滚动动画。

首先，我们将建立一个项目来实际理解这一点，然后我们将创建两种类型的动画。

项目设置

让我们首先设置具有所有必要依赖项的 Next.js 项目。我将在这个项目中使用 StalkBlitz，但您也可以使用 VSCode。虽然所有步骤我都会从 VSCode 角度告诉你，这样你就可以按照步骤操作。

使用 TypeScript 创建一个新的 Next.js 项目：

npx create-next-app@latest

登录后复制

安装时，您将看到以下提示：

   What is your project named? my-app
   Would you like to use TypeScript? No / Yes
   Would you like to use ESLint? No / Yes
   Would you like to use Tailwind CSS? No / Yes
   Would you like to use `src/` directory? No / Yes
   Would you like to use App Router? (recommended) No / Yes
   Would you like to customize the default import alias (@/*)? No / Yes
   What import alias would you like configured? @/*

登录后复制

安装 Framer Motion
```
  npm install framer-motion
```
登录后复制
登录后复制
登录后复制
清理默认文件。
删除 app/page.tsx 中的默认代码。我们将从头开始，专注于滚动动画。该文件应如下所示。
```
    'use client';

      export default function Home() {

          return (
           <div>

           </div>
         );
       }
```
登录后复制
登录后复制

启动开发服务器

  <motion.div
    initial="hidden"
    whileInView="visible"
    viewport={{ once: true }}  // animation will occur only once
  />

登录后复制

创建滚动动画

现在我们的项目已经建立起来，我们可以一一创建这两种类型的滚动动画。您可以直接在 app/page.tsx 文件中开始编写代码，或者创建一个单独的组件并将所有组件导入 app/page.tsx 文件中。

创建滚动链接动画

有几个滚动链接动画的例子：

滚动进度条：当用户向下滚动页面时填充的圆形或线性进度条。
视差滚动：背景图像或元素相对于前景以不同的速度移动，在滚动时创建深度效果。
淡入元素：内容随着用户滚动而淡入视图。
缩放变换：元素根据滚动进度逐渐增大或减小尺寸。等等

让我们创建一些动画。在创建任何滚动链接动画时，您将经常使用来自成帧器运动的这些方法和挂钩。

滚动进度检测（useScroll）：跟踪用户的滚动位置，通常返回 0 到 1 之间的值，表示页面向下的进度。
```
npx create-next-app@latest
```
登录后复制
登录后复制
登录后复制

转换滚动数据 (useTransform)：将滚动位置映射到特定的动画属性，例如不透明度、比例或位置。使用它可以在滚动过程中触发淡入淡出、移动、旋转、缩放或颜色变化等动画。

   What is your project named? my-app
   Would you like to use TypeScript? No / Yes
   Would you like to use ESLint? No / Yes
   Would you like to use Tailwind CSS? No / Yes
   Would you like to use `src/` directory? No / Yes
   Would you like to use App Router? (recommended) No / Yes
   Would you like to customize the default import alias (@/*)? No / Yes
   What import alias would you like configured? @/*

登录后复制

使用运动元素制作动画：使用motion.div（或任何运动组件）包裹目标元素，并将动画链接到滚动进度。
```
  npm install framer-motion
```
登录后复制
登录后复制
登录后复制

过渡：应用平滑过渡，使动画感觉流畅自然。

    'use client';

      export default function Home() {

          return (
           <div>

           </div>
         );
       }

登录后复制

初始和最终状态：使用初始、动画或样式属性来定义元素最初的外观，并使用链接到scrollYProgress的useTransform或动画控制其最终状态。
```
    npm run dev
```
登录后复制

滚动进度条

我们首先创建一个滚动进度条。为此，请打开文本编辑器，创建一个新组件，然后开始在其中编写代码。

   const { scrollYProgress } = useScroll();

登录后复制

这里我们使用：

useScroll：提供滚动位置作为 0 到 1 之间的标准化值。
useTransform：将滚动进度映射到我们需要的特定值范围，无论是进度圈的笔画 dasharray 还是我们想要应用的任何其他转换。
运动组件：我们使用 Framer Motion 的 Motion.circle 基于滚动来实时设置笔划长度的动画。

动态缩放文本动画

在此示例中，我们将使用 Framer Motion 为文本元素创建滚动链接的动态缩放效果。

跟踪滚动进度：与进度条类似，我们使用 useScroll() 来获取页面当前的滚动进度。 scrollYProgress 值范围从顶部的 0 到完全滚动时的 1。
<motion.div initial="hidden" whileInView="visible" viewport={{ once: true }} // animation will occur only once />
登录后复制
登录后复制
登录后复制
登录后复制
将滚动值转换为控制比例：我们使用 useTransform() 将滚动进度转换为随着用户滚动而动态变化的比例值。在这种情况下，我们将scrollYProgress从[0, 0.5, 1]映射到缩放值[1, 2, 1]，这意味着文本将从原始大小增长，在滚动中间尺寸加倍，然后缩小当你到达底部时返回。
```
npx create-next-app@latest
```
登录后复制
登录后复制
登录后复制

对文本元素进行动画处理： 在motion.h1 组件中，我们将使用样式属性的scaleValue 来根据滚动位置平滑地对文本缩放效果进行动画处理。当用户滚动时，文本将“变大”和“收缩”。

   What is your project named? my-app
   Would you like to use TypeScript? No / Yes
   Would you like to use ESLint? No / Yes
   Would you like to use Tailwind CSS? No / Yes
   Would you like to use `src/` directory? No / Yes
   Would you like to use App Router? (recommended) No / Yes
   Would you like to customize the default import alias (@/*)? No / Yes
   What import alias would you like configured? @/*

登录后复制

设置该部分的样式：文本位于全屏部分的中心，该部分具有背景渐变以增加视觉吸引力。背景创建了从紫色到靛蓝色的平滑渐变，使动态文本更加突出。
```
  npm install framer-motion
```
登录后复制
登录后复制
登录后复制

使用的概念：

useScroll：我们再次使用这个钩子来跟踪页面的滚动进度，作为动画的触发器。
useTransform：在这里，我们将滚动进度映射到缩放值，使文本在滚动事件期间平滑地放大或缩小。
motion 组件：motion.h1 组件实时动画，随着滚动值的变化动态调整比例。

我们再次使用相同的概念。 useScroll、useTransform 和运动。所以，这是滚动链接的一部分。现在让我们创建一些滚动触发动画。

创建滚动触发的动画

滚动触发的动画在一些示例中并不适用。您可以将滚动动画链接到页面的特定组件。例如，我有一个包含两个元素和一个包含一些文本的 div 的登陆页面。目前，页面上没有动画，但我想添加在视口进入视图时激活的动画。

Create Beautiful Scroll Animations Using Framer Motion

为此，我们将使用滚动触发的动画。正如我们之前了解到的，当特定视口进入视图时，就会发生滚动触发的动画。因此，让我们将 Framer Motion 元素添加到此代码中。

  <motion.div
    initial="hidden"
    whileInView="visible"
    viewport={{ once: true }}  // animation will occur only once
  />

登录后复制

我们从framer-motion导入动作
整个组件被包裹在一个section元素中，它有一些基本的样式。
;这是第一个动作 div。它包含主要内容（标题和段落）。它使用initial和whileInView来创建滚动触发的动画：

initial={{ opacity: 0, y: 50 }}：最初，该框是不可见的（opacity: 0）并向下放置 50 像素（y: 50）。
whileInView={{ opacity: 1, y: 0 }}：当用户将其滚动到视图中时，它变得完全可见（不透明度：1）并移动到正常位置（y：0）。
transition={{ period: 0.8, escape: 'easeOut' }}: 过渡需要 0.8 秒并平滑地缓出。

里面的内容采用 Tailwind 类进行样式设计，为其提供填充、90% 不透明度的背景、阴影、圆角和最大宽度。
之后，我们有第二个动态 div（从上到下的动画文本）。这个动画一些从屏幕顶部向下移动的文本：

initial={{ y: -100, opacity: 0 }}：文本从正常位置上方 100 像素开始，并且不可见。
whileInView={{ y: 0, opacity: 1 }}：当它进入视图时，它会移动到正常位置并变得完全可见。
transition={{delay: 0.5,duration: 0.8 }}：动画开始前有0.5秒的延迟，产生交错效果。