Come creare migliori animazioni native React

Le app mobili utilizzano spesso l'animazione per ravvivare l'esperienza dell'utente. Ma creare animazioni di alta qualità può essere una sfida.

Fortunatamente, ci sono concetti e tecniche che puoi usare per migliorare le tue capacità di animazione. Puoi quindi applicarli per creare animazioni migliori e più fluide per la tua prossima applicazione mobile React Native.

Reagisci alle animazioni native

IL Reagisci nativo animato library è il modo più popolare per creare animazioni in un'app React Native.

Proprio come Libreria di animazioni integrata di React, l'API Animated fa parte della libreria Animated basata su JavaScript. Animated fornisce una serie di classi e metodi che consentono di creare animazioni fluide e fluide. Ci sono molte altre fantastiche opzioni per creare animazioni React Native, come Reanimated.

Tuttavia, creare buone animazioni in React Native non significa solo utilizzare la libreria giusta o impostare le proprietà giuste. Si tratta anche di comprendere i principi dell'animazione e come applicarli nel contesto dello sviluppo di app mobili. Quindi ecco alcuni principi chiave da comprendere e notare durante la creazione delle animazioni.

Regolazione della durata dell'animazione

Le animazioni dovrebbero essere fluide e naturali per un utente. Il raggiungimento di questo obiettivo può dipendere da come gestisci la durata di particolari animazioni che crei.

La durata si riferisce alla quantità di tempo necessaria per l'esecuzione completa di un'animazione. Per impostazione predefinita, le animazioni in React Native hanno una durata di 500 millisecondi ma puoi regolarle per andare più veloci o più lente.

Dovresti regolare la durata dell'animazione in base alla sua complessità. Un'animazione semplice, come una dissolvenza in apertura, potrebbe richiedere solo una breve durata, mentre un'animazione più complessa, come una diapositiva con effetto di rimbalzo, potrebbe richiedere una durata maggiore per risultare naturale e fluida.

Con il Animation.timing() metodo, puoi creare un'animazione a tempo personalizzata per soddisfare le tue esigenze.

Ecco un esempio di come aggiungere una durata personalizzata a una semplice animazione di dissolvenza in apertura:

importare Reagisci, { useRef } da'reagire';
importare { Animato, Visualizza } da'nativo di reazione';
cost Vista in dissolvenza = (oggetti di scena) => {
cost dissolvenzaAnim = useRef(nuovo Animato. Valore(0)).attuale; 
 React.useEffect(() => {
 Animated.timing(
 dissolvenzaAnim,
 {
 aValore: 1,
 durata: 2000, // imposta la durata personalizzata
 usaNativeDriver: VERO,
 }
 ).inizio();
 }, [fadeAnim]);
ritorno (
 stile={{
 ...props.style,
 opacità: fadeAnim,
 }}
 >
 {props.bambini}
 </Animated.View>
 );
}
esportarepredefinitofunzioneApp() {
ritorno (
flettere: 1, alignItems: 'centro', justifyContent: 'centro'}}>
larghezza: 250, altezza: 50, colore di sfondo: 'blu polvere'}}>
dimensione del font: 28, textAlign: 'centro', margine: 10}}>Dissolvenza In</Text>
 </FadeInView>
 </View>
 );
}

Quando scegli una durata per la tua animazione, è importante trovare il giusto equilibrio tra velocità e fluidità.

Prova a iniziare con una durata più lunga quando stai sperimentando per la prima volta. Una durata più lunga ti darà più tempo per regolare la funzione di andamento e perfezionare la tua animazione. Puoi sempre accorciare la durata in un secondo momento una volta che sei soddisfatto dell'effetto complessivo.

Usa le funzioni di facilitazione

Le animazioni semplici possono avere una velocità costante, ma variare la velocità può creare effetti più naturali. Le funzioni di easing controllano la velocità di modifica di un'animazione nel tempo. Possono far sì che le tue animazioni inizino lentamente, quindi accelerino. L'impostazione di velocità diverse man mano che l'animazione procede può creare un'animazione fluida e coinvolgente.

Prendi questo esempio di utilizzo di una funzione di andamento:

importare Reagisci, { useRef } da'reagire';
importare { Animato, Visualizza } da'nativo di reazione';
cost Vista in dissolvenza = (oggetti di scena) => {
cost dissolvenzaAnim = useRef(nuovo Animato. Valore(0)).attuale; 
 React.useEffect(() => {
 Animated.timing(
 dissolvenzaAnim,
 {
 aValore: 1,
 durata: 2000,
 easing: Animated.easeOut, // usa la funzione di andamento qui
 usaNativeDriver: VERO,
 }
 ).inizio();
 }, [fadeAnim]);
ritorno (
 stile={{
 ...props.style,
 opacità: fadeAnim,
 }}
 >
 {props.bambini}
 </Animated.View>
 );
}
esportarepredefinitofunzioneApp() {
ritorno (
flettere: 1, alignItems: 'centro', justifyContent: 'centro'}}>
larghezza: 250, altezza: 50, colore di sfondo: 'blu polvere'}}>
dimensione del font: 28, textAlign: 'centro', margine: 10}}>Dissolvenza in apertura</Text>
 </FadeInView>
 </View>
 );
}

Questo codice utilizza il Animated.easeOut funzione per controllare il tasso di variazione dell'opacità di un animato Visualizzazione. IL Animated.timing() Il metodo utilizzerà la funzione di riduzione graduale per modificare gradualmente l'opacità da 0 a 1 per una durata di due secondi, per far sembrare che l'animazione rallenti quando raggiunge la fine.

Puoi utilizzare diversi tipi di funzioni di andamento per rendere le tue animazioni più fluide, tra cui l'easy-in, l'easy-out e l'easy-in-out.

La scelta della giusta funzione di andamento può fare una grande differenza nella qualità percepita delle animazioni della tua applicazione. Vale la pena prendersi del tempo per giocare con loro e vedere cosa funziona meglio per i tuoi casi d'uso specifici.

I fotogrammi chiave aiutano con animazioni complesse

I fotogrammi chiave sono indicatori che ti consentono di individuare i momenti dell'animazione in cui desideri apportare modifiche a proprietà come posizione, scala o rotazione. È come segnare punti nel tempo per guidare l'animazione.

Puoi usare un set di fotogrammi chiave per impostare valori specifici per qualsiasi proprietà vuoi animare. Questo ti aiuta a controllare i tempi e il comportamento, specialmente per animazioni complesse come quelle che coinvolgono il movimento dei personaggi.

Per creare un'animazione di fotogrammi chiave di base, dovrai specificare i fotogrammi chiave tra i quali vuoi animare e la durata totale.

Ad esempio, supponiamo di voler animare un quadrato da una posizione iniziale di (0, 0) a una posizione finale di (100, 100) per un periodo di un secondo.

Puoi creare un array di fotogrammi chiave come questo:

cost fotogrammi chiave = [
 { X: 0, si: 0 },
 { X: 50, si: 50 },
 { X: 100, si: 100 },
];

In questo caso, ci sono tre fotogrammi chiave: uno all'inizio dell'animazione, uno al centro e uno alla fine. Puoi quindi passare questo array di fotogrammi chiave alla tua libreria di animazioni, insieme a una durata di 1.000 millisecondi, per creare un'animazione fluida tra i fotogrammi chiave.

In alcune librerie, dovrai anche specificare una funzione di interpolazione per controllare l'avanzamento dell'animazione. Tuttavia, puoi applicare l'idea di base di specificare i fotogrammi chiave e la durata alla maggior parte delle librerie di animazione.

Approfitta del dispositivo con l'accelerazione hardware

L'accelerazione hardware può essere un potente strumento per ottimizzare le prestazioni delle tue animazioni React Native. Sfruttando l'hardware grafico del dispositivo, puoi scaricare parte del lavoro di elaborazione dalla CPU e, a sua volta, ottenere animazioni più fluide e reattive.

La GPU del dispositivo elaborerà quindi in modo nativo i valori e gli stili animati, anziché il thread JavaScript che deve farlo.

L'accelerazione hardware potrebbe non essere disponibile su tutti i dispositivi, quindi è importante testare le tue animazioni su una varietà di dispositivi reali per garantire le migliori prestazioni.