Cómo crear mejores animaciones nativas de React

Las aplicaciones móviles suelen utilizar animaciones para animar la experiencia del usuario. Pero crear animaciones de alta calidad puede ser un desafío.

Afortunadamente, existen conceptos y técnicas que puede utilizar para mejorar sus habilidades de animación. Luego puede aplicarlos para crear animaciones mejores y más fluidas para su próxima aplicación móvil React Native.

Reaccionar animaciones nativas

El Reaccionar Nativo Animado La biblioteca es la forma más popular de crear animaciones en una aplicación React Native.

Al igual que Biblioteca de animación integrada de React, la API animada es parte de la biblioteca animada basada en JavaScript. Animated proporciona un conjunto de clases y métodos que le permiten crear animaciones suaves y fluidas. Hay varias otras excelentes opciones para crear animaciones React Native, como Reanimated.

Sin embargo, crear buenas animaciones en React Native no se trata solo de usar la biblioteca correcta o establecer las propiedades correctas. También se trata de comprender los principios de la animación y cómo aplicarlos en el contexto del desarrollo de aplicaciones móviles. Así que aquí hay algunos principios clave para comprender y tener en cuenta al crear sus animaciones.

Ajuste de la duración de la animación

Las animaciones deben sentirse suaves y naturales para un usuario. Lograr esto puede depender de cómo maneje la duración de las animaciones particulares que cree.

La duración se refiere a la cantidad de tiempo que tarda una animación en ejecutarse por completo. De forma predeterminada, las animaciones en React Native tienen una duración de 500 milisegundos, pero puede ajustarlas para que vayan más rápido o más lento.

Debes ajustar la duración de la animación según su complejidad. Una animación simple, como un fundido de entrada, puede necesitar solo una corta duración, mientras que una animación más compleja, como un deslizamiento con un efecto de rebote, puede necesitar más tiempo para sentirse natural y suave.

Con el Animación.timing() método, puede crear una animación cronometrada personalizada que se ajuste a sus necesidades.

Aquí hay un ejemplo de cómo agregar una duración personalizada a una animación de aparición gradual simple:

importar Reaccionar, {useRef} de'reaccionar';
importar { Animado, Ver } de'reaccionar-nativo';
constante FadeInView = (accesorios) => {
constante desvanecerAnim = usarRef(nuevo Animado. Valor(0)).actual; 
 Reaccionar.useEffect(() => {
 Temporización.animada(
 desvanecerse anim,
 {
 valorar: 1,
 duración: 2000, // establece la duración personalizada
 useNativeDriver: verdadero,
 }
 ).comenzar();
 }, [fadeAnim]);
devolver (
 estilo={{
 ...accesorios.estilo,
 opacidad: fadeAnim,
 }}
 >
 {accesorios.niños}
 </Animated.View>
 );
}
exportarpor defectofunciónaplicación() {
devolver (
doblar: 1, alinear elementos: 'centro', justificar el contenido: 'centro'}}>
ancho: 250, altura: 50, color de fondo: 'azul pálido'}}>
tamaño de fuente: 28, texto alineado: 'centro', margen: 10}}>Desvaneciéndose en</Text>
 </FadeInView>
 </View>
 );
}

Al elegir una duración para su animación, es importante lograr el equilibrio adecuado entre velocidad y suavidad.

Intente comenzar con una duración más larga cuando esté experimentando por primera vez. Una mayor duración le dará más tiempo para ajustar la función de aceleración y refinar su animación. Siempre puedes acortar la duración más adelante una vez que estés satisfecho con el efecto general.

Usar funciones de aceleración

Las animaciones simples pueden tener una velocidad constante, pero variar la velocidad puede crear efectos más naturales. Las funciones de aceleración controlan la velocidad de cambio de una animación a lo largo del tiempo. Pueden hacer que sus animaciones comiencen lentamente y luego se aceleren. Establecer diferentes velocidades a medida que avanza la animación puede crear una animación fluida y atractiva.

Tome este ejemplo del uso de una función de aceleración:

importar Reaccionar, {useRef} de'reaccionar';
importar { Animado, Ver } de'reaccionar-nativo';
constante FadeInView = (accesorios) => {
constante desvanecerAnim = usarRef(nuevo Animado. Valor(0)).actual; 
 Reaccionar.useEffect(() => {
 Temporización.animada(
 desvanecerse anim,
 {
 valorar: 1,
 duración: 2000,
 aceleración: Animated.easeOut, // usa la función de aceleración aquí
 useNativeDriver: verdadero,
 }
 ).comenzar();
 }, [fadeAnim]);
devolver (
 estilo={{
 ...accesorios.estilo,
 opacidad: fadeAnim,
 }}
 >
 {accesorios.niños}
 </Animated.View>
 );
}
exportarpor defectofunciónaplicación() {
devolver (
doblar: 1, alinear elementos: 'centro', justificar el contenido: 'centro'}}>
ancho: 250, altura: 50, color de fondo: 'azul pálido'}}>
tamaño de fuente: 28, texto alineado: 'centro', margen: 10}}>Fundido de entrada</Text>
 </FadeInView>
 </View>
 );
}

Este código utiliza el Animated.easeOut función para controlar la tasa de cambio de la opacidad de un animado Vista. El Temporización.animada() El método utilizará la función de salida gradual para cambiar gradualmente la opacidad de 0 a 1 durante dos segundos, para que la animación parezca ralentizarse a medida que llega a su final.

Puede usar diferentes tipos de funciones de aceleración para que sus animaciones se vean más fluidas, incluidas la aceleración, la aceleración y la aceleración.

Elegir la función de aceleración correcta puede marcar una gran diferencia en la calidad percibida de las animaciones de su aplicación. Vale la pena tomarse un tiempo para jugar con ellos y ver qué funciona mejor para sus casos de uso específicos.

Los fotogramas clave ayudan con animaciones complejas

Los fotogramas clave son marcadores que le permiten identificar momentos en su animación en los que desea realizar cambios en propiedades como la posición, la escala o la rotación. Es como marcar puntos en el tiempo para guiar la animación.

Puede utilizar un conjunto de fotogramas clave para establecer valores específicos para cualquier propiedad quieres animar. Esto le ayuda a controlar el tiempo y el comportamiento, especialmente para animaciones complejas como las que implican el movimiento de personajes.

Para crear una animación básica de fotogramas clave, deberá especificar los fotogramas clave entre los que desea animar y la duración total.

Por ejemplo, supongamos que desea animar un cuadrado desde una posición inicial de (0, 0) hasta una posición final de (100, 100) durante un período de un segundo.

Puede crear una matriz de fotogramas clave como esta:

constante fotogramas clave = [
 { X: 0, y: 0 },
 { X: 50, y: 50 },
 { X: 100, y: 100 },
];

En este caso, hay tres fotogramas clave: uno al comienzo de la animación, uno en el medio y otro al final. A continuación, puede pasar esta matriz de fotogramas clave a su biblioteca de animación, junto con una duración de 1000 milisegundos, para crear una animación fluida entre los fotogramas clave.

En algunas bibliotecas, también deberá especificar una función de aceleración para controlar el progreso de la animación. Sin embargo, puede aplicar la idea básica de especificar fotogramas clave y duración a la mayoría de las bibliotecas de animación.

Aproveche el dispositivo con aceleración de hardware

La aceleración de hardware puede ser una herramienta poderosa para optimizar el rendimiento de sus animaciones React Native. Al aprovechar el hardware de gráficos del dispositivo, puede descargar parte del trabajo de procesamiento de la CPU y, a su vez, lograr animaciones más fluidas y receptivas.

La GPU del dispositivo procesará de forma nativa los valores y estilos animados, en lugar de que el hilo de JavaScript tenga que hacerlo.

Es posible que la aceleración de hardware no esté disponible en todos los dispositivos, por lo que es importante probar sus animaciones en una variedad de dispositivos reales para garantizar el mejor rendimiento.