Jak vytvořit animaci načítání v React od nuly

Úvod

Při vytváření aplikací React, které načítají obsah z externích zdrojů, jejichž načítání trvá nějakou dobu, je vždy dobré poskytnout uživatelům příjemný zážitek tím, že zapojíte uživatele a udržíte jejich pozornost pomocí loaderu, protože to uživatelům pomáhá lépe pochopit, co se děje. než je nechat spekulovat.

Za tímto účelem vytvoříme malou aplikaci, která bude načítat nabídky s načítací obrazovkou při načítání nabídky:

Vytvoření ukázkové aplikace React

Začněme tím, že se podíváme na naše značky React. V zásadě máme dva <div> prvky v nadřazeném prvku <div> (pro jednoduchost) - jedna je loader-container a druhý je 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;

Zatím jsme vytvořili pouze <div> pro náš nakladač. Nyní můžeme prozkoumat různé metody pro získání zavaděče a také to, jak jej můžeme upravit tak, aby se objevil na komponentě, nebo dokonce, aby se zobrazil na celé obrazovce.

Poznámka: Můžete se podívat na tento repozitář a v případě potřeby zkontrolovat kód při čtení tohoto průvodce.

Vytvoření animace Loader pomocí React – GIF a CSS

První věc, kterou musíme udělat před implementací animace zavaděče v Reactu, je vytvořit samotnou animaci. Existuje několik způsobů, jak to udělat, ale v tomto článku se podíváme na dva z nich – GIF animace a animace CSS.

Vytvoření animace Loader pomocí obrázků GIF

GIF je animovaný obrázek, který se (může) donekonečna opakovat bez pauzy. Lze jej vytvořit pomocí libovolného GIFu výrobce nebo od nuly pomocí návrhářských nástrojů. V této příručce použijeme tento GIF a zobrazíme jej jako pozadí 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;
}

Poznámka: Stejný GIF můžete použít i na jiné prvky, abyste lokalizovali rozsah animace.

Výše uvedený kód nám pomůže vytvořit černé pozadí, které pokryje celou obrazovku před umístěním naší ikony zavaděče do středu. Když spustíme naši aplikaci, loader-container bude nyní nahoře, protože jsme nastavili z-index do 1:

Skvělý! Vytvořili jsme načítací obrazovku pomocí GIF obrázek jako zavaděč. Existuje nespočet dalších způsobů, jak můžeme upravit styl loader-container pro různé efekty. Podívejme se nyní na to, jak bychom mohli vytvořit tento zavaděč pomocí CSS a vyhnout se používání externích obrázků, které mohou představovat zátěž z hlediska doby načítání.

Vytvoření animace Loader pomocí CSS

CSS je expresivní jazyk, který nám umožňuje provádět různé stylizace, jako je kreslení tvarů, popis relativního pořadí prvků a jejich charakteristik, přidávání obrázků a dokonce animování podle našich potřeb. Udělejme si velmi jednoduchý nakladač na spinner .

Pamatujte, že jsme měli spinner <div> uvnitř kontejneru v našem load-container značka? Ačkoli jsme ji dříve nepoužívali, použijeme ji nyní ke stylizaci ikony a poté použijeme load-container pro vystředění ikony nakladače:

.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);
    }
}

S CSS - můžeme jemně doladit, jak je animace provedena. Zde jsme znovu vytvořili GIF z dřívějška! Dosud jsme diskutovali o dvou hlavních přístupech k vytváření animace zavaděče. Nyní se podívejme, jak je můžeme uvést do praxe.

Jak vytvořit načítání animace v Reactu

Animace načítání v Reactu se liší od toho, jak se provádí v JavaScriptu, protože nyní používáme stav a ternární operátory ovládat, kdy se nakladač objeví a zmizí. Použijeme také useEffect() háček, abyste zajistili, že se po předem stanovenou dobu během načítání naší aplikace objeví nakladač. Prvním krokem je import obou relevantních háčků a poté vytvoření našeho stavu načítání:

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

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

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

export default App;

Poznámka: Stav je nastaven na false standardně v kódu výše a můžeme jej změnit na true kdykoli chceme loader-container se objeví.

Chcete-li začít, použijte setTimeout() metoda, která umožní, aby se zavaděč objevil na 2 sekundy během vykreslování stránky. Tento časový limit simuluje drahé volání rozhraní API, které vyžaduje čas, než vrátí výsledky:

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;

To znamená, že kdykoli se naše aplikace vykreslí, naše loader-container by se měla zobrazit na 2 sekundy. K ovládání našeho loader-container můžeme použít ternární operátor a zobrazit animaci v tomto časovém limitu:

Zdarma e-kniha:Git Essentials

Prohlédněte si našeho praktického průvodce učením Git s osvědčenými postupy, průmyslově uznávanými standardy a přiloženým cheat sheetem. Přestaňte používat příkazy Google Git a skutečně se naučte to!

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;

Když loading je nastaven na true , ternární operátor v předchozím kódu zobrazí loader-container . Jinak se zobrazí main-content .

Implementace animace načítání při vyžádání obsahu z rozhraní API

Dalším scénářem, ve kterém lidé používají animaci načítání v Reactu, je načítání obsahu z externího zdroje, protože tato data jsou externí a jejich doručení je kromě předpokládané doby zpracování ovlivněno řadou externích událostí.

Vyžádejme si náhodnou nabídku z API Random Quotes a uložme je ve stavu, po kterém je zobrazíme na obrazovce. Kdykoli odešleme požadavek, loading stav bude nastaven na true . Jakmile bude obsah načten, nastavíme jej zpět na false , zastavení animace:

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;

Vytvořili jsme responzivní spinner od nuly! Případně můžete použít react-spinner knihovna, která má širokou škálu animací zavaděče.

Závěr

V této příručce jsme se naučili, jak přidat animaci načítání do naší aplikace React pomocí dvou různých přístupů. Importovali jsme jednoduchý GIF a vytvořili spinner od nuly pomocí CSS. Nakonec jsme se podívali na to, jak integrovat animaci do realističtějšího prostředí – načítání dat z API a zobrazení efektu při čekání na výsledek.