成人 a v天堂,成年女人a毛片免费视频,99久久精品国产第一页

首頁(yè)

web前端

js教程

使用 Framer Motion 創(chuàng)建精美的滾動(dòng)動(dòng)畫(huà)

Mary-Kate Olsen

Oct 31, 2024 pm 07:02 PM

介紹

滾動(dòng)是我們每天在屏幕上做的事情，但你有沒(méi)有想過(guò)滾動(dòng)如何影響用戶體驗(yàn)？在當(dāng)今世界，滾動(dòng)也已成為為用戶提供流暢且令人滿意的體驗(yàn)的一種方式。借助 Framer Motion 等工具，開(kāi)發(fā)人員可以將滾動(dòng)變成一種引人入勝且具有視覺(jué)吸引力的體驗(yàn)。

今天，我們將探索動(dòng)畫(huà)滾動(dòng)的不同方法。我們將了解滾動(dòng)動(dòng)畫(huà)的類型以及它們的使用方法。我們將了解該模式，以便我們可以將滾動(dòng)動(dòng)畫(huà)添加到我們的任何項(xiàng)目或網(wǎng)站。

我們將使用 Framer Motion 在 Next.js 中創(chuàng)建動(dòng)畫(huà)。如果您喜歡使用任何其他框架或庫(kù)，您可以使用它。

那么，事不宜遲，讓我們開(kāi)始吧。

滾動(dòng)動(dòng)畫(huà)的類型

滾動(dòng)動(dòng)畫(huà)有兩種類型：

滾動(dòng)-鏈接動(dòng)畫(huà)：根據(jù)您滾動(dòng)的距離移動(dòng)或改變的動(dòng)畫(huà)，元素將在您滾動(dòng)時(shí)不斷更新。
滾動(dòng)-觸發(fā)動(dòng)畫(huà)：當(dāng)元素進(jìn)入或離開(kāi)視口時(shí)觸發(fā)普通動(dòng)畫(huà)。

Create Beautiful Scroll Animations Using Framer Motion

通過(guò) Framer 運(yùn)動(dòng)，您可以實(shí)現(xiàn)這兩點(diǎn)。讓我們一一了解一下。

滾動(dòng)鏈接動(dòng)畫(huà)

滾動(dòng)鏈接動(dòng)畫(huà)是動(dòng)畫(huà)的進(jìn)度或移動(dòng)直接鏈接到用戶滾動(dòng)的距離的動(dòng)畫(huà)。在這種類型的動(dòng)畫(huà)中，元素隨著用戶滾動(dòng)而不斷變化。

這意味著如果您位于第一點(diǎn)，那么動(dòng)畫(huà)將跟蹤您，并且它也將位于第一點(diǎn)。而且，如果您滾動(dòng)并轉(zhuǎn)到第二點(diǎn)，動(dòng)畫(huà)將跟隨您到達(dá)該點(diǎn)。

主要特點(diǎn)

動(dòng)畫(huà)與滾動(dòng)進(jìn)度同步。
當(dāng)您滾動(dòng)時(shí)，動(dòng)畫(huà)會(huì)根據(jù)您滾動(dòng)的程度實(shí)時(shí)更新。
這些動(dòng)畫(huà)可以涉及移動(dòng)、縮放、旋轉(zhuǎn)或更改元素的外觀，通常使用 Framer Motion 中的 useScroll 和 useTransform 鉤子（我們將在前面了解這些）。

滾動(dòng)觸發(fā)的動(dòng)畫(huà)

當(dāng)您滾動(dòng)時(shí)元素進(jìn)入或離開(kāi)特定視口時(shí)，就會(huì)發(fā)生滾動(dòng)觸發(fā)的動(dòng)畫(huà)。這意味著動(dòng)畫(huà)僅在用戶滾動(dòng)到頁(yè)面的特定部分時(shí)才開(kāi)始。

所以，如果我在第一點(diǎn)，并且為第三點(diǎn)設(shè)置了滾動(dòng)觸發(fā)的動(dòng)畫(huà)，那么該動(dòng)畫(huà)將在第三點(diǎn)發(fā)生。這意味著只有當(dāng)我到達(dá)該視口時(shí)才會(huì)觸發(fā)動(dòng)畫(huà)（在本例中是第三點(diǎn)）

要了解這一點(diǎn)，你可以看這個(gè)視頻？。在這里，您會(huì)看到橙色元素何時(shí)出現(xiàn)在視口中意味著它在屏幕上完全可見(jiàn)，然后顯示導(dǎo)航欄。

主要特點(diǎn)

由滾動(dòng)位置觸發(fā)：一旦到達(dá)特定的滾動(dòng)位置，動(dòng)畫(huà)就會(huì)被激活，而不是像滾動(dòng)鏈接動(dòng)畫(huà)一樣與滾動(dòng)持續(xù)同步。這通常是使用 whileInView 或 onEnter 等條件來(lái)實(shí)現(xiàn)的。
離散動(dòng)畫(huà)：與滾動(dòng)鏈接動(dòng)畫(huà)不同，滾動(dòng)觸發(fā)動(dòng)畫(huà)在特定時(shí)刻發(fā)生，例如當(dāng)元素進(jìn)入或退出時(shí)視口。這些可能包括淡入、滑入或當(dāng)用戶滾動(dòng)經(jīng)過(guò)某個(gè)點(diǎn)時(shí)發(fā)生的其他視覺(jué)效果。
一次性或可重復(fù)動(dòng)畫(huà)： 滾動(dòng)觸發(fā)動(dòng)畫(huà)可以設(shè)置為僅在元素首次進(jìn)入視圖時(shí)播放一次，或者可以在元素首次進(jìn)入視圖時(shí)重復(fù)播放。元素再次進(jìn)入視口，具體取決于用例。

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

接下來(lái)是什么？

現(xiàn)在我們了解了這兩種類型的滾動(dòng)動(dòng)畫(huà)及其差異，讓我們開(kāi)始了解創(chuàng)建這些動(dòng)畫(huà)所使用的模式。這將允許您向任何項(xiàng)目添加滾動(dòng)動(dòng)畫(huà)。

首先，我們將建立一個(gè)項(xiàng)目來(lái)實(shí)際理解這一點(diǎn)，然后我們將創(chuàng)建兩種類型的動(dòng)畫(huà)。

項(xiàng)目設(shè)置

讓我們首先設(shè)置具有所有必要依賴項(xiàng)的 Next.js 項(xiàng)目。我將在這個(gè)項(xiàng)目中使用 StalkBlitz，但您也可以使用 VSCode。雖然所有步驟我都會(huì)從 VSCode 角度告訴你，這樣你就可以按照步驟操作。

使用 TypeScript 創(chuàng)建一個(gè)新的 Next.js 項(xiàng)目：

npx create-next-app@latest

安裝時(shí)，您將看到以下提示：

   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
```
清理默認(rèn)文件。
刪除 app/page.tsx 中的默認(rèn)代碼。我們將從頭開(kāi)始，專注于滾動(dòng)動(dòng)畫(huà)。該文件應(yīng)如下所示。
```
    'use client';

      export default function Home() {

          return (
           <div>

           </div>
         );
       }
```

啟動(dòng)開(kāi)發(fā)服務(wù)器

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

創(chuàng)建滾動(dòng)動(dòng)畫(huà)

現(xiàn)在我們的項(xiàng)目已經(jīng)建立起來(lái)，我們可以一一創(chuàng)建這兩種類型的滾動(dòng)動(dòng)畫(huà)。您可以直接在 app/page.tsx 文件中開(kāi)始編寫代碼，或者創(chuàng)建一個(gè)單獨(dú)的組件并將所有組件導(dǎo)入 app/page.tsx 文件中。

創(chuàng)建滾動(dòng)鏈接動(dòng)畫(huà)

有幾個(gè)滾動(dòng)鏈接動(dòng)畫(huà)的例子：

滾動(dòng)進(jìn)度條：當(dāng)用戶向下滾動(dòng)頁(yè)面時(shí)填充的圓形或線性進(jìn)度條。
視差滾動(dòng)：背景圖像或元素相對(duì)于前景以不同的速度移動(dòng)，在滾動(dòng)時(shí)創(chuàng)建深度效果。
淡入元素：內(nèi)容隨著用戶滾動(dòng)而淡入視圖。
縮放變換：元素根據(jù)滾動(dòng)進(jìn)度逐漸增大或減小尺寸。等等

讓我們創(chuàng)建一些動(dòng)畫(huà)。在創(chuàng)建任何滾動(dòng)鏈接動(dòng)畫(huà)時(shí)，您將經(jīng)常使用來(lái)自成幀器運(yùn)動(dòng)的這些方法和掛鉤。

滾動(dòng)進(jìn)度檢測(cè)（useScroll）：跟蹤用戶的滾動(dòng)位置，通常返回 0 到 1 之間的值，表示頁(yè)面向下的進(jìn)度。
```
npx create-next-app@latest
```

轉(zhuǎn)換滾動(dòng)數(shù)據(jù) (useTransform)：將滾動(dòng)位置映射到特定的動(dòng)畫(huà)屬性，例如不透明度、比例或位置。使用它可以在滾動(dòng)過(guò)程中觸發(fā)淡入淡出、移動(dòng)、旋轉(zhuǎn)、縮放或顏色變化等動(dòng)畫(huà)。

   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? @/*

使用運(yùn)動(dòng)元素制作動(dòng)畫(huà)：使用motion.div（或任何運(yùn)動(dòng)組件）包裹目標(biāo)元素，并將動(dòng)畫(huà)鏈接到滾動(dòng)進(jìn)度。
```
  npm install framer-motion
```

過(guò)渡：應(yīng)用平滑過(guò)渡，使動(dòng)畫(huà)感覺(jué)流暢自然。

    'use client';

      export default function Home() {

          return (
           <div>

           </div>
         );
       }

初始和最終狀態(tài)：使用初始、動(dòng)畫(huà)或樣式屬性來(lái)定義元素最初的外觀，并使用鏈接到scrollYProgress的useTransform或動(dòng)畫(huà)控制其最終狀態(tài)。
```
    npm run dev
```

滾動(dòng)進(jìn)度條

我們首先創(chuàng)建一個(gè)滾動(dòng)進(jìn)度條。為此，請(qǐng)打開(kāi)文本編輯器，創(chuàng)建一個(gè)新組件，然后開(kāi)始在其中編寫代碼。

   const { scrollYProgress } = useScroll();

這里我們使用：

useScroll：提供滾動(dòng)位置作為 0 到 1 之間的標(biāo)準(zhǔn)化值。
useTransform：將滾動(dòng)進(jìn)度映射到我們需要的特定值范圍，無(wú)論是進(jìn)度圈的筆畫(huà) dasharray 還是我們想要應(yīng)用的任何其他轉(zhuǎn)換。
運(yùn)動(dòng)組件：我們使用 Framer Motion 的 Motion.circle 基于滾動(dòng)來(lái)實(shí)時(shí)設(shè)置筆劃長(zhǎng)度的動(dòng)畫(huà)。

動(dòng)態(tài)縮放文本動(dòng)畫(huà)

在此示例中，我們將使用 Framer Motion 為文本元素創(chuàng)建滾動(dòng)鏈接的動(dòng)態(tài)縮放效果。

跟蹤滾動(dòng)進(jìn)度：與進(jìn)度條類似，我們使用 useScroll() 來(lái)獲取頁(yè)面當(dāng)前的滾動(dòng)進(jìn)度。 scrollYProgress 值范圍從頂部的 0 到完全滾動(dòng)時(shí)的 1。
```
  <motion.div
    initial="hidden"
    whileInView="visible"
    viewport={{ once: true }}  // animation will occur only once
  />
```
將滾動(dòng)值轉(zhuǎn)換為控制比例：我們使用 useTransform() 將滾動(dòng)進(jìn)度轉(zhuǎn)換為隨著用戶滾動(dòng)而動(dòng)態(tài)變化的比例值。在這種情況下，我們將scrollYProgress從[0, 0.5, 1]映射到縮放值[1, 2, 1]，這意味著文本將從原始大小增長(zhǎng)，在滾動(dòng)中間尺寸加倍，然后縮小當(dāng)你到達(dá)底部時(shí)返回。
```
npx create-next-app@latest
```

對(duì)文本元素進(jìn)行動(dòng)畫(huà)處理： 在motion.h1 組件中，我們將使用樣式屬性的scaleValue 來(lái)根據(jù)滾動(dòng)位置平滑地對(duì)文本縮放效果進(jìn)行動(dòng)畫(huà)處理。當(dāng)用戶滾動(dòng)時(shí)，文本將“變大”和“收縮”。

   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? @/*

設(shè)置該部分的樣式：文本位于全屏部分的中心，該部分具有背景漸變以增加視覺(jué)吸引力。背景創(chuàng)建了從紫色到靛藍(lán)色的平滑漸變，使動(dòng)態(tài)文本更加突出。
```
  npm install framer-motion
```

使用的概念：

useScroll：我們?cè)俅问褂眠@個(gè)鉤子來(lái)跟蹤頁(yè)面的滾動(dòng)進(jìn)度，作為動(dòng)畫(huà)的觸發(fā)器。
useTransform：在這里，我們將滾動(dòng)進(jìn)度映射到縮放值，使文本在滾動(dòng)事件期間平滑地放大或縮小。
motion 組件：motion.h1 組件實(shí)時(shí)動(dòng)畫(huà)，隨著滾動(dòng)值的變化動(dòng)態(tài)調(diào)整比例。

我們?cè)俅问褂孟嗤母拍睢?useScroll、useTransform 和運(yùn)動(dòng)。所以，這是滾動(dòng)鏈接的一部分?，F(xiàn)在讓我們創(chuàng)建一些滾動(dòng)觸發(fā)動(dòng)畫(huà)。

創(chuàng)建滾動(dòng)觸發(fā)的動(dòng)畫(huà)

滾動(dòng)觸發(fā)的動(dòng)畫(huà)在一些示例中并不適用。您可以將滾動(dòng)動(dòng)畫(huà)鏈接到頁(yè)面的特定組件。例如，我有一個(gè)包含兩個(gè)元素和一個(gè)包含一些文本的 div 的登陸頁(yè)面。目前，頁(yè)面上沒(méi)有動(dòng)畫(huà)，但我想添加在視口進(jìn)入視圖時(shí)激活的動(dòng)畫(huà)。

Create Beautiful Scroll Animations Using Framer Motion

為此，我們將使用滾動(dòng)觸發(fā)的動(dòng)畫(huà)。正如我們之前了解到的，當(dāng)特定視口進(jìn)入視圖時(shí)，就會(huì)發(fā)生滾動(dòng)觸發(fā)的動(dòng)畫(huà)。因此，讓我們將 Framer Motion 元素添加到此代碼中。

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

我們從framer-motion導(dǎo)入動(dòng)作
整個(gè)組件被包裹在一個(gè)section元素中，它有一些基本的樣式。
;這是第一個(gè)動(dòng)作 div。它包含主要內(nèi)容（標(biāo)題和段落）。它使用initial和whileInView來(lái)創(chuàng)建滾動(dòng)觸發(fā)的動(dòng)畫(huà)：

initial={{ opacity: 0, y: 50 }}：最初，該框是不可見(jiàn)的（opacity: 0）并向下放置 50 像素（y: 50）。
whileInView={{ opacity: 1, y: 0 }}：當(dāng)用戶將其滾動(dòng)到視圖中時(shí)，它變得完全可見(jiàn)（不透明度：1）并移動(dòng)到正常位置（y：0）。
transition={{ period: 0.8, escape: 'easeOut' }}: 過(guò)渡需要 0.8 秒并平滑地緩出。

里面的內(nèi)容采用 Tailwind 類進(jìn)行樣式設(shè)計(jì)，為其提供填充、90% 不透明度的背景、陰影、圓角和最大寬度。
之后，我們有第二個(gè)動(dòng)態(tài) div（從上到下的動(dòng)畫(huà)文本）。這個(gè)動(dòng)畫(huà)一些從屏幕頂部向下移動(dòng)的文本：

initial={{ y: -100, opacity: 0 }}：文本從正常位置上方 100 像素開(kāi)始，并且不可見(jiàn)。
whileInView={{ y: 0, opacity: 1 }}：當(dāng)它進(jìn)入視圖時(shí)，它會(huì)移動(dòng)到正常位置并變得完全可見(jiàn)。
transition={{delay: 0.5,duration: 0.8 }}：動(dòng)畫(huà)開(kāi)始前有0.5秒的延遲，產(chǎn)生交錯(cuò)效果。

最終輸出將如下所示。

結(jié)論

這就是今天的博客。我們介紹了 2 種類型的動(dòng)畫(huà)以及創(chuàng)建這些動(dòng)畫(huà)時(shí)使用的一些方法，例如： useScroll useTransition whileInView 初始狀態(tài)和最終狀態(tài)以及類似的東西。

我在 StalkBliz 項(xiàng)目中添加了帶有更多動(dòng)畫(huà)示例的所有代碼。您可以在此處查看并使用代碼查看更多示例滾動(dòng)動(dòng)畫(huà)。如果您想探索更多滾動(dòng)動(dòng)畫(huà)的道具、方法和示例，可以在此處查看 Framer Motion 的滾動(dòng)文檔。

感謝您閱讀此博客。如果您從中學(xué)到了一些東西，請(qǐng)點(diǎn)贊并與您的朋友和社區(qū)分享。我撰寫博客并分享有關(guān) JavaScript、TypeScript、開(kāi)源和其他 Web 開(kāi)發(fā)相關(guān)主題的內(nèi)容。歡迎在我的社交媒體上關(guān)注我。我們下一篇見(jiàn)。謝謝你:)