Naučte se animovat své komponenty v React Native jednoduchým a lepším způsobem.

Animace mohou vdechnout život aplikaci, díky čemuž je pro uživatele poutavější a intuitivnější. Pokud ale s animacemi React Native začínáte, může být začátek trochu skličující.

Prozkoumejte animace React Native a zjistěte, jak můžete začít vytvářet krásné, plynulé animace.

Jak fungují základní animace React Native?

Animace mohou vytvářet plynulé přechody mezi různými obrazovkami nebo prvky. Mohou zvýraznit informace nebo poskytnout zpětnou vazbu na akce uživatele. Animace mohou být jednoduché nebo složité a mohou využívat různé techniky, jako je 2D nebo 3D pohyblivá grafika.

Díky přenositelnosti React Native se vyplatí používat pokud cílíte na několik platforem. Jednou z jeho nejsilnějších vlastností je schopnost vytvářet krásné animace pro mobilní aplikace.

Objekt React Native můžete animovat jednoduše změnou stavu polohy požadované komponenty.

Například:

import Reagovat, { useState, useEffect } z'reagovat';
import





instagram viewer

 { View, Style Sheet } z'react-native';
konst Aplikace = () => {
// Inicializace stavu pro sledování polohy boxu
konst [boxPosition, setBoxPosition] = useState(0);


// Pomocí háčku useEffect aktualizujte polohu rámečku každou 1 sekundu
 useEffect(() => {
konst interval = setInterval(() => {
// Aktualizace pozice boxu přidáním 10 k aktuální pozici
 setBoxPosition(prevPosition => předchozí pozice + 10);
 }, 1000);


// Vrátí funkci čištění pro vymazání intervalu, kdy komponenta
// odpojí
vrátit se() => clearInterval (interval);
 }, []);


// Nastavte pozici boxu pomocí stavové proměnné ve stylu inline
konst boxStyle = {
 přeměnit: [{ přeložitY: boxPosition }]
 };


vrátit se (


 </View>
 );
};


konst styly = StyleSheet.create({
 kontejner: {
 flex: 1,
 alignItems: 'centrum',
 justifyContent: 'centrum',
 },
 box: {
 šířka: 100,
 výška: 100,
 barva pozadí: 'modrý',
 },
});
vývoznívýchozí Aplikace;

Tento kód vykreslí modrý rámeček, který se každou sekundu pohybuje dolů. Animace funguje pomocí useEffect háček pro vytvoření časovače, který aktualizuje boxPosition stavová proměnná každou 1 sekundu.

I když to může v některých situacích fungovat, není to nejlepší volba. Aktualizace stavu v React Native fungují asynchronně, ale animace spoléhají na správné fungování synchronních aktualizací stavu. Asynchronní implementace animace způsobí, že se aktualizace stavu okamžitě neprojeví ve vykresleném výstupu komponenty, což zkazí načasování vašich animací.

Je to několik knihoven animací, jako je např Animovaný knihovna, reagent-native-reanimated, a reaktivní-nativní-animovatelné pro vytváření výkonných animací v React Native. Každá z těchto knihoven animací překonává problém asynchronních aktualizací stavu a je naprosto ideální.

React Native Animated API

Animated je API, které poskytuje React Native. Můžete jej použít k vytvoření plynulých animací, které reagují na interakce uživatele nebo změny stavu.

Animated API vám umožňuje vytvářet animované hodnoty, které můžete interpolovat a mapovat na různé vlastnosti stylu vašich komponent. Tyto hodnoty pak můžete v průběhu času aktualizovat pomocí různých animačních metod. Styly vašich komponent se pak aktualizují se změnou animovaných hodnot, což povede k plynulým animacím.

Animated funguje opravdu dobře se systémem rozložení React Native. Díky tomu budou vaše animace správně integrovány se zbytkem uživatelského rozhraní pro ještě lepší vzhled.

Chcete-li začít používat Animated ve svém projektu React Native, musíte importovat soubor Animovaný modul z ‚reaktivní' do vašeho kódu:

import { Animované } z'react-native';

Po importu Animated můžete začít vytvářet animace. Chcete-li to provést, nejprve vytvořte animovanou hodnotu, se kterou budete v průběhu animace manipulovat:

konst animatedValue = Nový Animovaný. Hodnota(0);

The Animovaný. Hodnota je třída v React Native Animated API, která představuje měnitelnou hodnotu. Můžete ji inicializovat s počáteční hodnotou a poté ji v průběhu času aktualizovat pomocí různých metod animace poskytovaných rozhraním Animated API, jako je .načasování(), .jaro(), a .rozklad()zadáním doby trvání animace, funkce náběhu/doběhu a dalších parametrů.

Animovaná hodnota je podobná hodnotě stavu v komponentě React.

Můžete inicializovat Animovaný. Hodnota s hodnotou počátečního stavu komponenty a poté ji v průběhu času aktualizujte pomocí setState metoda.

Například máte komponentu, která má hodnotu stavu počet, která představuje, kolikrát uživatel klikl na toto tlačítko.

Můžete vytvořit Animovaný. Hodnota a inicializujte jej s hodnotou počátečního stavu počet:

konst Aplikace = () => {
konst [count, setCount] = useState(0);
konst animatedValue = Nový Animovaný. Hodnota (počet);
};

Poté, kdykoli počet aktualizace hodnoty stavu, můžete aktualizovat animovanáValue také:

konst kliknout tlačítko = () => {
 setCounter (počet + 1);
 Animated.timing (animatedValue, {
 toValue: počet + 1,
 doba trvání: 500,
 useNativeDriver: skutečný
 }).Start();
};

Tento příklad se aktualizuje animovanáValue za použití Animated.timing() vždy, když uživatel klikne na tlačítko. The animovanáValue řídí animaci a mění hodnotu během 500 milisekund.

Vztahováním se Animovaný. Hodnota na hodnotu stavu tímto způsobem můžete vytvářet animace, které reagují na změny stavu vaší komponenty.

Nyní rozumíte tomu, jak manipulovat s animovanou hodnotou, můžete pokračovat v interpolaci animované hodnoty a mapování na vlastnost stylu vaší komponenty pomocí Animated.interpolate() metoda.

Například:

konst opacity = animatedValue.interpolate({
 vstupní rozsah: [0, 1],
 výstupní rozsah: [0, 1]
});
vrátit se (

 {/* obsah vaší komponenty */}
 </View>
);

Tím se vytvoří animace, která postupně slábne Pohled složka, když se animovaná hodnota změní z 0 na 1.

Pochopení typů animací

Pochopení typů animací a jejich fungování je důležité pro vytváření dobrých animací.

Za použití použijte NativeDriver možnost s Animovaným zlepšuje výkon. Tato možnost vám umožňuje přesunout animace do nativního vlákna uživatelského rozhraní. Může výrazně zlepšit výkon snížením množství potřebného zpracování JavaScriptu.

Ne všechny typy animací však podporují nativní ovladač. Pokus o použití nativního ovladače s animacemi, které zahrnují změny barev nebo rozvržení, může způsobit neočekávané chování.

Kromě toho mohou animace zahrnující složité sekvence způsobit značné problémy s výkonem na zařízeních s omezeným výpočetním výkonem nebo pamětí. Tyto výkonnostní deficity mohou být také patrné, pokud váš projekt React Native běží na nižší verzi, která ne podporovat motor Hermes.

Pochopení silných stránek a omezení různých typů animací vám může pomoci vybrat správný přístup pro váš případ použití.

Získejte pohodlí s React Native animacemi

Animace jsou mocným nástrojem pro vytváření poutavých a dynamických uživatelských rozhraní v aplikacích React Native. Animated API poskytuje flexibilní a výkonný způsob, jak vytvářet jednoduché i složité sekvenční animace.

Přesto je důležité zvážit dopad animací na výkon a zvolit vhodný přístup a knihovnu, kterou pro vaši situaci použijete.