Animated API: qué es, características de la biblioteca y principio de funcionamiento

Qué es Animated API en React Native

Animated API es una biblioteca de animación declarativa integrada en el núcleo de React Native, diseñada para crear animaciones fluidas y de alto rendimiento en aplicaciones móviles. A diferencia de las animaciones CSS en el desarrollo web, Animated API trabaja directamente con el hilo de UI nativo a través del puente de JavaScript o el controlador nativo. La biblioteca se construye en torno al concepto de Animated.Value, un contenedor que almacena un valor numérico y suscribe automáticamente todos los componentes dependientes a los cambios. Cuando el valor cambia mediante Animated.timing o Animated.spring, la biblioteca calcula los estados intermedios sin volver a renderizar los componentes de React, lo que es fundamental para mantener 60 FPS. Animated API admite todas las propiedades de estilo, incluyendo transform, opacity, width, height, top, left y backgroundColor. La documentación de React Native recomienda Animated API para todos los escenarios de animación que requieran alto rendimiento y comportamiento predecible en ambas plataformas.

Cómo funciona Animated API: Value, timing y spring

La base de Animated API es Animated.Value, un contenedor de valores numéricos que se inicializa mediante el constructor new Animated.Value(0). Cada Animated.Value almacena un número inicial y proporciona métodos de animación: timing, spring y decay. El método timing crea una animación lineal o con easing con parámetros de duración, retardo y easing. El método spring implementa una animación de resorte físico con parámetros de fricción, tensión y velocidad. El método decay crea una animación con inercia y amortiguación, útil para deslizamientos y scroll. Todos los métodos devuelven un objeto Animated.Composite que se puede iniciar mediante start() y detener mediante stop(). La animación se ejecuta en un hilo separado: cuando useNativeDriver = true, los cálculos ocurren en el hilo de UI nativo, dejando el hilo de JavaScript libre para el manejo de eventos y la lógica.

Animated.timing: configuración de duración y easing

Animated.timing es el método básico de animación con duración controlada. Acepta configuración: toValue, duration (por defecto 500ms), easing (Easing.linear por defecto) y delay. Las funciones de easing del módulo Easing permiten aceleración no lineal: Easing.bezier, Easing.elastic, Easing.bounce. Para animación con velocidad uniforme use Easing.linear, para aceleración natural use Easing.inOut. Importante: Animated.timing garantiza que la animación terminará exactamente en toValue dentro del tiempo especificado, independientemente de la carga del dispositivo.

Animated.spring: animación basada en física

Animated.spring implementa un modelo de animación de resorte basado en la ley de Hooke. El parámetro friction (fricción) controla la cantidad de oscilaciones: cuanto mayor es la fricción, más rápida es la parada. El parámetro tension (tensión) determina la rigidez del resorte: una tensión alta acelera el movimiento. El parámetro velocity (velocidad) establece la velocidad inicial para la animación con inercia, fundamental para animaciones que siguen gestos del usuario. Animated.spring no tiene una duración fija: la animación se completa cuando la velocidad y la amplitud alcanzan valores umbral.

Animated.View, Animated.Text y otros componentes

Animated API proporciona cuatro componentes animados incorporados: Animated.View, Animated.Text, Animated.ScrollView y Animated.Image. Cada uno es un envoltorio sobre el componente nativo correspondiente que admite pasar Animated.Value a las propiedades de estilo. Animated.View es el componente más utilizado, acepta los mismos props que un View normal, pero con soporte para valores animados en style. Animated.Text es útil para animar el color del texto o el espaciado entre letras. Animated.ScrollView permite animar scrollTo y contentOffset. Animated.Image admite opacidad y escala animadas durante la carga de imágenes. Si necesita animar otro 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 interpolación: de números a color y transformaciones

Interpolación es un mecanismo para convertir un rango numérico de entrada de Animated.Value en valores de salida de otro tipo. El método interpolate acepta una configuración con inputRange (matriz de valores de entrada) y outputRange (matriz de valores de salida). Tipos de outputRange: números (coordenadas, opacidad), cadenas (ángulos de rotación con 'deg'), colores hex ('#ff0000'), objetos de transformación. La interpolación admite easing y extrapolate, el comportamiento fuera del rango especificado (clamp, extend, identity). Por ejemplo, durante un gesto de arrastre, puede convertir la posición del dedo de 0 a 200 en opacidad de 1 a 0, creando un efecto de desvanecimiento al deslizar. El sistema de interpolación permite crear animaciones complejas de múltiples pasos: el valor 0-0.5-1.0 puede convertirse en amarillo-naranja-rojo.

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'],
});

Composición de animaciones: secuencia y paralelismo

Animated API admite tres modos de composición de animaciones: Animated.sequence, Animated.parallel y Animated.stagger. Animated.sequence ejecuta animaciones una tras otra: cada siguiente comienza después de que la anterior finaliza. Animated.parallel ejecuta todas las animaciones simultáneamente con un único callback de finalización compartido. Animated.stagger ejecuta animaciones con un retardo entre cada inicio, útil para crear efectos de onda. Las composiciones se pueden anidar: secuencia de grupos paralelos o paralelo de secuencias. Esto permite crear cadenas complejas: animación de aparición de elementos con retardo, slide-in paralelo con fade-in, luego una secuencia de bounce y 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 y rendimiento de animaciones

useNativeDriver es una opción de configuración de animación que traslada toda la lógica de animación del hilo de JavaScript al hilo de UI nativo. Sin useNativeDriver, las animaciones se ejecutan a través del puente de JavaScript: cada cambio de valor se envía al hilo nativo, causando retrasos cuando el hilo JS está ocupado con operaciones asíncronas. Con useNativeDriver = true, Animated.Value se actualiza directamente en el lado nativo, dejando el hilo de JavaScript libre para el manejo de eventos, solicitudes API y la reconciliación de React. Limitación: useNativeDriver solo admite propiedades no relacionadas con el layout: opacity, transform, backgroundColor (a través de PlatformColor). Para propiedades de layout (width, height, top, left), se requiere NativeAnimatedModule o LayoutAnimation. Según React Native 0.76, todas las propiedades animadas son compatibles con el controlador nativo excepto las basadas en layout. Se recomienda el modo useNativeDriver para todas las animaciones donde sea posible: aumenta los FPS de 30-40 a 60 estables.

Animación con gestos: PanResponder y Gesture Handler

PanResponder es un sistema integrado de React Native para el manejo de gestos que se integra bien con Animated API. PanResponder proporciona callbacks onPanResponderMove y onPanResponderRelease donde se puede actualizar Animated.Value según la posición del dedo. Para gestos más complejos (swipe, pinch, rotation), use la biblioteca react-native-gesture-handler, que funciona sincrónicamente con las animaciones y proporciona 60 FPS incluso con gestos de múltiples dedos. Gesture Handler proporciona Animated.event, un método que vincula directamente un gesto con Animated.Value sin necesidad de manejo manual de callbacks. La combinación de Gesture Handler + Animated API es el estándar de la industria para animaciones interactivas en aplicaciones React Native.

Animated.event: vinculación de gestos a valores

Animated.event es un método que vincula un evento nativo (por ejemplo, gestureEvent) directamente con Animated.Value. A diferencia del manejo manual en callbacks, Animated.event funciona sincrónicamente en el hilo nativo y no requiere el puente de JavaScript para cada fotograma. Esto proporciona una animación fluida incluso durante deslizamientos rápidos. Animated.event acepta una matriz de mapeos, donde cada elemento vincula un campo del evento con Animated.Value. Se admite el acceso anidado: Animated.event([{ nativeEvent: { translationX: xValue } }]).

Ejemplos de código con Animated API

Veamos tres ejemplos prácticos de uso de Animated API en proyectos React Native. El primer ejemplo es una animación de aparición de tarjeta con secuencia opacity + translateY. El segundo ejemplo es una animación de pulsación de botón usando spring. El tercer ejemplo es un elemento de arrastre interactivo con PanResponder. Todos los ejemplos usan useNativeDriver = true y siguen las mejores prácticas de 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 }] }]
    }
  );
};

Animación de pulsación mediante spring

La animación Spring crea un efecto de pulsación natural mediante un modelo físico de resorte. La configuración de baja fricción (2-4) y alta tensión (100-150) produce oscilaciones suaves que se atenúan de forma natural. Use Animated.loop para pulsaciones infinitas con un ciclo de secuencia: scale → 1.2, scale → 1.0. La pulsación se utiliza para indicadores de carga, notificaciones y botones de acento.