React Native- Primi passi con le animazioni

L’utilizzo di animazioni in un’app è importante per creare un’esperienza utente migliore. Le animazioni permettono di dare vita agli oggetti e permettono, quindi, un maggior coinvolgimento dell’utente.

Un esempio

Pensiamo di voler diminuire la grandezza di un quadrato al click di un bottone.

La prima cosa che ci può venire in mente di fare è creare un componente, e grazie ad uno stato diminuisco la grandezza:

import React, { useState } from 'react';
import { StyleSheet, View, Button } from 'react-native';

const SquareResizeExample = () => {

const [scaleValue, setScaleValue] = useState(1);

return (
  <View style={styles.container}>
        <View
          style={[
            styles.square,
            {
              transform: [{ scale: scaleValue }],
            },
          ]}
         />
          <Button title={'Resize'} 
           onPress={() => setScaleValue(0.5)} />
  </View>
 );
};

export default SquareResizeExample;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  square: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
});

Il risultato è quindi questo:

Come possiamo notare, però non è il risultato che vogliamo ottenere: non c’è effettivamente un animazione che gradualmente porta il quadrato a rimpicciolirsi come nel primo video.

Bene, possiamo pensare quindi a questo punto di diminuire scaleValue di 0.1 ogni 30 millisecondi attraverso un setTimeout.

In questo modo otteniamo il risultato voluto ma ci sono dei problemi. Così facendo l’animazione viene gestita dal thread Javascript che è il thread principale che utilizza l’app (ad es. per recuperare dati dal server o per altri eventuali calcoli). Se questo thread è impegnato da altre operazioni l’animazione subirà un ritardo o potrebbe andare a scatti…. e anziché migliorare l’esperienza utente non fa altro che peggiorarla.

Animated API

Per ovviare a questo problema ci viene in aiuto un API esposta direttamente da React native, parliamo dell’ Animated API.

Grazie a questa API, infatti, possiamo eseguire le animazioni sul UI thread e le animazioni risulteranno molto più fluide.

Per utilizzare questo approccio sostituiamo lo stato che abbiamo chiamato scaleValue con un valore animato inizializzato al valore che desideriamo ( nel nostro caso il valore iniziale dello scale è 1) e lo avvolgiamo con un useRef in modo che venga creato una sola volta. Modifichiamo poi la View del quadrato con un componente in grado di gestire il nostro valore animato, cioè Animated.View :

import React, { useRef } from 'react';
import { StyleSheet, View, Button, Animated } from 'react-native';

const SquareResizeExample = () => {

const animatedScaleValue = useRef(new Animated.Value(1)).current;


return (
  <View style={styles.container}>
        <Animated.View
          style={[
            styles.square,
            {
              transform: [{ scale: animatedScaleValue }],
            },
          ]}
         />
          <Button title={'Resize'} 
           onPress={() => {}} />
  </View>
 );
};

export default SquareResizeExample;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  square: {
    width: 100,
    height: 100,
    backgroundColor: 'red',
  },
});

A questo punto dobbiamo scrivere una funzione che venga chiamata al click del bottone che modifica il valore di animatedScaleValue in maniera graduale in un lasso di tempo. Con Animated è un gioco da ragazzi grazie alla funzione fornita Animated.timing:

const resizeSquare = () => {
    Animated.timing(animatedValue, {
      toValue: 0.5,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

Invocando questa funzione, il nostro valore animato passerà da 1 (il valore iniziale che gli abbiamo assegnato) a 0.5 in maniera graduale in 1000 millisecondi e sarà eseguito sull’ UI thread (useNativeDriver: true).

Conclusioni

In questo breve articolo abbiamo un esempio molto basilare di animazione in React Native, abbiamo visto come grazie alla libreria Animated possiamo animare una View. Ovviamente ci sono molte altre peculiarità e potenzialità di questa libreria.