Oživte svou aplikaci React pomocí animací

Animace mohou být skvělým způsobem, jak zlepšit uživatelský zážitek z vaší aplikace React. Mohou pomoci zjemnit interakce a mohou také poskytnout vizuální zpětnou vazbu nebo upozornit na konkrétní prvek.

Existuje mnoho způsobů, jak můžete pracovat s animacemi CSS pomocí Reactu, od nativního řešení až po knihovny třetích stran.

Proč používat animace v Reactu?

Existuje mnoho důvodů, proč byste mohli chtít používat animace v aplikaci React. Mezi nejčastější důvody patří:

• Aby interakce působily přirozeněji. Animace mohou pomoci k tomu, aby byly interakce uživatelů přirozenější a plynulejší. Pokud například používáte komponentu přepínání, možná budete chtít animovat přepínací tlačítko mezi stavy „zapnuto“ a „vypnuto“. Dalším příkladem jsou ukazatele průběhu, můžete vytvořit animovaný ukazatel průběhu pro stránky vaší aplikace Reagovat.
• Poskytování vizuální zpětné vazby. Animace mohou uživateli poskytnout vizuální zpětnou vazbu. Pokud například uživatel klepne na tlačítko, možná budete chtít tlačítko animovat, abyste naznačili, že aplikace tuto akci zaregistrovala.
instagram viewer
• Vedení pozornosti uživatele. Animace mohou vést pozornost uživatele k určitému prvku. Máte-li například modální dialog, který se objeví na obrazovce, možná budete chtít použít animaci, abyste na něj upozornili uživatele.
• Vytváření pocitu naléhavosti.Animace mohou vytvářet pocit naléhavosti nebo důležitosti. Pokud máte například komponentu časovače, která odpočítává, možná budete chtít použít animaci k vyjádření naléhavosti, když se blíží termín.

Existuje několik způsobů, jak přidat animace do komponent React. Tři, o kterých se zde dozvíte, jsou animace stylu inline, knihovna reagovat-animací a knihovna reagovat-simple-animate.

Začněte tím vytvoření základní aplikace pro reakce, poté postupujte podle zvolené metody.

Metoda 1: Použití animací stylu Inline

Řekněme například, že chcete komponentu animovat tak, aby po klepnutí na tlačítko zmizela. Můžete to udělat pomocí následujícího kódu:

import Reagovat, { Komponenta } z 'reagovat';
třídaFadeInOutrozšiřujeKomponent{
konstruktér(rekvizity) {
super(rekvizity);
tento.state = {
 isVisible: Nepravdivé
 };
 }
poskytnout() {
konst styly = {
neprůhlednost: tento.Stát.jeViditelný? 1: 0,
 přechod: 'neprůhlednost 2s'
 };
vrátit se (
<div>
<div style={styles}>
 Ahoj světe!
</div>
<button onClick={this.toggleVisibility}>
 Přepnout
</button>
</div>
 );
 }
toggleVisibility = () => {
tento.setState (prevState => ({
isVisible: !prevState.jeViditelný
 }));
 }
}
vývoznívýchozí FadeInOut;

V tomto příkladu má objekt stylu vlastnosti neprůhlednosti a přechodu. Neprůhlednost je 0, když komponenta není viditelná, a 1, když je. Vlastnost přechodu je „opacity 2s“, což způsobí, že se neprůhlednost při změně změní na dvě sekundy.

Tlačítko přepíná viditelnost komponenty. Když někdo klikne na tlačítko, stavová proměnná isVisible se aktualizuje a komponenta se bude slábnout nebo zhasínat v závislosti na jejím aktuálním stavu.

Metoda 2: Použití knihovny reakčních animací

Dalším způsobem, jak přidat animace ke komponentám React, je použít knihovnu, jako jsou například reakt-animace. Tato knihovna poskytuje sadu předdefinovaných animací, které můžete použít ve svých komponentách React.

Chcete-li používat animace reakcí, musíte nejprve nainstalovat knihovnu:

npm Nainstalujte reakční animace --Uložit

Musíte také nainstalovat aphrodite, což je závislost reakčních animací:

npm Nainstalujte aphrodite --Uložit

Jakmile nainstalujete knihovny, můžete importovat animace, které chcete použít:

import { fadeIn, fadeOut } z 'reakční animace';

Poté můžete použít animace ve vašich komponentách:

import Reagovat, { Komponenta } z 'reagovat';
import { StyleSheet, css } z 'afrodita';
import { fadeIn, fadeOut } z 'reakční animace';
konst styly = StyleSheet.create({
 fadeIn: {
 Název animace: fadeIn,
 Délka animace: '2s'
 },
 odeznít: {
 Název animace: fadeOut,
 Délka animace: '2s'
 }
});
třídaFadeInOutrozšiřujeKomponent{
konstruktér(rekvizity) {
super(rekvizity);
tento.state = {
 isVisible: Nepravdivé
 };
 }
poskytnout() {
konst className = tento.state.isVisible? css (styles.fadeIn): css (styles.fadeOut);
vrátit se (
<div>
<div className={className}>
 Ahoj světe!
</div>
<button onClick={this.toggleVisibility}>
 Přepnout
</button>
</div>
 );
 }
toggleVisibility = () => {
tento.setState (prevState => ({
isVisible: !prevState.jeViditelný
 }));
 }
}
vývoznívýchozí FadeInOut;

Tento příklad začíná importem animací fadeIn a fadeOut z knihovny reagovat-animations. Poté definuje objekt styles s animacemi fadeIn a fadeOut a animationDuration nastaveným na dvě sekundy.

Tlačítko přepíná viditelnost komponenty. Když na ni někdo klepne, stavová proměnná isVisible se aktualizuje a komponenta se rozsvítí nebo zhasne v závislosti na jejím aktuálním stavu.

Metoda 3: Použití knihovny reagovat-simple-animate

Knihovna React-simple-animate poskytuje jednoduchý způsob, jak přidat animace do komponent React. Nabízí deklarativní API, které usnadňuje definování složitých animací.

Chcete-li knihovnu používat, musíte ji nejprve nainstalovat:

npm Nainstalujte reagovat-jednoducho-animovat --Uložit

Poté jej můžete použít ve svých komponentách:

import Reagovat, { Komponenta } z 'reagovat';
import { Animate, AnimateKeyframes} z "react-simple-animate";
třídaAplikacerozšiřujeKomponent{
 poskytnout() {
vrátit se (
<div>
<Animovat
 hrát si
Start={{
 neprůhlednost: 0
 }}
konec={{
 neprůhlednost: 1
 }}
>
<div>
 Ahoj světe!
</div>
</Animate>
<AnimateKeyframes
 hrát si
 trvání={2}
 klíčové snímky={[
 { neprůhlednost: 0, transformace: 'translateX(-100px)' },
 { neprůhlednost: 1, transformace: 'přeložitX(0px)' }
 ]}
>
<div>
 Ahoj světe!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
vývoznívýchozí Aplikace;

The Animovat komponenta mizí v prvku div. Začíná neprůhledností 0 a končí neprůhledností 1. Prop play je nastaven na true, což způsobí, že se animace automaticky přehraje, když se komponenta připojí.

The AnimateKeyframes komponenta animuje prvek div během dvou sekund. Pole klíčových snímků určuje počáteční a koncový stav animace. První klíčový snímek má neprůhlednost 0 a hodnotu translateX -100px. Druhý klíčový snímek má neprůhlednost 1 a hodnotu translateX 0px.

Zvyšte zapojení uživatelů pomocí animací

Nyní znáte některé ze způsobů, jak můžete použít animace v aplikaci React. Pomocí animací můžete zvýšit zapojení uživatelů do vaší aplikace.

Můžete například chtít použít animaci k odměně uživatele za dokončení úkolu. Může to být něco tak jednoduchého, jako je krátká animace „spinner“ nebo složitější animace, která se přehraje, když uživatel dokončí úroveň ve hře.

Svou aplikaci React můžete také zdarma nasadit na web se službami, jako jsou stránky Github nebo Heroku.