Posuňte svou animační hru na další úroveň s touto knihovnou React Native.

Mobilní aplikace často využívají animaci k oživení uživatelského zážitku. Ale vytváření vysoce kvalitních animací může být problém.

Naštěstí existují koncepty a techniky, které můžete použít ke zlepšení svých animačních dovedností. Poté je můžete použít k vytvoření lepších a plynulejších animací pro vaši další mobilní aplikaci React Native.

React Native Animations

The Reagovat Native Animated knihovna je nejoblíbenějším způsobem vytváření animací v aplikaci React Native.

Stejně jako Vestavěná knihovna animací Reactu, Animated API je součástí knihovny Animated založené na JavaScriptu. Animated poskytuje sadu tříd a metod, které umožňují vytvářet plynulé a plynulé animace. Existuje několik dalších skvělých možností pro vytváření animací React Native, jako je Reanimated.

Vytváření dobrých animací v React Native však není jen o použití správné knihovny nebo nastavení správných vlastností. Jde také o pochopení principů animace a jejich uplatnění v kontextu vývoje mobilních aplikací. Zde je tedy několik klíčových principů, kterým je třeba porozumět a dbát na to při vytváření animací.

instagram viewer

Úprava trvání animace

Animace by měly být pro uživatele plynulé a přirozené. Dosažení tohoto cíle může záviset na tom, jak zacházíte s trváním konkrétních animací, které vytváříte.

Doba trvání se týká doby, kterou animace potřebuje ke kompletnímu spuštění. Ve výchozím nastavení mají animace v React Native trvání 500 milisekund, ale můžete je upravit tak, aby byly rychlejší nebo pomalejší.

Délku animace byste měli upravit podle její složitosti. Jednoduchá animace, jako je zatmívání, může potřebovat pouze krátké trvání, zatímco složitější animace, jako je zasunutí s efektem odrazu, může trvat déle, aby působila přirozeně a plynule.

s Animation.timing() můžete vytvořit vlastní časovanou animaci, která vyhovuje vašim potřebám.

Zde je příklad, jak přidat vlastní trvání do jednoduché animace prolínání:

import Reagovat, { useRef } z'reagovat';
import { Animované, Zobrazit } z'react-native';
konst FadeInView = (rekvizity) => {
konst fadeAnim = useRef(Nový Animovaný. Hodnota(0)).aktuální; 


 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 toValue: 1,
 doba trvání: 2000, // nastavení vlastní doby trvání
 useNativeDriver: skutečný,
 }
 ).Start();
 }, [fadeAnim]);


vrátit se (
 styl={{
 ...props.style,
 neprůhlednost: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
vývoznívýchozífunkceAplikace() {
vrátit se (
flex: 1, alignItems: 'centrum', justifyContent: 'centrum'}}>
šířka: 250, výška: 50, barva pozadí: 'Modrý prášek'}}>
velikost písma: 28, zarovnání textu: 'centrum', okraj: 10}}>Blednutí v</Text>
 </FadeInView>
 </View>
 );
}

Při výběru doby trvání animace je důležité najít správnou rovnováhu mezi rychlostí a plynulostí.

Když poprvé experimentujete, zkuste začít s delší dobou trvání. Delší doba vám poskytne více času na úpravu funkce náběhu a doladění animace. Vždy můžete zkrátit dobu trvání později, jakmile budete spokojeni s celkovým efektem.

Používejte funkce uvolňování

Jednoduché animace mohou mít konstantní rychlost, ale změna rychlosti může vytvořit přirozenější efekty. Funkce usnadnění řídí rychlost změny animace v průběhu času. Mohou způsobit, že se vaše animace spustí pomalu a poté se zrychlí. Nastavení různých rychlostí v průběhu animace může vytvořit hladkou a poutavou animaci.

Vezměte si tento příklad použití funkce náběhu/doběhu:

import Reagovat, { useRef } z'reagovat';
import { Animované, Zobrazit } z'react-native';
konst FadeInView = (rekvizity) => {
konst fadeAnim = useRef(Nový Animovaný. Hodnota(0)).aktuální; 


 React.useEffect(() => {
 Animated.timing(
 fadeAnim,
 {
 toValue: 1,
 doba trvání: 2000,
 easing: Animated.easeOut, // zde použijte funkci náběhu/doběhu
 useNativeDriver: skutečný,
 }
 ).Start();
 }, [fadeAnim]);


vrátit se (
 styl={{
 ...props.style,
 neprůhlednost: fadeAnim,
 }}
 >
 {props.children}
 </Animated.View>
 );
}
vývoznívýchozífunkceAplikace() {
vrátit se (
flex: 1, alignItems: 'centrum', justifyContent: 'centrum'}}>
šířka: 250, výška: 50, barva pozadí: 'Modrý prášek'}}>
velikost písma: 28, zarovnání textu: 'centrum', okraj: 10}}>Fade In</Text>
 </FadeInView>
 </View>
 );
}

Tento kód používá Animated.easeOut funkce pro řízení rychlosti změny neprůhlednosti animace Pohled. The Animated.timing() metoda použije funkci náběhu k postupné změně krytí z 0 na 1 po dobu dvou sekund, aby se animace zdála zpomalit, když dosáhne konce.

Můžete použít různé typy funkcí náběhu/doběhu, aby vaše animace vypadaly plynuleji, včetně náběhu, náběhu a náběhu.

Výběr správné funkce náběhu/doběhu může znamenat velký rozdíl ve vnímané kvalitě animací vaší aplikace. Stojí za to si s nimi chvíli pohrát a zjistit, co funguje nejlépe pro vaše konkrétní případy použití.

Klíčové snímky pomáhají s komplexními animacemi

Klíčové snímky jsou značky, které vám umožňují určit momenty v animaci, kde chcete provést změny vlastností, jako je poloha, měřítko nebo otočení. Je to jako označovat body v čase pro vedení animace.

Můžete použít sadu klíčové snímky pro nastavení konkrétních hodnot pro jakoukoli vlastnost chcete animovat. To vám pomůže ovládat načasování a chování, zejména u složitých animací, jako jsou ty, které zahrnují pohyb postav.

Chcete-li vytvořit základní animaci klíčových snímků, budete muset určit klíčové snímky, mezi kterými chcete animovat, a celkovou dobu trvání.

Řekněme například, že chcete animovat čtverec z počáteční pozice (0, 0) do koncové pozice (100, 100) po dobu jedné sekundy.

Můžete vytvořit pole klíčových snímků takto:

konst klíčové snímky = [
 { X: 0, y: 0 },
 { X: 50, y: 50 },
 { X: 100, y: 100 },
];

V tomto případě existují tři klíčové snímky: jeden na začátku animace, jeden uprostřed a jeden na konci. Toto pole klíčových snímků pak můžete předat své knihovně animací spolu s dobou trvání 1 000 milisekund, abyste vytvořili plynulou animaci mezi klíčovými snímky.

V některých knihovnách budete také muset určit funkci náběhu/doběhu, abyste řídili průběh animace. Základní myšlenku zadání klíčových snímků a trvání však můžete aplikovat na většinu knihoven animací.

Využijte výhod zařízení s hardwarovou akcelerací

Hardwarová akcelerace může být mocným nástrojem pro optimalizaci výkonu vašich React Native animací. Využitím grafického hardwaru zařízení můžete přenést část práce na zpracování z CPU a následně dosáhnout plynulejších a citlivějších animací.

GPU zařízení pak nativně zpracuje animované hodnoty a styly, místo aby to muselo dělat vlákno JavaScriptu.

Hardwarová akcelerace nemusí být dostupná na všech zařízeních, takže je důležité otestovat své animace na různých skutečných zařízeních, abyste zajistili nejlepší výkon.