Animaciones en Flutter

Carlos Morán

@carlosmoran97 carlosmoran97
Agenda
1. Introducción
2. Implicit animations
3. Hero animations
4. Staggered animations
5. Rive animations
6. Conclusiones
Introducción

Animation

El bloque de construcción principal del sistema de animación es la

clase Animation. Una animación representa un valor de un tipo
específico que puede cambiar a lo largo de la vida de la animación.
AnimationController

Además de ser una animación en sí misma, un AnimationController

te permite controlar la animación. Por ejemplo, puedes decirle al
controlador que reproduzca la animación. [forward]
Tween

Interpola entre sus valores begin y end.

¿Por qué animar nuestras aplicaciones?
1. UI más intuitiva
2. Contribuyen a la apariencia de una
aplicación pulida
3. Mejoran la experiencia del usuario
Implicit animations

La librería de animaciones de flutter te permite agregar movimiento

y crear efectos visuales para los widgets de tu UI.

Hay un conjunto de widgets que maneja esas animaciones por ti.

Código <>

Usando el widget AnimatedOpacity crear un efecto de fade-in.

Hero animations

El Hero se refiere al widget que se mueve de una pantalla a otra.

Para crear Hero Animations en Flutter usamos el widget Hero.

Staggered animation

Cambios visuales que ocurren como una serie de operaciones, en

lugar de todas al mismo tiempo.
Rive animations

RIVE es una herramienta interactiva en tiempo real que te permite

diseñar, animar e inmediatamente integrar tus assets en cualquier
plataforma.