Emelje új szintre animációs játékát ezzel a React Native könyvtárral.
A mobilalkalmazások gyakran használnak animációt a felhasználói élmény élénkítésére. A kiváló minőségű animációk létrehozása azonban kihívást jelenthet.
Szerencsére vannak olyan koncepciók és technikák, amelyek segítségével fejlesztheti animációs készségeit. Ezután alkalmazhatja őket, hogy jobb, simább animációkat készítsen a következő React Native mobilalkalmazásához.
React natív animációk
A React Native Animated könyvtár a legnépszerűbb módja az animációk létrehozásának a React Native alkalmazásban.
Akárcsak A React beépített animációs könyvtára, az Animated API a JavaScript alapú animált könyvtár része. Az Animated olyan osztályokat és módszereket kínál, amelyek segítségével sima és gördülékeny animációkat hozhat létre. Számos más nagyszerű lehetőség is van a React Native animációk létrehozására, például a Reanimated.
A jó animációk létrehozása a React Native programban azonban nem csak a megfelelő könyvtár használatából vagy a megfelelő tulajdonságok beállításából áll. Arról is szól, hogy megértsük az animáció alapelveit, és hogyan alkalmazzuk azokat a mobilalkalmazások fejlesztése során. Íme tehát néhány kulcsfontosságú alapelv, amelyeket érdemes megérteni és figyelembe venni az animációk készítésekor.
Az animáció időtartamának beállítása
Az animációknak simának és természetesnek kell lenniük a felhasználó számára. Ennek elérése attól függhet, hogyan kezeli az Ön által létrehozott animációk időtartamát.
Az időtartam az animáció teljes futtatásához szükséges időt jelenti. Alapértelmezés szerint a React Native animációinak időtartama 500 ezredmásodperc, de beállíthatja, hogy gyorsabban vagy lassabbak legyenek.
Az animáció időtartamát a bonyolultságának megfelelően kell beállítani. Előfordulhat, hogy egy egyszerű animációnak, például egy beúsztatásnak csak rövid időtartamra van szüksége, míg egy összetettebb animációnak, például egy ugráló hatású becsúszásnak hosszabb ideig kell tartania, hogy természetes és simán érezze magát.
A... val Animation.timing() módszerrel egyéni időzített animációt hozhat létre az igényeinek megfelelően.
Íme egy példa arra, hogyan adjunk egyéni időtartamot egy egyszerű beúsztató animációhoz:
import React, { useRef } tól től'reagál';
import { Animált, Nézet } tól től"react-native";const FadeInView = (kellékek) => {
const fadeAnim = useRef(új Élénk. Érték(0)).jelenlegi;React.useEffect(() => {
Animated.timing(
fadeAnim,
{
értékel: 1,
időtartam: 2000, // egyéni időtartam beállítása
useNativeDriver: igaz,
}
).Rajt();
}, [fadeAnim]);Visszatérés (
style={{
...props.style,
átlátszatlanság: fadeAnim,
}}
>
{props.children}
</Animated.View>
);
}
exportalapértelmezettfunkcióApp() {
Visszatérés (Flex: 1, alignItems: 'központ', justifyContent: 'központ'}}> szélesség: 250, magasság: 50, háttérszín: 'kobalt kék'}}> betűméret: 28, szöveg igazítás: 'központ', árrés: 10}}>Elhalványulás ban ben</Text>
</FadeInView>
</View>
);
}
Az animáció időtartamának kiválasztásakor fontos megtalálni a megfelelő egyensúlyt a sebesség és a simaság között.
Próbáljon hosszabb időtartammal kezdeni, amikor először kísérletezik. A hosszabb időtartam több időt biztosít az könnyítés funkció beállítására és az animáció finomítására. Később bármikor lerövidítheti az időtartamot, ha elégedett az összhatással.
Használjon könnyítő funkciókat
Az egyszerű animációk állandó sebességűek lehetnek, de a sebesség változtatásával természetesebb hatások jöhetnek létre. A könnyítő funkciók szabályozzák az animáció időbeli változásának sebességét. Lassan indíthatják el az animációit, majd felgyorsíthatják. Az animáció előrehaladtával különböző sebességek beállítása sima és vonzó animációt eredményezhet.
Vegyük ezt a példát a könnyítő függvény használatára:
import React, { useRef } tól től'reagál';
import { Animált, Nézet } tól től"react-native";const FadeInView = (kellékek) => {
const fadeAnim = useRef(új Élénk. Érték(0)).jelenlegi;React.useEffect(() => {
Animated.timing(
fadeAnim,
{
értékel: 1,
időtartam: 2000,
könnyítés: Animated.easeOut, // itt használd az könnyítés funkciót
useNativeDriver: igaz,
}
).Rajt();
}, [fadeAnim]);Visszatérés (
style={{
...props.style,
átlátszatlanság: fadeAnim,
}}
>
{props.children}
</Animated.View>
);
}
exportalapértelmezettfunkcióApp() {
Visszatérés (Flex: 1, alignItems: 'központ', justifyContent: 'központ'}}> szélesség: 250, magasság: 50, háttérszín: 'kobalt kék'}}> betűméret: 28, szöveg igazítás: 'központ', árrés: 10}}>Elhalványul</Text>
</FadeInView>
</View>
);
}
Ez a kód a Animált.easeOut funkció az animáció átlátszatlanságának változási sebességének szabályozására Kilátás. A Animated.timing() A módszer az könnyítés funkciót fogja használni az átlátszatlanság fokozatos 0-ról 1-re történő megváltoztatására két másodperc alatt, hogy az animáció lelassuljon, ahogy a végéhez ér.
Különböző típusú könnyítési funkciókat használhat, hogy az animációkat simábban nézzenek ki, beleértve az egyszerűsítést, a kikönnyítést és a könnyű behajtást.
A megfelelő könnyítési funkció kiválasztása nagy változást hozhat az alkalmazás animációinak észlelt minőségében. Érdemes szánni egy kis időt a velük való játékra, és megnézni, mi a legmegfelelőbb az Ön konkrét felhasználási eseteiben.
A kulcskockák segítik az összetett animációkat
A kulcskockák olyan jelölők, amelyek segítségével meghatározhatja az animáció azon pillanatait, amelyekben módosítani kívánja a tulajdonságokat, például a pozíciót, a léptéket vagy az elforgatást. Ez olyan, mintha pontokat jelölne meg az időben, hogy irányítsa az animációt.
Használhat egy készletet kulcskockákat, hogy konkrét értékeket állítson be bármely tulajdonsághoz animálni szeretne. Ez segít az időzítés és a viselkedés szabályozásában, különösen az olyan összetett animációk esetében, mint például a karaktermozgások.
Alapvető kulcskép-animáció létrehozásához meg kell adnia az animálni kívánt kulcskockákat és a teljes időtartamot.
Tegyük fel például, hogy egy négyzetet a (0, 0) kezdőpontból a (100, 100) véghelyzetbe szeretne animálni egy másodperc alatt.
Létrehozhat kulcskockák tömbjét az alábbiak szerint:
const kulcskockák = [
{ x: 0, y: 0 },
{ x: 50, y: 50 },
{ x: 100, y: 100 },
];
Ebben az esetben három kulcsképkocka van: egy az animáció elején, egy a közepén és egy a végén. Ezt a kulcskockát az 1000 ezredmásodperces időtartammal együtt átadhatja animációs könyvtárának, hogy egyenletes animációt hozzon létre a kulcskockák között.
Egyes könyvtárakban egy könnyítési funkciót is meg kell adnia az animáció előrehaladásának szabályozásához. A legtöbb animációs könyvtárra azonban alkalmazhatja a kulcskockák és az időtartam megadásának alapötletét.
Használja ki az eszköz előnyeit a hardveres gyorsítással
A hardveres gyorsítás hatékony eszköz lehet a React Native animációk teljesítményének optimalizálására. Az eszköz grafikus hardverének kihasználásával a feldolgozási munka egy részét leterhelheti a CPU-ról, és ezáltal simább, jobban reagáló animációkat érhet el.
Az eszköz GPU-ja ezután natív módon feldolgozza az animált értékeket és stílusokat, nem pedig a JavaScript-szálnak.
Előfordulhat, hogy a hardveres gyorsítás nem érhető el minden eszközön, ezért fontos, hogy az animációkat különféle valódi eszközökön tesztelje a legjobb teljesítmény biztosítása érdekében.