Iniziare con le animazioni in React Native

Le animazioni possono dare vita a un'app, rendendola più coinvolgente e intuitiva per l'utente. Ma se non conosci le animazioni React Native, iniziare può essere un po' scoraggiante.

Esplora le animazioni React Native e scopri come puoi iniziare a creare animazioni belle e fluide.

Come funzionano le animazioni native di React di base?

Le animazioni possono creare transizioni fluide tra diversi schermi o elementi. Possono evidenziare informazioni o fornire feedback sulle azioni dell'utente. Le animazioni possono essere semplici o complesse e possono utilizzare una varietà di tecniche, come la grafica animata 2D o 3D.

La portabilità di React Native ne vale la pena se stai prendendo di mira diverse piattaforme. Una delle sue caratteristiche più forti è la possibilità di creare bellissime animazioni per le app mobili.

Puoi animare un oggetto React Native semplicemente modificando lo stato di posizione del componente desiderato.

Per esempio:

importare Reagire, {useState, useEffect} da'reagire';
importare {Visualizza, Foglio di stile} da'nativo di reazione';
cost Applicazione = () => {
// Inizializza lo stato per tenere traccia della posizione della casella
cost [boxPosition, setBoxPosition] = useState(0);
// Utilizza l'hook useEffect per aggiornare la posizione della casella ogni 1 secondo
 usaEffetto(() => {
cost intervallo = impostaIntervallo(() => {
// Aggiorna la posizione della casella aggiungendo 10 alla posizione corrente
 setBoxPosition(prevPosition => prevPosizione + 10);
 }, 1000);
// Restituisce una funzione di pulizia per cancellare l'intervallo in cui il componente
// smonta
ritorno() => clearInterval (intervallo);
 }, []);
// Imposta la posizione della casella utilizzando la variabile di stato nello stile in linea
cost boxStyle = {
 trasforma: [{ tradurreY: boxPosition }]
 };
ritorno (


 </View>
 );
};
cost styles = StyleSheet.create({
 contenitore: {
 flettere: 1,
 alignItems: 'centro',
 giustificaContenuto: 'centro',
 },
 scatola: {
 larghezza: 100,
 altezza: 100,
 colore di sfondo: 'blu',
 },
});
esportarepredefinito Applicazione;

Questo codice esegue il rendering di una casella blu che si sposta verso il basso ogni secondo. L'animazione funziona utilizzando il useEffect hook per creare un timer che aggiorna il file boxPosition variabile di stato ogni 1 secondo.

Anche se questo può funzionare in alcune situazioni, questa non è l'opzione migliore con cui andare. Gli aggiornamenti di stato in React Native funzionano in modo asincrono, ma le animazioni si basano su aggiornamenti di stato sincroni per funzionare correttamente. L'implementazione della tua animazione in modo asincrono farà sì che gli aggiornamenti di stato non si riflettano immediatamente nell'output di rendering del componente, incasinando i tempi delle tue animazioni.

Sono diverse librerie di animazione come il Animato biblioteca, reagire-nativo-rianimato, E reagire-nativo-animabile per la creazione di animazioni performanti in React Native. Ognuna di queste librerie di animazione risolve il problema degli aggiornamenti di stato asincroni ed è perfettamente ideale.

L'API animata nativa di React

Animated è un'API fornita da React Native. Puoi usarlo per creare animazioni fluide che rispondono alle interazioni dell'utente o ai cambiamenti di stato.

L'API animata ti consente di creare valori animati che puoi interpolare e mappare a varie proprietà di stile dei tuoi componenti. È quindi possibile aggiornare questi valori nel tempo utilizzando vari metodi di animazione. Gli stili dei tuoi componenti verranno quindi aggiornati man mano che i valori animati cambiano, risultando in animazioni fluide.

Animated funziona molto bene con il sistema di layout di React Native. Per questo motivo, le tue animazioni saranno correttamente integrate con il resto della tua interfaccia utente per un aspetto ancora migliore.

Per iniziare a utilizzare Animated nel tuo progetto React Native, devi importare il file Animato modulo da 'reagire-nativo' nel tuo codice:

importare {Animato} da'nativo di reazione';

Con Animated importato, puoi iniziare a creare animazioni. Per fare ciò, prima crea un valore animato che manipolerai durante l'animazione:

cost valoreanimato = nuovo Animato. Valore(0);

IL Animato. Valore è una classe nell'API React Native Animated che rappresenta un valore mutabile. Puoi inizializzarlo con un valore iniziale e quindi aggiornarlo nel tempo utilizzando vari metodi di animazione forniti dall'API animata, come .temporizzazione(), .primavera(), E .decadimento(), specificando la durata dell'animazione, la funzione di andamento e altri parametri.

Il valore animato è simile a un valore di stato in un componente React.

Puoi inizializzare un file Animato. Valore con il valore dello stato iniziale di un componente, quindi aggiornarlo nel tempo utilizzando il file setState metodo.

Ad esempio, hai un componente che ha un valore di stato contare, che rappresenta il numero di volte in cui l'utente ha fatto clic su quel pulsante.

Puoi creare un file Animato. Valore e inizializzarlo con il valore dello stato iniziale di contare:

cost Applicazione = () => {
cost [count, setCount] = useState(0);
cost valoreanimato = nuovo Animato. Valore (conteggio);
};

Poi, ogni volta che il contare aggiornamenti del valore dello stato, è possibile aggiornare animatoValue pure:

cost handlebuttonClick = () => {
 setCounter (conta + 1);
 Animated.timing (animatedValue, {
 toValue: contare + 1,
 durata: 500,
 usaNativeDriver: VERO
 }).inizio();
};

Questo esempio viene aggiornato animatoValue usando il Animated.timing() metodo ogni volta che un utente fa clic sul pulsante. IL animatoValue guida l'animazione e cambia valore in 500 millisecondi.

Relazionandosi Animato. Valore a un valore di stato in questo modo, puoi creare animazioni che rispondono ai cambiamenti nello stato del tuo componente.

Ora che hai capito come manipolare un valore animato, puoi procedere con l'interpolazione del valore animato e mapparlo su una proprietà di stile del tuo componente utilizzando il Animated.interpolate() metodo.

Per esempio:

cost opacità = valoreanimato.interpolate({
 inputRange: [0, 1],
 outputRange: [0, 1]
});
ritorno (

 {/* il contenuto del tuo componente */}
 </View>
);

Questo creerà un'animazione che sfuma gradualmente nel file Visualizzazione componente quando il valore animato cambia da 0 a 1.

Comprensione dei tipi di animazione

Comprendere i tipi di animazione e come funzionano è importante per creare buone animazioni.

Usando il usaNativeDriver l'opzione con Animato migliora le prestazioni. Questa opzione ti consente di scaricare le animazioni nel thread dell'interfaccia utente nativa. Può migliorare significativamente le prestazioni riducendo la quantità di elaborazione JavaScript richiesta.

Tuttavia, non tutti i tipi di animazione supportano il driver nativo. Il tentativo di utilizzare il driver nativo con animazioni che comportano modifiche al colore o al layout può causare un comportamento imprevisto.

Inoltre, le animazioni che coinvolgono sequenze complesse possono causare notevoli problemi di prestazioni su dispositivi con potenza di elaborazione o memoria limitate. Questi deficit di prestazioni possono anche essere notevoli se il tuo progetto React Native esegue una versione precedente che non lo fa supportare il motore Hermes.

Comprendere i punti di forza e i limiti dei diversi tipi di animazione può aiutarti a scegliere l'approccio giusto per il tuo caso d'uso.

Mettiti comodo con le animazioni native di React

Le animazioni sono un potente strumento per creare interfacce utente accattivanti e dinamiche nelle app React Native. L'API animata fornisce un modo flessibile e performante per creare animazioni di sequenze sia semplici che complesse.

Tuttavia, è importante considerare l'impatto sulle prestazioni delle animazioni e scegliere l'approccio e la libreria appropriati da utilizzare per la situazione.