O funcionamento das animações em React Native

Uma animação é basicamente qualquer ação visual que um elemento de uma tela toma após alguma determinada condição ser atendida, exemplos seriam: o aparecimento e desaparecimento (fade in e fade out) de elementos como botões após serem clicados, a ação de uma tela “subir” após o aperto de um botão, um campo de texto “chacoalhar” se você não o preencher para indicar a necessidade de fazê-lo, entre outras coisas.

Para esse tipo de necessidade, existe um recurso no React Native chamado Animated, esse recurso permite a implementação de animações em elementos de uma tela com muita facilidade. Neste artigo eu darei um exemplo simples de um botão que faz um texto sumir e outro que faz o texto reaparecer, tudo de forma bem simples e sem adicionar estilo para facilitar o entendimento.

Primeiramente, se escreve as funções e define as características da animação:

const fadeAnim = useRef(new Animated.Value(0)).current;
const fadeIn = () => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 5000
    }).start();
  };
  const fadeOut = () => {
    Animated.timing(fadeAnim, {
      toValue: 0,
      duration: 5000
    }).start();
  };

Primeiro estamos definindo um estado inicial para a animação na primeira linha por colocar o valor como 0. Depois estamos definindo, por meio de cada função, que o estado da animação sera mudado (para 1 na função “fadeiIn” e para 0 na função “fadeOut”) com o tempo (5000 milissegundos ou 5 segundos).

  return (
    <View>
      <Animated.View style={{opacity: fadeAnim}}>
        <Text>Texto de Exemplo</Text>
      </Animated.View>
      <View>
        <Button title="Fade In" onPress={fadeIn} />
        <Button title="Fade Out" onPress={fadeOut} />
      </View>
    </View>
  );

No bloco acima nós estamos definindo que um texto será afetado pela animação e estamos criando dois botões: Fade In e Fade Out. o botão Fade In faz o testo aparecer pois está ligado à função “fadeIn” que tem esse objetivo enquanto o botão Fade Out faz o texto desaparecer por estar ligado à função “fadeOut”.

Com isso, nós temos dois botões bem simples que interagem com um texto simples fazendo-o aparecer e desaparecer.

Um detalhe importante é que, mesmo não sendo necessário colocar estilo nos elementos, a animação “fadeAnim” ainda é uma animação que modifica a opacidade de algo, portanto é necessário adicionar um detalhe de estilo dizendo que o que define a opacidade do elemento de texto é o recurso “fadeAnim”.