Tedd életre React alkalmazásodat animációkkal

Az animációk nagyszerű módot jelenthetnek a React alkalmazás felhasználói élményének javítására. Segíthetnek az interakciók gördülékenyebbé tételében, és vizuális visszajelzést is adhatnak, vagy felhívhatják a figyelmet egy adott elemre.

A React használatával számos módon dolgozhat CSS-animációkkal, a natív megoldástól a harmadik féltől származó könyvtárakig.

Miért használjunk animációkat a Reactban?

Számos oka lehet annak, hogy miért szeretne animációkat használni a React alkalmazásban. A leggyakoribb okok közül néhány:

• Az interakciók természetesebbé tétele. Az animációk természetesebbé és gördülékenyebbé tehetik a felhasználói interakciókat. Például, ha kapcsolókomponenst használ, érdemes lehet animálni a váltógombot a „be” és „ki” állapotok között. Egy másik példa a folyamatjelző sávok animált folyamatjelző sáv létrehozása a react alkalmazás oldalaihoz.
• Vizuális visszajelzés biztosítása. Az animációk vizuális visszajelzést adhatnak a felhasználónak. Ha például egy felhasználó rákattint egy gombra, érdemes lehet animálni a gombot, jelezve, hogy az alkalmazás regisztrálta ezt a műveletet.
  instagram viewer
• A felhasználó figyelmének terelése. Az animációk egy adott elemre irányíthatják a felhasználó figyelmét. Például, ha van egy modális párbeszédpanel, amely megjelenik a képernyőn, érdemes lehet animációt használni, hogy felhívja rá a felhasználó figyelmét.
• A sürgősség érzésének megteremtése.Az animációk sürgősség vagy fontosság érzését kelthetik. Ha például van egy időzítő összetevője, amely visszaszámlál, érdemes lehet animációt használni a sürgősség tükrözésére a határidő közeledtével.

Számos módja van animációk hozzáadásának a React összetevőihez. A három, amelynek használatáról itt megtudhatja, a soron belüli stílusú animációk, a react-animations könyvtár és a react-simple-animate könyvtár.

Kezdje el alapvető reakcióalkalmazás létrehozása, majd kövesse a választott módszert.

1. módszer: Soron belüli stílusanimációk használata

Tegyük fel például, hogy animálni szeretne egy összetevőt, hogy az eltűnjön, amikor rákattint egy gombra. Ezt a következő kóddal teheti meg:

import React, { Component } tól től 'reagál';
osztályFadeInOutkiterjedÖsszetevő{
konstruktőr(kellékek) {
szuper(kellékek);
ez.state = {
 látható: hamis
 };
 }
Vakol() {
const stílusok = {
átlátszatlanság: ez.állapot.Látható? 1: 0,
 átmenet: 'átlátszatlanság 2s'
 };
Visszatérés (
<div>
<div style={styles}>
 Helló Világ!
</div>
<gomb onClick={this.toggleVisibility}>
 Váltás
</button>
</div>
 );
 }
toggleVisibility = () => {
ez.setState (prevState => ({
látható: !prevState.Látható
 }));
 }
}
exportalapértelmezett FadeInOut;

Ebben a példában egy stílusobjektum átlátszatlansági és átmeneti tulajdonságokkal rendelkezik. Az átlátszatlanság 0, ha az összetevő nem látható, és 1, ha látható. Az átmenet tulajdonsága az „opacitás 2s”, amely az átlátszatlanság változása esetén két másodperc alatt átmegy.

A gomb átkapcsolja az összetevő láthatóságát. Amikor valaki rákattint a gombra, az isVisible állapotváltozó frissül, és az összetevő az aktuális állapotától függően be- vagy elhalványul.

2. módszer: A react-animations Library használata

Egy másik módja annak, hogy animációkat adjunk a React összetevőihez, egy könyvtár, például a react-animációk használata. Ez a könyvtár előre meghatározott animációk készletét tartalmazza, amelyeket a React összetevőiben használhat.

React-animációk használatához először telepítenie kell a könyvtárat:

npm telepítés react-animációk --megment

Ezenkívül telepítenie kell az Aphrodite-t, amely a reakció-animációk függősége:

npm telepítés Afrodité --megment

Miután telepítette a könyvtárakat, importálhatja a használni kívánt animációkat:

import { fadeIn, fadeOut } tól től „react-animációk”;

Ezután használhatja az animációkat az összetevőkben:

import React, { Component } tól től 'reagál';
import { Stíluslap, css } tól től 'Afrodité';
import { fadeIn, fadeOut } tól től „react-animációk”;
const styles = StyleSheet.create({
 fadeIn: {
 animációnév: fadeIn,
 animációIdőtartam: '2s'
 },
 elájulni: {
 animationName: fadeOut,
 animációIdőtartam: '2s'
 }
});
osztályFadeInOutkiterjedÖsszetevő{
konstruktőr(kellékek) {
szuper(kellékek);
ez.state = {
 látható: hamis
 };
 }
Vakol() {
const osztálynév = ez.state.isVissible? css (styles.fadeIn): css (styles.fadeOut);
Visszatérés (
<div>
<div className={className}>
 Helló Világ!
</div>
<gomb onClick={this.toggleVisibility}>
 Váltás
</button>
</div>
 );
 }
toggleVisibility = () => {
ez.setState (prevState => ({
látható: !prevState.Látható
 }));
 }
}
exportalapértelmezett FadeInOut;

Ez a példa a fadeIn és fadeOut animációk importálásával kezdődik a react-animations könyvtárból. Ezután meghatároz egy stílusobjektumot a fadeIn és fadeOut animációkkal, valamint az animationDuration értékét két másodpercre állítva.

A gomb átkapcsolja az összetevő láthatóságát. Amikor valaki rákattint, az isVisible állapotváltozó frissül, és az összetevő az aktuális állapotától függően be- vagy elhalványul.

3. módszer: A react-simple-animate Library használata

A react-simple-animate könyvtár egyszerű módot kínál animációk hozzáadására a React összetevőihez. Egy deklaratív API-t kínál, amely megkönnyíti az összetett animációk meghatározását.

A könyvtár használatához először telepítenie kell:

npm telepítés reagálni-egyszerű-animate --megment

Ezután felhasználhatja az összetevőiben:

import React, { Component } tól től 'reagál';
import { Animate, AnimateKeyframes} tól től "react-simple-animate";
osztályAppkiterjedÖsszetevő{
 Vakol() {
Visszatérés (
<div>
<Élő
 játék
Rajt={{
 átlátszatlanság: 0
 }}
vége={{
 átlátszatlanság: 1
 }}
>
<div>
 Helló Világ!
</div>
</Animate>
<AnimateKeyframes
 játék
 időtartam={2}
 keyframes={[
 { átlátszatlanság: 0, transzformáció: 'lefordítaniX(-100px)' },
 { átlátszatlanság: 1, transzformáció: 'lefordítaniX(0px)' }
 ]}
>
<div>
 Helló Világ!
</div>
</AnimateKeyframes>
</div>
 );
 }
}
exportalapértelmezett App;

A Élő komponens elhalványul a div elemben. 0-val kezdődik és 1-es átlátszatlansággal végződik. A lejátszási segédlet igazra van állítva, ami az animációt automatikusan lejátssza, amikor a komponens csatlakoztatva van.

A AnimateKeyframes komponens két másodpercen keresztül animál egy div elemet. A kulcskockák tömbje határozza meg az animáció kezdő és végállapotát. Az első kulcsképkocka átlátszatlansága 0, a translateX értéke pedig -100 képpont. A második kulcsképkocka átlátszatlansága 1, a translateX értéke pedig 0 képpont.

Növelje a felhasználók elköteleződését az animációkkal

Most már ismer néhány olyan módot, amellyel animációkat használhat a React alkalmazásban. Animációkkal növelheti a felhasználók elköteleződését az alkalmazással.

Előfordulhat például, hogy animációval jutalmazhatja a felhasználót egy feladat elvégzéséért. Ez lehet valami olyan egyszerű, mint egy rövid „pörgető” animáció vagy egy összetettebb animáció, amely akkor játszódik le, amikor a felhasználó teljesít egy pályát a játékban.

A React alkalmazást ingyenesen telepítheti az interneten is olyan szolgáltatásokkal, mint a Github-oldalak vagy a Heroku.