Crear Animación con React Native y la API Animated
React Native ofrece diferentes API para crear experiencias de usuario, una de ellas es la api Animated que permite control granular a la hora de crear animaciones permitiendo controlar cada aspecto de ella.
Instructor: [0:00] Comenzaremos con un pequeño proyecto en Snack. Borremos lo que no necesitamos, estos textos y esta Card. Eliminamos los import innecesarios y agregamos lo que vamos a necesitar que es el componente Animated y una imagen. Además algún elemento que nos permita tocar, como TouchableWithoutFeedback.
[0:19] Lo primero será crear un componente que llamaremos AnimatedImage que recibirá simplemente un ítem. Creamos el valor animado, que llamaremos animatedValue que simplemente es una referencia usando useRef al valor new Animated.Value que comenzará en . Nos aseguramos de que siempre accedamos al valor actual con current.
[0:40] Luego crearemos dos interpolaciones. Una para animación de escalado, animatedValue.Interpolate que irá desde los valores de entrada 1, creando un mapa con valores de salida 1 y 1.5, para que la escala vaya entre 1 y 1.5.
[0:54] Haremos lo mismo con la interpolación de opacidad, creando una interpolación que mapea valores de a 1 para el valor animado, con una salida de .4 a 1 como valores de opacidad.
[1:08] Luego crearemos dos funciones, una para iniciar la animación y una para detenerla. La función de inicio de animación simplemente llama a Animated.spring en el valor animado y indica que va hacia el valor 1 y utilizará el driver nativo.
[1:28] Para detener la animación simplemente copiamos lo mismo, modificamos su nombre como stopAnimation y decimos que modificará hacia el valor . No olvidemos que las animaciones deben ser iniciadas con start.
[1:39] Ahora creamos los valores que animaremos que son estilos. Primero el estilo de escalado que es un transform y recibe el valor de scaleInterpolation y el valor de opacidad que será opacityInterpolation.
[1:51] Ahora simplemente retornamos componente que queremos mostrar que es TouchableWithoutFeedback que nos permita presionar. Cuando presionamos, iniciamos la animación y al soltar la presión detenemos la animación o creamos la animación de retroceso.
[2:05] Como hijo de este Touchable, usaremos un Animated.Image que es un objeto que permite animar. Recibirá como fuente el ítem y los estilos, que serán animatedStyle y un estilo que tenemos que definir para darle diseño a esta imagen. Su resizeMode será contain.
[2:23] Cerramos, tenemos un typo aquí. Eliminamos este estilo que no necesitamos, creamos el estilo para la imagen con un borde, un margen, un tamaño que en este caso será simplemente un cuadrado de 300x300 y un fondo negro.
[2:38] Volvemos a nuestro componente principal en donde tenemos que obtener una imagen para mostrar. Utilizaremos para eso picsum. Recordemos que lo que recibe nuestro componente es un objeto. Ahora simplemente llamamos a nuestro componente AnimatedImage, pasamos este ítem y podemos ver que en el preview se renderiza nuestra imagen que tiene una animación al presionar y soltar.
[2:57] Ahora vamos a hacer algo más interesante. Podemos obtener varias imágenes y renderizarlas al mismo tiempo. Para eso simplemente utilizaremos el hook useState para almacenar nuestras imágenes y simplemente recibirá un arreglo vacío y el hook useEffect para obtener nuestras imágenes desde un servicio externo.
[3:15] Volveremos a utilizar la API de picsum.photos, en este caso para obtener una lista de imágenes. Ahora utilizamos el componente FlatList que nos permite renderizar una lista de elementos.
[3:26] Generamos la configuración mínima que es pasar la prop data, ir a función renderItem que indica cómo se renderizará cada ítem. En este caso será nuestro componente AnimatedImage y podemos ver en el preview una lista de imágenes animadas en donde animamos el efecto escala y el efecto opacidad.
[3:43] También podemos modificar y utilizarla de manera horizontal. En definitiva, lo que hicimos fue crear un componente animado, utilizando la API Animated. Creamos un valor animado que parte en y creamos dos interpolaciones que permiten mapear valores de entrada a 1 con valores de salida en este caso para la escala 1 a 1.3 y para la opacidad .4 a 1.
[4:02] Luego creamos dos animaciones, una de entrada que lleva el valor animado de a 1 y una de salida que lleva el valor de 1 a . Esto nos permite animar dos efectos que se definen dentro del estilo, el efecto escala y el efecto de opacidad. Y después simplemente usamos el componente Animated.Image para renderizar nuestra imagen animada.