Animated API: o que é, recursos da biblioteca e princípio de funcionamento

O que é Animated API no React Native

Animated API é uma biblioteca de animação declarativa incorporada ao núcleo do React Native, projetada para criar animações suaves e de alto desempenho em aplicativos móveis. Diferente das animações CSS no desenvolvimento web, Animated API trabalha diretamente com a thread de UI nativa através da ponte JavaScript ou driver nativo. A biblioteca é construída em torno do conceito de Animated.Value — um contêiner que armazena um valor numérico e automaticamente inscreve todos os componentes dependentes nas mudanças. Quando o valor muda através de Animated.timing ou Animated.spring, a biblioteca calcula estados intermediários sem re-renderizar componentes React, o que é crítico para manter 60 FPS. Animated API suporta todas as propriedades de estilo, incluindo transform, opacity, width, height, top, left e backgroundColor. A documentação do React Native recomenda Animated API para todos os cenários de animação que exigem alto desempenho e comportamento previsível em ambas as plataformas.

Como funciona o Animated API: Value, timing e spring

A base do Animated API é o Animated.Value, um contêiner de valor numérico inicializado através do construtor new Animated.Value(0). Cada Animated.Value armazena um número inicial e fornece métodos de animação: timing, spring e decay. O método timing cria animação linear ou com easing com parâmetros de duração, atraso e easing. O método spring implementa animação física de mola com parâmetros de atrito, tensão e velocidade. O método decay cria animação com inércia e amortecimento — útil para deslizamentos e scroll. Todos os métodos retornam um objeto Animated.Composite que pode ser iniciado via start() e parado via stop(). A animação é executada em uma thread separada: quando useNativeDriver = true, os cálculos ocorrem na thread de UI nativa, deixando a thread JavaScript livre para manipulação de eventos e lógica.

Animated.timing: configuração de duração e easing

Animated.timing é o método básico de animação com duração controlada. Aceita configuração: toValue, duration (padrão 500ms), easing (Easing.linear por padrão) e delay. As funções de easing do módulo Easing permitem aceleração não linear: Easing.bezier, Easing.elastic, Easing.bounce. Para animação com velocidade uniforme use Easing.linear, para aceleração natural use Easing.inOut. Importante: Animated.timing garante que a animação terminará exatamente em toValue dentro do tempo especificado, independentemente da carga do dispositivo.

Animated.spring: animação baseada em física

Animated.spring implementa um modelo de animação de mola baseado na lei de Hooke. O parâmetro friction (atrito) controla o número de oscilações: quanto maior o atrito, mais rápida a parada. O parâmetro tension (tensão) determina a rigidez da mola: tensão alta acelera o movimento. O parâmetro velocity (velocidade) define a velocidade inicial para animação com inércia — fundamental para animações que seguem gestos do usuário. Animated.spring não tem duração fixa — a animação é concluída quando a velocidade e amplitude atingem valores limite.

Animated.View, Animated.Text e outros componentes

Animated API fornece quatro componentes animados incorporados: Animated.View, Animated.Text, Animated.ScrollView e Animated.Image. Cada um é um invólucro sobre o componente nativo correspondente que suporta passar Animated.Value para propriedades de estilo. Animated.View é o componente mais usado, aceita os mesmos props que uma View normal, mas com suporte para valores animados em style. Animated.Text é útil para animar cor do texto ou espaçamento entre letras. Animated.ScrollView permite animar scrollTo e contentOffset. Animated.Image suporta opacidade e escala animadas durante o carregamento de imagens. Se precisar animar outro componente, use Animated.createAnimatedComponent(MyComponent).

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

const FadeInView = () => {
  const opacity = useRef(new Animated.Value(0)).current;

  const fadeIn = () => {
    Animated.timing(opacity, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  return (
    View
      Animated.View { style: [{ opacity }] }
      Button title="Fade In" onPress={fadeIn}
  );
};

Sistema de interpolação: de números a cor e transformações

Interpolação é um mecanismo para converter um intervalo numérico de entrada de Animated.Value em valores de saída de outro tipo. O método interpolate aceita configuração com inputRange (matriz de valores de entrada) e outputRange (matriz de valores de saída). Tipos de outputRange: números (coordenadas, opacidade), strings (ângulos de rotação com 'deg'), cores hex ('#ff0000'), objetos de transformação. A interpolação suporta easing e extrapolate — comportamento fora do intervalo especificado (clamp, extend, identity). Por exemplo, durante um gesto de arrasto, você pode converter a posição do dedo de 0 a 200 em opacidade de 1 a 0, criando um efeito de desvanecimento ao deslizar. O sistema de interpolação permite criar animações complexas de múltiplas etapas: o valor 0-0.5-1.0 pode se converter em amarelo-laranja-vermelho.

const spinValue = new Animated.Value(0);

Animated.timing(spinValue, {
  toValue: 1,
  duration: 3000,
  easing: Easing.linear,
  useNativeDriver: true,
}).start();

const spin = spinValue.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg'],
});

Composição de animações: sequência e paralelismo

Animated API suporta três modos de composição de animações: Animated.sequence, Animated.parallel e Animated.stagger. Animated.sequence executa animações uma após a outra: cada próxima começa após a anterior terminar. Animated.parallel executa todas as animações simultaneamente com um único callback de conclusão compartilhado. Animated.stagger executa animações com um atraso entre cada início — útil para criar efeitos de onda. As composições podem ser aninhadas: sequência de grupos paralelos ou paralelo de sequências. Isso permite criar cadeias complexas: animação de aparecimento de elementos com atraso, slide-in paralelo com fade-in, depois uma sequência de bounce e shake.

Animated.sequence([
  Animated.timing(fadeAnim, {
    toValue: 1,
    duration: 500,
    useNativeDriver: true,
  }),
  Animated.parallel([
    Animated.timing(scaleAnim, {
      toValue: 1.1,
      duration: 200,
      useNativeDriver: true,
    }),
    Animated.spring(colorAnim, {
      toValue: 1,
      friction: 4,
      useNativeDriver: true,
    }),
  ]),
]).start();

useNativeDriver e desempenho de animações

useNativeDriver é uma opção de configuração de animação que move toda a lógica de animação da thread JavaScript para a thread de UI nativa. Sem useNativeDriver, as animações são executadas através da ponte JavaScript: cada mudança de valor é enviada para a thread nativa, causando atrasos quando a thread JS está ocupada com operações assíncronas. Com useNativeDriver = true, Animated.Value atualiza diretamente no lado nativo, deixando a thread JavaScript livre para manipulação de eventos, requisições API e reconciliação React. Limitação: useNativeDriver só suporta propriedades não relacionadas a layout — opacity, transform, backgroundColor (via PlatformColor). Para propriedades de layout (width, height, top, left), é necessário NativeAnimatedModule ou LayoutAnimation. De acordo com React Native 0.76, todas as propriedades animadas são suportadas via driver nativo, exceto as baseadas em layout. O modo useNativeDriver é recomendado para todas as animações onde possível — ele aumenta os FPS de 30-40 para 60 estáveis.

Animação com gestos: PanResponder e Gesture Handler

PanResponder é um sistema embutido do React Native para manipulação de gestos que se integra bem com Animated API. PanResponder fornece callbacks onPanResponderMove e onPanResponderRelease onde Animated.Value pode ser atualizado com base na posição do dedo. Para gestos mais complexos — swipe, pinch, rotation — use a biblioteca react-native-gesture-handler, que funciona sincronamente com animações e fornece 60 FPS mesmo com gestos de múltiplos dedos. Gesture Handler fornece Animated.event — um método que vincula diretamente um gesto a Animated.Value sem manipulação manual de callbacks. A combinação de Gesture Handler + Animated API é o padrão da indústria para animações interativas em aplicativos React Native.

Animated.event: vinculação de gestos a valores

Animated.event é um método que vincula um evento nativo (por exemplo, gestureEvent) diretamente a Animated.Value. Diferente da manipulação manual em callbacks, Animated.event funciona sincronamente na thread nativa e não requer a ponte JavaScript para cada quadro. Isso fornece animação suave mesmo durante deslizamentos rápidos. Animated.event aceita uma matriz de mapeamentos, onde cada elemento vincula um campo de evento a Animated.Value. O acesso aninhado é suportado: Animated.event([{ nativeEvent: { translationX: xValue } }]).

Exemplos de código com Animated API

Vamos ver três exemplos práticos de uso do Animated API em projetos React Native. O primeiro exemplo é uma animação de aparecimento de cartão com sequência opacity + translateY. O segundo exemplo é uma animação de pulso de botão usando spring. O terceiro exemplo é um elemento de arrasto interativo com PanResponder. Todos os exemplos usam useNativeDriver = true e seguem as melhores práticas do React Native 0.76.

const CardWithAnimation = () => {
  const anim = useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    Animated.spring(anim, {
      toValue: 1,
      friction: 6,
      tension: 40,
      useNativeDriver: true,
    }).start();
  }, []);

  const translateY = anim.interpolate({
    inputRange: [0, 1],
    outputRange: [50, 0],
  });

  return (
    Animated.View {
      style: [{ opacity: anim, transform: [{ translateY }] }]
    }
  );
};

Animação de pulso via spring

Animação Spring cria um efeito de pulso natural usando um modelo físico de mola. Configurações de baixo atrito (2-4) e alta tensão (100-150) produzem oscilações suaves que decaem naturalmente. Use Animated.loop para pulsos infinitos com um ciclo de sequência: scale → 1.2, scale → 1.0. O pulso é usado para indicadores de carregamento, notificações e botões de destaque.