如何從頭開始在 React 中創建加載動畫

簡介

當創建從外部資源獲取內容的 React 應用程序需要一些時間來加載時，通過吸引用戶並通過加載器保持他們的注意力來提供愉快的用戶體驗總是一個好主意，因為這有助於用戶了解正在發生的事情而不是而不是讓他們去猜測。

為此 - 我們將構建一個獲取報價的小型應用程序，在獲取報價時會顯示加載屏幕：

創建一個示例 React 應用

讓我們從查看我們的 React 標記開始。基本上，我們有兩個 <div> 父元素中的元素 <div> （為簡單起見） - 一個是 loader-container 第二個是 main-content ：

import React from 'react';

const App = () => {
  return (
    <div className="container">
      <div className="loader-container">
        <div className="spinner"></div>
      </div>

      <div className="main-content">
        <h1>Hello World!</h1>
        <p>
          This is a demo Project to show how to add animated loading with React.
        </p>
        <div className="buttons">
          <button className="btn">
            <a href="#">Read Article</a>
          </button>
          <button className="btn get-quote">
            Generate Quote
          </button>
        </div>
        <div className="quote-section">
          <blockquote className="quote">
            If you do not express your own original ideas, if you do not listen
            to your own being, you will have betrayed yourself.
          </blockquote>
          - <span className="author">Rollo May</span>
        </div>
      </div>
    </div>
  );
};

export default App;

到目前為止，我們只創建了一個 <div> 對於我們的裝載機。現在，我們可以探索獲取加載器的各種方法，以及如何設置它的樣式以顯示在組件上，甚至使其顯示在整個屏幕上。

注意： 您可以在閱讀本指南時查看此存儲庫並根據需要交叉檢查代碼。

使用 React 創建加載器動畫 - GIF 和 CSS

在 React 中實現加載器動畫之前，我們必須做的第一件事就是創建動畫本身。有幾種方法可以做到這一點，但是，在本文中，我們將看看其中的兩種 - GIF 動畫和 CSS 動畫。

使用 GIF 創建加載器動畫

GIF 是動畫圖像，（可以）無限重複自身而不會暫停。它可以用任何 GIF 製作 製造商或使用設計工具從頭開始。在本指南中，我們將使用此 GIF 並將其作為 loader-container 的背景 ：

.loader-container {
    width: 100%;
    height: 100vh;
    position: fixed;
    background: rgba(0, 0, 0, 0.834)
        url("https://media.giphy.com/media/8agqybiK5LW8qrG3vJ/giphy.gif") center
        no-repeat;
    z-index: 1;
}

注意： 您也可以將相同的 GIF 應用於其他元素，以本地化動畫的範圍。

上面的代碼將幫助我們在將加載器圖標放在中心之前創建一個覆蓋整個屏幕的黑色背景。當我們運行我們的應用程序時，loader-container 現在將位於頂部，因為我們設置了 z-index 到1：

偉大的！我們使用 GIF 創建了一個加載屏幕 圖像作為加載器。我們可以通過多種其他方式來設置 loader-container 的樣式 為不同的效果。現在讓我們看看如何使用 CSS 創建這個加載器，避免使用外部圖像，這會給加載時間帶來負擔。

使用 CSS 創建加載器動畫

CSS 是一種富有表現力的語言，它允許我們執行各種樣式設置，例如繪製形狀、描述元素的相對順序及其特徵、添加圖像，甚至根據我們的需要為它們設置動畫。讓我們做一個非常簡單的 spinner loader .

記住我們有一個微調器 <div> 在我們的 load-container 中的容器內 標記？雖然我們之前沒有使用它，但我們現在將使用它來設置圖標的樣式，然後使用 load-container 將加載器圖標居中：

.loader-container {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    background: rgba(0, 0, 0, 0.834);
    z-index: 1;
}

.spinner {
    width: 64px;
    height: 64px;
    border: 8px solid;
    border-color: #3d5af1 transparent #3d5af1 transparent;
    border-radius: 50%;
    animation: spin-anim 1.2s linear infinite;
}

@keyframes spin-anim {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

使用 CSS - 我們可以微調動畫的完成方式。在這裡，我們重新創建了之前的 GIF！到目前為止，我們已經討論了創建加載器動畫的兩種主要方法。現在，讓我們看看如何將它們付諸實踐。

如何在 React 中創建加載動畫

React 中的加載動畫與 JavaScript 中的加載動畫不同，因為我們現在使用 state 和 三元運算符 控制加載器何時出現和消失。我們還將使用 useEffect() 鉤子以確保加載程序在我們的應用程序加載時出現預定的時間。第一步是導入兩個相關的鉤子，然後創建我們的加載狀態：

import React, { useState, useEffect } from 'react';

const App = () => {
  const [loading, setLoading] = useState(false);

  return (
       <!-- ... -->
  );
};

export default App;

注意： 狀態設置為 false 默認在上面的代碼中，我們可以把它改成true 每當我們想要 loader-container 出現。

首先，使用 setTimeout() 允許加載程序在頁面呈現時出現 2 秒的方法。此超時模擬了需要時間返回結果的昂貴 API 調用：

import React, { useState, useEffect } from 'react';

const App = () => {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  }, []);

  return (
    <div className="container">
        <!-- ... -->
    </div>
  );
};

export default App;

這意味著每當我們的應用呈現時，我們的 loader-container 應顯示 2 秒。我們可以使用三元運算符來控制我們的 loader-container 並在此超時時間內顯示動畫：

免費電子書：Git Essentials

查看我們的 Git 學習實踐指南，其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它！

import React, { useState, useEffect } from 'react';

const App = () => {
  const [loading, setLoading] = useState(false);
  useEffect(() => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 2000);
  }, []);

  return (
    <div className="container">
      {loading ? (
        <div className="loader-container">
      	  <div className="spinner"></div>
        </div>
      ) : (
        <div className="main-content">
          <h1>Hello World!</h1>
          <p>
            This is a demo Project to show how to add animated loading with
            React.
          </p>
          <div className="buttons">
            <button className="btn">
              <a href="#">Read Article</a>
            </button>
            <button className="btn get-quote">
              Generate Quote
            </button>
          </div>
          <div className="quote-section">
            <blockquote className="quote">{quote.content}</blockquote>-{' '}
            <span className="author">{quote.author}</span>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;

當 loading 設置為 true , 前面代碼中的三元運算符會顯示 loader-container .否則，它將顯示 main-content .

從 API 請求內容時實現加載動畫

人們在 React 中使用加載動畫的另一種情況是從外部源加載內容時，因為這些數據是外部的，並且除了預期的處理時間之外，它的傳遞還受到各種外部事件的影響。

讓我們從 Random Quotes API 請求一個隨機報價並將它們存儲在 state 中，之後我們將它們顯示在屏幕上。每當我們發送請求時，loading 狀態將設置為 true .獲取內容後，我們會將其設置回 false ，停止動畫：

import React, { useState, useEffect } from 'react';

const App = () => {
  const [loading, setLoading] = useState(false);
  const [quote, setQuote] = useState({});

  const getRandomQuote = () => {
    setLoading(true);
    fetch('https://api.quotable.io/random')
      .then((res) => res.json())
      .then((data) => {
        setLoading(false);
        setQuote(data);
      });
  };

  return (
    <div className="container">
      {loading ? (
        <div className="loader-container">
      	  <div className="spinner"></div>
        </div>
      ) : (
        <div className="main-content">
          <h1>Hello World!</h1>
          <p>
            This is a demo Project to show how to add animated loading with
            React.
          </p>
          <div className="buttons">
            <button className="btn">
              <a href="#">Read Article</a>
            </button>
            <button className="btn get-quote" onClick={getRandomQuote}>
              Generate Quote
            </button>
          </div>
          <div className="quote-section">
            <blockquote className="quote">{quote.content}</blockquote>-{' '}
            <span className="author">{quote.author}</span>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;

我們從頭開始創建了一個響應式微調器！或者，您可以使用 react-spinner 庫，其中有各種各樣的加載器動畫。

結論

在本指南中，我們學習瞭如何使用兩種不同的方法向我們的 React 應用程序添加加載動畫。我們已經導入了一個簡單的 GIF 並使用 CSS 從頭開始創建了一個微調器。最後，我們看看如何將動畫集成到更真實的環境中——從 API 獲取數據並在等待結果時顯示效果。