Unos 5 minutos · React 16.8+ · React DOM

Empezar

De la instalación a los gestos y las animaciones de entrada y salida en seis pasos. Cada paso es un componente pequeño que funciona.

1
Instalar
Animated no tiene dependencias en tiempo de ejecución. React 16.8+ es una dependencia peer.
La entrada del paquete está marcada con 'use client'. En el App Router de Next.js, un layout de servidor puede renderizar AnimatedProvider; usa los hooks y Animated.<tag> dentro de Client Components.
$
```
npm install @kkwaenggwari/animated
```
El import @kkwaenggwari/animated se resuelve en tu editor.
Mueve tu primer valor
useAnimatedValue(1) gestiona un número vivo durante toda la vida del componente. Ponlo directamente en style: se convierte en una variable CSS, así que React no se renderiza mientras cambia.
timing(value, { toValue, duration }).start() lo mueve. Pulsar otra vez a mitad de camino empieza desde la opacidad actual.
Preparando el ejemplo…
La caja se desvanece y vuelve, y una segunda pulsación a mitad de camino invierte desde donde está.
Deriva muchas salidas de un valor
interpolate asigna el valor a longitudes, ángulos o números. Sin easing, se convierte en un calc() exacto de la misma variable, así que cinco carriles cuestan lo mismo que uno.
Distintos rangos de entrada sobre el mismo valor crean una cascada sin cinco animaciones separadas.
Preparando el ejemplo…
Una pulsación mueve cinco carriles en cascada; cambiar spread solo cambia los rangos.
Describe un destino
Animated.button renderiza un button normal. seed es el primer fotograma, pose es donde debe estar ahora y tempo es cómo llega.
Cuando pose cambia a mitad del trayecto, el elemento gira desde donde está en pantalla, conservando su velocidad con un resorte.
Preparando el ejemplo…
Hacer clic rápido en las tarjetas nunca hace que una salte.
Conecta la entrada
input(ref, moveInput(...)) escribe las coordenadas del puntero en valores. follow(target, source) hace que un valor siga a otro con un resorte.
Todo lo declarado en una factoría de useAnimated pertenece al componente: los listeners y los resortes se detienen cuando se desmonta o cambia una dependencia.
Preparando el ejemplo…
La tarjeta se inclina hacia el puntero y vuelve a su sitio cuando el puntero sale.
Anima la salida
Quitar un hijo de React normalmente lo elimina al instante. Animated.Keep conserva los hijos con key hasta que termina su pose depart.
wait renderiza los hijos nuevos solo cuando han terminado todas las salidas.
Preparando el ejemplo…
Los mensajes descartados salen con el movimiento elegido antes de desaparecer.

Ya tienes el modelo completo

Valores, destinos, entrada y salidas comparten los mismos controladores, reglas de interrupción y limpieza. Las guías profundizan en cada uno.

Instalar

Mueve tu primer valor

Deriva muchas salidas de un valor

Describe un destino

Conecta la entrada

Anima la salida

Ya tienes el modelo completo