Creando Animaciones en React Native
Descargar como PPTX, PDF1 recomendación277 vistas
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.
Creando Animaciones en React Native
- 3. Nuestros Panelistas Kerly Pereda Senior Front End Developer Jans Álvarez Marketing Analyst
- 4. Agenda • Conceptos Básicos. • LayoutAnimation. • Animated API. • Ejemplo. • Buenas Prácticas. • Un poco más: Lottie. • Demo. ¿QUESTIONS? #ReactNativeBSF
- 5. ¿QUESTIONS? #ReactNativeBSFReact vs React Native - Mobile. - Fácil curva de aprendizaje. - All you need is (love) Javascript. - React Native está basado en React. - DOM & Styling. https://facebook.github.io/react-native/docs/getting-started
- 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.
- 13. ¿QUESTIONS? #ReactNativeBSF - Animated exporta: View, Text, ScrollView, Image, FlatList and SectionList. - Puedes crear componentes propios con : Animated.createAnimatedComponent() - Métodos más comunes: Configuración: ➔ Animated.timing() ➔ Animated.spring() Componer: ➔ Animated.parallel() ➔ Animated.sequence() ➔ Animated.delay() Combinar valores: ➔ Animated.add() ➔ Animated.substract() ➔ Animated.divide() ➔ Animated.multiply()
- 14. ¿QUESTIONS? #ReactNativeBSF Primero declaramos los valores iniciales de la animación.
- 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.
- 18. ¿QUESTIONS? #ReactNativeBSF Lo que la UX está pensando: Lo que el desarrollador ve: Cómo debe verse:
- 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
- 23. ¿QUESTIONS? #ReactNativeBSF Paso 1 Paso 2 Translate X Paso 3 Scale
- 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).
- 33. Demo
- 36. ➔ https://facebook.github.io/react-native/docs/animations ➔ https://facebook.github.io/react-native/docs/layoutanimation ➔ https://www.opencodez.com/react-native/react-native-animation.htm ➔ https://opensource.com/article/18/6/getting-started-react-native-animations ➔ https://scotch.io/@rakshitkrsoral/the-beginners-guide-to-using-react-native-animated-api Reference Links ¿QUESTIONS? #ReactNativeBSF
- 37. Preguntas