使用 Framer Motion 創建精美的滾動動畫

介紹

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

今天，我們將探索動畫滾動的不同方法。我們將了解滾動動畫的類型以及它們的使用方法。我們將了解該模式，以便我們可以將滾動動畫新增至我們的任何項目或網站。

我們將使用 Framer Motion 在 Next.js 中建立動畫。如果您喜歡使用任何其他框架或庫，您可以使用它。

那麼，事不宜遲，讓我們開始吧。

滾動動畫的類型

滾動動畫有兩種：

1. 滾動-連結動畫：根據您滾動的距離移動或改變的動畫，元素將在您滾動時不斷更新。

2. 滾動-觸發動畫：當元素進入或離開視口時觸發普通動畫。

透過 Framer 運動，您可以實現這兩點。讓我們一一了解。

滾動連結動畫

滾動連結動畫是動畫的進度或移動直接連結到使用者滾動的距離的動畫。在這種類型的動畫中，元素隨著使用者滾動而不斷變化。

這意味著如果您位於第一點，那麼動畫將追蹤您，它也將位於第一點。而且，如果您滾動並轉到第二點，動畫將跟隨您到達該點。

主要特點

• 動畫與滾動進度同步。
• 當您滾動時，動畫會根據您滾動的程度即時更新。
• 這些動畫可以涉及移動、縮放、旋轉或更改元素的外觀，通常使用 Framer Motion 中的 useScroll 和 useTransform 鉤子（我們將在前面了解這些）。

滾動觸發的動畫

當您滾動時元素進入或離開特定視口時，就會發生滾動觸發的動畫。這意味著動畫僅在使用者滾動到頁面的特定部分時才開始。

所以，如果我在第一點，並且為第三點設定了滾動觸發的動畫，那麼該動畫將在第三點發生。這意味著只有當我到達該視窗時才會觸發動畫（在本例中是第三點）

要了解這一點，你可以看這個影片？ 。在這裡，您會看到橙色元素何時出現在視窗中意味著它在螢幕上完全可見，然後顯示導航列。

主要特點

• 由滾動位置觸發：一旦到達特定的滾動位置，動畫就會被激活，而不是像滾動連結動畫一樣與滾動持續同步。這通常是使用 whileInView 或 onEnter 等條件來實現的。

• 離散動畫：與滾動連結動畫不同，滾動觸發動畫在特定時刻發生，例如當元素進入或退出時視口。這些可能包括淡入、滑入或當使用者滾動經過某個點時發生的其他視覺效果。

• 一次性或可重複動畫： 滾動觸發動畫可以設定為僅在元素首次進入視圖時播放一次，或者可以在元素首次進入視圖時重複播放。元素再次進入視口，具體取決於用例。
  

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

接下來是什麼？

現在我們了解了這兩種類型的滾動動畫及其差異，讓我們開始了解創建這些動畫所使用的模式。這將允許您向任何項目添加滾動動畫。

首先，我們將建立一個專案來實際理解這一點，然後我們將創建兩種類型的動畫。

項目設定

讓我們先設定具有所有必要依賴項的 Next.js 專案。我將在這個專案中使用 StalkBlitz，但您也可以使用 VSCode。雖然所有步驟我都會從 VSCode 角度告訴你，這樣你就可以按照步驟操作。

1. 使用 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? @/*
   
   

2. 安裝 Framer Motion
   

     npm install framer-motion
   

3. 清理預設檔。
   刪除 app/page.tsx 中的預設程式碼。我們將從頭開始，專注於滾動動畫。該文件應如下所示。
   

       'use client';
   
         export default function Home() {
   
             return (
              <div>
   
              </div>
            );
          }
   
   

4. 啟動開發伺服器
   

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

建立滾動動畫

現在我們的專案已經建立起來，我們可以一一創建這兩種類型的滾動動畫。您可以直接在 app/page.tsx 檔案中開始編寫程式碼，或建立一個單獨的元件並將所有元件匯入 app/page.tsx 檔案中。

建立滾動連結動畫

有幾個滾動連結動畫的例子：

• 捲動進度條：當使用者向下捲動頁面時填入的圓形或線性進度條。

• 視差滾動：背景影像或元素相對於前景以不同的速度移動，在滾動時創建深度效果。

• 淡入元素：內容隨著使用者捲動而淡入視圖。

• 縮放變換：元素根據滾動進度逐漸增加或減少尺寸。等等

讓我們來創建一些動畫。在創建任何滾動連結動畫時，您將經常使用來自成幀器運動的這些方法和掛鉤。

1. 滾動進度偵測（useScroll）：追蹤使用者的捲動位置，通常傳回 0 到 1 之間的值，表示頁面向下的進度。
   

   npx create-next-app@latest
   

2. 轉換捲動資料 (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? @/*
   
   

3. 使用運動元素製作動畫：使用motion.div（或任何運動組件）包裹目標元素，並將動畫連結到滾動進度。
   

     npm install framer-motion
   

4. 過渡：應用平滑過渡，使動畫感覺流暢自然。
   

       'use client';
   
         export default function Home() {
   
             return (
              <div>
   
              </div>
            );
          }
   
   

5. 初始和最終狀態：使用初始、動畫或樣式屬性來定義元素最初的外觀，並使用連結到scrollYProgress的useTransform或動畫控制其最終狀態。
   

       npm run dev
   

捲動進度條

我們先建立一個滾動進度條。為此，請開啟文字編輯器，建立一個新元件，然後開始在其中編寫程式碼。

   const { scrollYProgress } = useScroll();

這裡我們使用：

• useScroll：提供滾動位置作為 0 到 1 之間的標準化值。

• useTransform：將滾動進度對應到我們需要的特定值範圍，無論是進度圈的筆畫 dasharray 還是我們想要應用的任何其他轉換。

• 運動組件：我們使用 Framer Motion 的 Motion.circle 基於滾動來即時設定筆劃長度的動畫。

動態縮放文字動畫

在此範例中，我們將使用 Framer Motion 為文字元素建立滾動連結的動態縮放效果。

1. 追蹤滾動進度：與進度條類似，我們使用 useScroll() 來取得頁面目前的滾動進度。 scrollYProgress 值範圍從頂部的 0 到完全滾動時的 1。
   

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

2. 將滾動值轉換為控制比例：我們使用 useTransform() 將滾動進度轉換為隨著使用者滾動而動態變化的比例值。在這種情況下，我們將scrollYProgress從[0, 0.5, 1]映射到縮放值[1, 2, 1]，這意味著文字將從原始大小增長，在滾動中間尺寸加倍，然後縮小當你到達底部時返回。
   

   npx create-next-app@latest
   

3. 對文字元素進行動畫處理： 在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? @/*
   
   

4. 設定該部分的樣式：文字位於全螢幕部分的中心，該部分具有背景漸變以增加視覺吸引力。背景創建了從紫色到靛藍色的平滑漸變，使動態文字更加突出。
   

     npm install framer-motion
   

使用的概念：

• useScroll：我們再次使用這個鉤子來追蹤頁面的滾動進度，作為動畫的觸發器。

• useTransform：在這裡，我們將滾動進度映射到縮放值，使文字在滾動事件期間平滑地放大或縮小。

• motion 元件：motion.h1 元件即時動畫，隨著滾動值的變化動態調整比例。

我們再次使用相同的概念。 useScroll、useTransform 和運動。所以，這是滾動連結的一部分。現在讓我們建立一些滾動觸發動畫。

建立滾動觸發的動畫

滾動觸發的動畫在一些範例中並不適用。您可以將滾動動畫連結到頁面的特定元件。例如，我有一個包含兩個元素和一個包含一些文字的 div 的登陸頁面。目前，頁面上沒有動畫，但我想添加在視窗進入視圖時啟動的動畫。

為此，我們將使用滾動觸發的動畫。正如我們之前所了解的，當特定視窗進入視圖時，就會發生滾動觸發的動畫。因此，讓我們將 Framer Motion 元素新增到此程式碼中。

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

1. 我們從framer-motion導入動作

2. 整個組件被包裹在一個section元素中，它有一些基本的樣式。

3. ;這是第一個動作 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% 不透明度的背景、陰影、圓角和最大寬度。

4. 之後，我們有第二個動態 div（從上到下的動畫文字）。這個動畫一些從螢幕頂部向下移動的文字：

   initial={{ y: -100, opacity: 0 }}：文字從正常位置上方 100 像素開始，不可見。
   whileInView={{ y: 0, opacity: 1 }}：當它進入視圖時，它會移動到正常位置並變得完全可見。
   transition={{delay: 0.5,duration: 0.8 }}：動畫開始前有0.5秒的延遲，產生交錯效果。

最終輸出將如下圖所示。

結論

這就是今天的部落格。我們介紹了 2 種類型的動畫以及創建這些動畫時使用的一些方法，例如： useScroll useTransition whileInView 初始狀態和最終狀態以及類似的東西。

我在 StalkBliz 專案中新增了所有帶有更多動畫範例的程式碼。您可以在此處查看並使用程式碼查看更多範例滾動動畫。如果您想探索更多滾動動畫的道具、方法和範例，可以在此處查看 Framer Motion 的捲動文件。

感謝您閱讀此部落格。如果您從中學到了一些東西，請按讚並與您的朋友和社區分享。我撰寫部落格並分享有關 JavaScript、TypeScript、開源和其他 Web 開發相關主題的內容。歡迎在我的社群媒體上關注我。我們下一篇見。謝謝你:)

• 推特
• 領英
• GitHub

以上是使用 Framer Motion 創建精美的滾動動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！