Tanulja meg, hogyan animálhatja az összetevőit a React Native alkalmazásban az egyszerű és jobb módon.

Az animációk életet lehelhetnek egy alkalmazásba, vonzóbbá és intuitívabbá téve azt a felhasználó számára. De ha még nem ismeri a React Native animációkat, a kezdés kissé ijesztő lehet.

Fedezze fel a React Native animációkat, és megtudja, hogyan kezdhet el gyönyörű, sima animációkat készíteni.

Hogyan működnek a Basic React natív animációk?

Az animációk zökkenőmentes átmeneteket hozhatnak létre a különböző képernyők vagy elemek között. Kiemelhetik az információkat, vagy visszajelzést adhatnak a felhasználói műveletekről. Az animációk lehetnek egyszerűek vagy összetettek, és különféle technikákat használhatnak, például 2D vagy 3D mozgógrafikát.

A React Native hordozhatósága miatt érdemes használni ha több platformot céloz meg. Az egyik legerősebb tulajdonsága, hogy gyönyörű animációkat készíthet mobilalkalmazásokhoz.

A React Native objektumot egyszerűen a kívánt komponens pozícióállapotának megváltoztatásával animálhatja.

instagram viewer

Például:

import React, { useState, useEffect } tól től'reagál';
import { Nézet, stíluslap } tól től"react-native";
const App = () => {
// Állapot inicializálása a doboz pozíciójának követéséhez
const [boxPosition, setBoxPosition] = useState(0);


// A useEffect hook segítségével 1 másodpercenként frissítheti a doboz pozícióját
 useEffect(() => {
const interval = setInterval(() => {
// Frissítse a doboz pozícióját 10 hozzáadásával az aktuális pozícióhoz
 setBoxPosition(prevPosition => prevPosition + 10);
 }, 1000);


// Tisztítási függvény visszaadása az intervallum törléséhez, amikor az összetevő
// lecsatol
Visszatérés() => clearInterval (intervallum);
 }, []);


// Állítsa be a doboz pozícióját az állapotváltozó segítségével a soron belüli stílusban
const boxStyle = {
 transzformáció: [{ lefordítaniY: boxPosition }]
 };


Visszatérés (


 </View>
 );
};


const styles = StyleSheet.create({
 konténer: {
 Flex: 1,
 alignItems: 'központ',
 justifyContent: 'központ',
 },
 doboz: {
 szélesség: 100,
 magasság: 100,
 háttérszín: 'kék',
 },
});
exportalapértelmezett App;

Ez a kód egy kék mezőt jelenít meg, amely másodpercenként lefelé mozog. Az animáció a useEffect horog egy időzítő létrehozásához, amely frissíti a boxPosition állapotváltozó 1 másodpercenként.

Bár ez bizonyos helyzetekben működhet, nem ez a legjobb megoldás. A React Native állapotfrissítései aszinkron módon működnek, de az animációk a szinkron állapotfrissítésekre támaszkodnak a megfelelő működéshez. Az animáció aszinkron megvalósítása azt eredményezi, hogy az állapotfrissítések nem jelennek meg azonnal az összetevő renderelt kimenetében, ami összezavarja az animációk időzítését.

Ezek több animációs könyvtár, mint a Élénk könyvtár, react-native-reanimált, és reagál-natív-animálható a React Native-ben előadó animációk készítéséhez. Ezen animációs könyvtárak mindegyike összeomlik az aszinkron állapotfrissítések problémáját, és tökéletesen ideális.

A React Native Animated API

Az Animated egy olyan API, amelyet a React Native biztosít. Segítségével sima animációkat hozhat létre, amelyek reagálnak a felhasználói interakciókra vagy az állapotváltozásokra.

Az animált API lehetővé teszi animált értékek létrehozását, amelyeket interpolálhat és leképezhet az összetevők különböző stílustulajdonságaira. Ezeket az értékeket idővel frissítheti különböző animációs módszerekkel. Az összetevők stílusa az animált értékek változásával frissül, ami egyenletes animációt eredményez.

Az animáció nagyon jól működik a React Native elrendezési rendszerével. Emiatt az animációi megfelelően integrálva lesznek a felhasználói felület többi részével a még jobb megjelenés érdekében.

Az Animated használatának megkezdéséhez a React Native projektben importálnia kell a Élénk modul innen: "react-native” a kódodba:

import { Animált } tól től"react-native";

Az animált importálással megkezdheti az animációk létrehozását. Ehhez először hozzon létre egy animált értéket, amelyet az animáció során manipulálni fog:

const animatedValue = új Élénk. Érték(0);

A Élénk. Érték egy osztály a React Native Animated API-ban, amely változó értéket képvisel. Inicializálhatja egy kezdeti értékkel, majd idővel frissítheti az Animated API által biztosított különféle animációs módszerekkel, például .időzítés(), .tavaszi(), és .hanyatlás(), az animáció időtartamának, könnyítési funkciójának és egyéb paramétereinek megadásával.

Az animált érték hasonló a React komponens állapotértékéhez.

Inicializálhat egy Élénk. Érték egy összetevő kezdeti állapotértékével, majd idővel frissítse a segítségével setState módszer.

Például van egy összetevője, amelynek állapotértéke van számol, amely azt jelzi, hogy a felhasználó hányszor kattintott az adott gombra.

Létrehozhat egy Élénk. Érték és inicializálja a kezdeti állapot értékével számol:

const App = () => {
const [count, setCount] = useState(0);
const animatedValue = új Élénk. Érték (szám);
};

Aztán, amikor a számol állapotérték frissítéseket, frissítheti animatedValue is:

const handlebuttonClick = () => {
 setCounter (számláló + 1);
 Animated.timing (animatedValue, {
 toValue: count + 1,
 időtartam: 500,
 useNativeDriver: igaz
 }).Rajt();
};

Ez a példa frissül animatedValue használni a Animated.timing() módszert, amikor a felhasználó rákattint a gombra. A animatedValue mozgatja az animációt, és 500 ezredmásodperc alatt megváltoztatja az értéket.

Kapcsolattartással Élénk. Érték állapotértékre ilyen módon létrehozhat animációkat, amelyek reagálnak az összetevő állapotának változásaira.

Most már megértette, hogyan kell manipulálni egy animált értéket, majd továbbléphet az animált érték interpolálásához, és leképezheti az összetevő egy stílustulajdonságára a Animált.interpolate() módszer.

Például:

const opacity = animatedValue.interpolate({
 inputRange: [0, 1],
 kimeneti tartomány: [0, 1]
});
Visszatérés (

 {/* az összetevő tartalma */}
 </View>
);

Ez egy animációt hoz létre, amely fokozatosan elhalványul Kilátás összetevőt, ahogy az animált érték 0-ról 1-re változik.

Az animációs típusok megértése

Az animációtípusok és működésük megértése fontos a jó animációk elkészítéséhez.

Használni a useNativeDriver Az Animált opció javítja a teljesítményt. Ez a beállítás lehetővé teszi, hogy az animációkat a natív felhasználói felületre töltse át. Jelentősen javíthatja a teljesítményt a szükséges JavaScript-feldolgozás mennyiségének csökkentésével.

Azonban nem minden animációs típus támogatja a natív illesztőprogramot. Ha a natív illesztőprogramot olyan animációkkal próbálja használni, amelyek szín- vagy elrendezésmódosítással járnak, az váratlan viselkedést okozhat.

Ezenkívül az összetett szekvenciákat tartalmazó animációk jelentős teljesítményproblémákat okozhatnak a korlátozott feldolgozási teljesítménnyel vagy memóriával rendelkező eszközökön. Ezek a teljesítménybeli hiányosságok akkor is figyelemre méltóak lehetnek, ha a React Native projekt egy alacsonyabb verziót futtat, amely nem támogatja a Hermes motort.

A különböző animációs típusok erősségeinek és korlátainak megértése segíthet kiválasztani a felhasználási esetnek megfelelő megközelítést.

Érezd magad kényelembe a React natív animációkkal

Az animációk hatékony eszközt jelentenek vonzó és dinamikus felhasználói felületek létrehozásához a React Native alkalmazásokban. Az animált API rugalmas és hatékony módot kínál egyszerű és összetett sorozatanimációk létrehozására.

Ennek ellenére fontos figyelembe venni az animációk teljesítményre gyakorolt ​​hatását, és kiválasztani a helyzetnek megfelelő megközelítést és könyvtárat.