Se preparó una traducción del artículo específicamente para estudiantes del curso ReactJS / React Native-Developer .
Es difícil imaginar una aplicación móvil en la que no haya animación. Las animaciones en la web suelen ser simples, si es que existen (máximo: una página reemplaza a otra). Las animaciones en aplicaciones móviles requieren una atención completamente diferente.
CSS3 tiene una API relativamente simple que te permite hacer animaciones simples. Pero en React Native no tienes esta herramienta. Sí, incluso si lo fuera, entonces no sería suficiente.
Entonces, ¿qué necesita saber si está trabajando con React Native y necesita implementar animaciones completas?
React Native tiene una herramienta como Animated, pero parece intimidante ... al menos al principio.
Por lo tanto, hay tres "grupos de cosas" o "bloques" si lo desea, que debe conocer para poder trabajar con la animación.
Bloque 0: la necesidad de cambio
Las animaciones son un cambio de un estado a otro:
- Transición de "oculto" a "visible";
- Transición de un círculo a un cuadrado.
Piensa en qué mostrar antes y después de la animación.
Piense en las transiciones y qué estilos necesita cambiar para esto:
- ¿Debería aparecer el objeto con un cambio en la transparencia, o debería simplemente "caer" desde arriba?
- ¿Debería el círculo convertirse en un cuadrado o convertirse en un triángulo en el medio del proceso?
Bloque 1: Un estado visual conocido como Animated.Value
Desde un punto de vista lógico, cualquier componente puede mostrarse u ocultarse: estos son los significados de "verdadero" y "falso", no hay término medio. Como estado, una visualización de si el objeto se muestra como verdadero o falso.
En una buena interfaz de usuario, los objetos no se ocultan repentinamente y tampoco aparecen repentinamente. Aparecen gradualmente, ayudando al usuario a comprender la interfaz.
Por lo tanto, queda claro que el estado visual puede ser algo entre un estado verdadero y un estado falso.
¿Cómo es eso?
Podemos introducir otra variable para representar un rango de estados visuales. Necesitamos que sea un número, porque no importa qué estado lógico tengamos, los números nos ayudan a representar valores intermedios.
this._shown = new Animated.Value(0);
Si bien el estado lógico puede ser binario (es decir,
true o
false , 1 o 0), el estado visual es un número de coma flotante.
Bloque 2: Transiciones conocidas como Animated.timing
Digamos que algún componente está oculto: esto significa que el estado lógico de sus parámetros de visibilidad será falso y el estado visual también será 0.0. Pero, ¿qué sucede cuando queremos mostrar un componente? El estado lógico debería volverse verdadero inmediatamente, mientras que el estado visual debería pasar gradualmente primero a 0.1, 0.2, ... y finalmente completamente a 1.0.
Para hacer esto, necesitamos una forma de decirle al estado visual la transición a 1.0.
Y hay tales formas. De hecho, incluso hay algunos.
La forma más fácil es básicamente:
Animated.timing(this._shown, { toValue: 1, duration: 300, }).start();
Aquí, decimos
Animated para cambiar
_shown a
1.0 en el intervalo de 300 ms.
Hay otras transiciones y formas de organizar múltiples transiciones, pero ahora podemos usar
Animated.timing .
Bloque 3: píxeles conocidos como Animated.View e interpolate
Nuestras transiciones
_shown entre
0.0 y
1.0 no significan nada si no podemos verlas. Entonces, ¿cómo hacemos esto?
Necesitamos usar de alguna manera
_shown para establecer la transparencia del componente hijo.
Supongamos que tenemos este código antes de comenzar a trabajar con animaciones:
<View style={{ opacity: this.state.shown ? 1 : 0 }}> <SomeComponent /> </View>
Establecemos la transparencia en
0 cuando ocultamos el componente y en
1 cuando lo mostramos.
¿Podemos usar el
Animated.Value y
_shown existentes para animar la transición de
0 a
1 ?
Estilo de animación
Podemos usar cualquier
Animated.Value cuando trabajamos con estilos.
Solo necesitamos cambiar la
View a
Animated.View , y ahora tenemos lo siguiente:
const opacity = this._shown;
¿No es este un artículo sobre animaciones? ¿Por qué todavía no hay fotos?
Una cosa más: interpolación
Esta palabra suena aterradora, pero la idea en sí es bastante simple. La interpolación nos permite mantener un estado visual dentro de 0 y 1, pero da la posibilidad de "emparejar" con otra cosa.
Digamos, en lugar de simplemente crear un componente heredado, queremos que nuestro componente se "salga de arriba". Y podemos hacer esto colocando el componente oculto 40px más alto y animando su movimiento a la posición deseada, cuando el estado cambia a visible.
Podemos "hacer coincidir" nuestros valores de 0 a 1 con valores de -40 a 0 utilizando la llamada de
interpolate habitual:
const top = this._shown.interpolate({ inputRange: [0, 1], outputRange: [-40, 0], });
Esto creará un nuevo
Animated.Value , cuyo valor será de -40 a 0.
En otras palabras, será
-40 cuando
_shown es
0 ,
-20 cuando
_shown =
0.5 y
0 cuando
_shown 1.0 .
Secreto oscuro: con interpolate también puede cambiar valores para colores y grados.Conclusiones:
- El estado visual es un valor numérico, debe reflejar la transición de un estilo a otro.
Animated.Value permite reflejar el valor numérico del estado visual.Animated.timing se puede usar para mover Animated.Value a otro número.Animated.Value se puede usar para estilos al reemplazar View con Animated.View .
La interpolación le permite mapear un rango de
Animated.Value a otro, por ejemplo, un rango de
0 a
1 a un rango de
5 a
25 o incluso a un rango entre negro y verde.
Fuentes:
En este artículo, nos encontramos con las primitivas de la animación en React Native y obtuvimos una comprensión de la idea básica. Aquí puede encontrar recursos para ayudarlo a explorar este tema más profundamente: