Este workshop fue creado para el DevDay Ar 2018.
Crear un Splash screen animado en distintos pasos
- Mostrar logo animándolo para que entre desde la izquierda
- Mostrar el año haciendo fade in y moviendo el logo al mismo tiempo
Animar el header achicándolo a medida que se hace scroll sobre una lista
Implementar un floating heart para lograr el resultado que vemos aquí
- Antes de implementar una animación, entender en qué consiste: qué pasos tiene, qué easing deberíamos usar y qué propiedades animar para cada elemento.
- Siempre tratar de correr nuestras animaciones usando el native driver: pasando el parámetro
useNativeDriver: true
al definir una animación conAnimated
vamos a lograr la mejor performance. - Animar estilos que permitan usar el native driver: para poder usar el native driver NO se pueden animar propiedades de layout (como
flex
,top
owidth
) pero SI se pueden usar todas las propiedades que ofrecetransform
(comoscale
,translate
yrotate
) - No hace falta definir un
AnimatedValue
por cada elemento animado: podemos conectar más de un estilo al mismo valor y luego ejecutar una misma animación. - Es muy útil usar el método
interpolate
deAnimatedValue
para conectar distintos estilos a un mismo valor. - La propiedad de estilo
transform
recibe un array: y esto no es casual, ya que el orden de las transformaciones importa. No es lo mismotransform: [{ rotate: '90deg' }, { translateX: 100 }]
quetransform: [{ translateX: 100 }, { rotate: '90deg' }]
.
- Olvidarse de usar
Animated.View
,Animated.Image
yAnimated.Text
**: es fácil olvidarse este detalle y el error no es muy amigable. - Intentar usar el native driver y propiedades no soportadas por el mismo.