El documento presenta una introducción a las animaciones en React Native. Explica dos métodos principales para animaciones: LayoutAnimation, que anima automáticamente cambios en el diseño, y la Animated API, que permite animar valores como posición y tamaño de manera personalizada. También incluye ejemplos y buenas prácticas para implementar animaciones de forma óptima.
6. Animaciones
- No es un nuevo concepto:
flipbooks, dibujos, películas,
webs, apps, etc.
- Mejoran la experiencia del
usuario.
- Hacen atractiva la UI.
- No deberían afectar el
performance.
8. ¿QUESTIONS?
#ReactNativeBSF
- Anima automáticamente ante un
cambio en el layout (UI).
- Su método principal es
ConfigureNext: recibe de
parámetro un objeto con la duración
y la configuración de create, update
y delete.
- Cuenta con Presets de configuración
de animaciones ya definidos.
- Configurar (lanzar) la animación
antes de un “setState”.
- Solo anima opacity y scale.
11. ¿QUESTIONS?
#ReactNativeBSF
- Tener cuidado con la cantidad
de veces que llamamos a los
métodos de LayoutAnimation o
habrá override.
- No permite animar algunas
propiedades (aún).
- No se puede determinar que
elementos del layout (UI)
deberían animarse y cuáles no.
16. ¿QUESTIONS?
#ReactNativeBSF
- Animated.parallel -> para
animar en paralelo.
- Animated.sequence ->
para animar en secuencia.
- Animated.delay -> para
esperar cierto tiempo.
- Animated.loop -> para
repetir n veces.
19. ¿QUESTIONS?
#ReactNativeBSF
- Primera parte del video:
- Las estrellas rotan y escalan
tamaño.
- Los círculos escalan su tamaño.
- Segunda parte del video:
- Los circulos giran alrededo de un
eje, cambiando de posición (uno
encima de otro).
- Los círculos realizan esta acción dos
veces
29. ¿QUESTIONS?
#ReactNativeBSF
- Tratar de evitar lag / lentitud de
performance causado por tantos re-
renders: shouldComponentUpdate.
- Evitar guardar valores de animación en
el state.
- useNativeDriver para Android.
- No anidar las animaciones: si alguna
animación requiriera estar en el state,
tratar de separarlo en un componente
pequeño.
- Siempre revisar issues abiertos en github
(para prevenir problemas entre ios o
android).
31. ¿QUESTIONS?
#ReactNativeBSF- Librería para renderear
animaciones de After
Effects.
- Disponible para: iOS,
android, web, y React
Native.
- After Effects exporta el
archivo de animación como
JSON (con ayuda de
Bodymovin como plugin).