Primeros pasos con animaciones en React Native

Las animaciones pueden dar vida a una aplicación, haciéndola más atractiva e intuitiva para el usuario. Pero si eres nuevo en las animaciones de React Native, comenzar puede ser un poco desalentador.

Explore las animaciones de React Native y descubra cómo puede comenzar a crear animaciones hermosas y fluidas.

¿Cómo funcionan las animaciones nativas básicas de React?

Las animaciones pueden crear transiciones suaves entre diferentes pantallas o elementos. Pueden resaltar información o proporcionar comentarios sobre las acciones del usuario. Las animaciones pueden ser simples o complejas y pueden usar una variedad de técnicas, como gráficos en movimiento 2D o 3D.

La portabilidad de React Native hace que valga la pena usarlo si está apuntando a varias plataformas. Una de sus características más fuertes es la capacidad de crear hermosas animaciones para aplicaciones móviles.

Puede animar un objeto React Native simplemente cambiando el estado de posición del componente deseado.

Por ejemplo:

importar Reaccionar, { estado de uso, efecto de uso } de'reaccionar';
importar { Ver, hoja de estilo } de'reaccionar-nativo';
constante aplicación = () => {
// Inicializa el estado para rastrear la posición de la caja
constante [PosiciónCuadro, EstablecerPosiciónCuadro] = usarEstado(0);
// Usa el gancho useEffect para actualizar la posición del cuadro cada 1 segundo
 usarEfecto(() => {
constante intervalo = establecerIntervalo(() => {
// Actualizar la posición del cuadro agregando 10 a la posición actual
 establecerPosiciónDeLaCuadro(prevPosición => prevPosición + 10);
 }, 1000);
// Devuelve una función de limpieza para borrar el intervalo cuando el componente
// desmonta
devolver() => clearInterval (intervalo);
 }, []);
// Establecer la posición del cuadro usando la variable de estado en el estilo en línea
constante estilo de caja = {
 transformar: [{ traducirY: posición del cuadro }]
 };
devolver (


 </View>
 );
};
constante estilos = StyleSheet.create({
 envase: {
 doblar: 1,
 alinear elementos: 'centro',
 justificar el contenido: 'centro',
 },
 caja: {
 ancho: 100,
 altura: 100,
 color de fondo: 'azul',
 },
});
exportarpor defecto aplicación;

Este código genera un cuadro azul que se mueve hacia abajo cada segundo. La animación funciona usando el efecto de uso enlace para crear un temporizador que actualice el posición de la caja variable de estado cada 1 segundo.

Si bien esto puede funcionar en algunas situaciones, esta no es la mejor opción. Las actualizaciones de estado en React Native funcionan de forma asíncrona, pero las animaciones se basan en actualizaciones de estado síncronas para funcionar correctamente. La implementación de su animación de forma asincrónica hará que las actualizaciones de estado no se reflejen inmediatamente en la salida renderizada del componente, lo que alterará el tiempo de sus animaciones.

Son varias librerías de animación como la Animado biblioteca, reaccionar-nativo-reanimado, y reaccionar-nativo-animable para crear animaciones de alto rendimiento en React Native. Cada una de estas bibliotecas de animación elimina el problema de las actualizaciones de estado asincrónicas y es perfectamente ideal.

La API animada de React Native

Animated es una API que proporciona React Native. Puede usarlo para crear animaciones fluidas que respondan a las interacciones del usuario o cambios de estado.

La API animada le permite crear valores animados que puede interpolar y asignar a varias propiedades de estilo de sus componentes. Luego puede actualizar estos valores con el tiempo utilizando varios métodos de animación. Los estilos de sus componentes se actualizarán a medida que cambien los valores animados, lo que dará como resultado animaciones fluidas.

Animated funciona muy bien con el sistema de diseño de React Native. Debido a esto, sus animaciones se integrarán correctamente con el resto de su interfaz de usuario para una apariencia aún mejor.

Para comenzar a usar Animated en su proyecto React Native, debe importar el Animado módulo de 'reaccionar-nativo ' en tu código:

importar { Animado } de'reaccionar-nativo';

Con Animado importado, puede comenzar a crear animaciones. Para hacer esto, primero, crea un valor animado que manipularás a lo largo de la animación:

constante valor animado = nuevo Animado. Valor(0);

El Animado. Valor es una clase en React Native Animated API que representa un valor mutable. Puede inicializarlo con un valor inicial y luego actualizarlo con el tiempo utilizando varios métodos de animación proporcionados por la API animada, como .momento(), .primavera(), y .decadencia(), especificando la duración de la animación, la función de aceleración y otros parámetros.

El valor animado es similar a un valor de estado en un componente de React.

Puede inicializar un Animado. Valor con el valor de estado inicial de un componente, y luego actualizarlo con el tiempo usando el establecerestado método.

Por ejemplo, tiene un componente que tiene un valor de estado contar, que representa el número de veces que el usuario ha hecho clic en ese botón.

Puedes crear un Animado. Valor e inicializarlo con el valor de estado inicial de contar:

constante aplicación = () => {
constante [contar, establecerCuenta] = usarEstado(0);
constante valor animado = nuevo Animado. Valor (recuento);
};

Entonces, siempre que el contar actualizaciones de valor de estado, puede actualizar Valor animado también:

constante handlebuttonClick = () => {
 establecerContador (contar + 1);
 Animated.timing (animatedValue, {
 aValor: contar + 1,
 duración: 500,
 useNativeDriver: verdadero
 }).comenzar();
};

Este ejemplo actualiza Valor animado utilizando el Temporización.animada() método cada vez que un usuario hace clic en el botón. El Valor animado impulsa la animación y cambia de valor en 500 milisegundos.

al relacionar Animado. Valor a un valor de estado de esta manera, puede crear animaciones que respondan a los cambios en el estado de su componente.

Ahora que comprende cómo manipular un valor animado, puede continuar con Interpolar el valor animado y asignarlo a una propiedad de estilo de su componente usando el Animado.interpolar() método.

Por ejemplo:

constante opacidad = valoranimado.interpolar({
 rango de entrada: [0, 1],
 rango de salida: [0, 1]
});
devolver (

 {/* el contenido de tu componente */}
 </View>
);

Esto creará una animación que se desvanecerá gradualmente en el Vista componente a medida que el valor animado cambia de 0 a 1.

Comprender los tipos de animación

Comprender los tipos de animación y cómo funcionan es importante para crear buenas animaciones.

Utilizando el usarNativeDriver La opción con Animado mejora el rendimiento. Esta opción le permite descargar animaciones al subproceso de interfaz de usuario nativo. Puede mejorar significativamente el rendimiento al reducir la cantidad de procesamiento de JavaScript requerido.

Sin embargo, no todos los tipos de animación admiten el controlador nativo. Intentar usar el controlador nativo con animaciones que involucren cambios de color o diseño puede causar un comportamiento inesperado.

Además, las animaciones que involucran secuencias complejas pueden causar problemas de rendimiento significativos en dispositivos con capacidad de procesamiento o memoria limitada. Estos déficits de rendimiento también pueden ser notables si su proyecto React Native está ejecutando una versión inferior que no apoyar el motor Hermes.

Comprender las fortalezas y limitaciones de los diferentes tipos de animación puede ayudarlo a elegir el enfoque adecuado para su caso de uso.

Póngase cómodo con las animaciones nativas de React

Las animaciones son una herramienta poderosa para crear interfaces de usuario atractivas y dinámicas en las aplicaciones React Native. La API animada proporciona una forma flexible y eficiente de crear animaciones de secuencias simples y complejas.

Aún así, es importante considerar el impacto en el rendimiento de las animaciones y elegir el enfoque y la biblioteca apropiados para su situación.