如何从头开始在React中创建一个加载动画

方石剑
1,645 阅读6分钟

简介

当创建从外部来源获取内容的React应用程序需要一些时间来加载时，用加载器吸引用户并保持他们的注意力，提供一个愉快的用户体验总是一个好主意，因为这有助于用户了解正在发生的事情，而不是让他们猜测。

在本指南中，我们将学习如何在加载应用程序和从外部来源检索内容时显示加载器动画。我们将同时使用一个GIF旋转器和使用CSS从头开始创建一个旋转器。

为此--我们将建立一个获取报价的小程序，在获取报价时有一个加载屏幕。

react-loading-animation-example

创建一个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是一种富有表现力的语言，它允许我们进行各种造型设计，如绘制形状、描述元素的相对顺序及其特征、添加图像，甚至根据我们的需要制作动画。让我们做一个非常简单的旋转器加载器。

还记得我们在load-container 标记中的容器内有一个旋转器<div> 吗？虽然我们之前没有使用它，但我们现在将使用它来对图标进行样式设计，然后使用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中的不同，因为我们现在使用状态和三元操作符来控制加载器出现和消失的时间。我们还将使用useEffect() 钩子来确保在我们的应用程序加载时，加载器会出现一段预定的时间。第一步是导入这两个相关的钩子，然后是创建我们的加载状态。

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

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

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

export default App;

**注意：**在上面的代码中，状态默认设置为false ，只要我们想让loader-container 出现，我们就可以把它改成true 。

开始时，使用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 ，并在这个超时期间显示动画。

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 。

如果你想了解更多关于三元运算符的信息 - 请阅读我们的 "JavaScript中的三元运算符指南"!

当从API请求内容时实现一个加载动画

人们在React中使用加载动画的另一个场景是在从外部来源加载内容时，因为这些数据是外部的，除了预期的处理时间外，其交付还受到各种外部事件的影响。

让我们从随机报价API中请求一个随机报价，并将它们存储在状态中，之后我们将在屏幕上显示它们。每当我们发送请求时，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-spinners --一个带有预置旋转器的库，请阅读我们的! "如何在React中用react-spinners创建一个加载动画"!

总结

在本指南中，我们学习了如何使用两种不同的方法为我们的React应用程序添加一个加载动画。我们导入了一个简单的GIF，并使用CSS从头开始创建了一个旋转器。最后，我们看了一下如何在一个更现实的环境中整合动画--从API中获取数据并在等待结果时显示效果。

avatar
文章
阅读
粉丝