Introducción a animaciones

Las animaciones bien diseñadas hacen que la interfaz de usuario sea más intuitiva, contribuyen a la apariencia de una aplicación pulida y mejoran la experiencia del usuario. El soporte de animación de Flutter facilita la implementación de una variedad de tipos de animación. Muchos widgets, especialmente los widgets Material Design, vienen con los efectos de movimiento estándar definidos en sus especificaciones de diseño, pero también es posible personalizar estos efectos.

Los siguientes recursos son un buen lugar para empezar a aprender el framework de animación de Flutter. Cada uno de estos documentos muestran, paso a paso, cómo escribir código de animación.

También tenemos algunos vídeos que discuten aspectos de las animaciones en Flutter.

AnimatedContainer

Opacity, incluyendo el widget implícito AnimatedOpacity

FadeInImage

Hero

Transform

AnimatedBuilder

Tipos de animación

Las animaciones se clasifican en dos categorías: basadas en física o en interpolación. Las siguientes secciones explican lo que significan estos términos y te señalan los recursos en los que puedes obtener más información. En algunos casos, la mejor documentación que tenemos actualmente es el código de ejemplo en la galería de Flutter.

Animación Tween

Abreviatura de entremedias. En una animación tween, se definen los puntos de inicio y finalización, así como una línea de tiempo y una curva que define el tiempo y la velocidad de la transición. El framework calcula cómo hacer la transición desde el punto de inicio hasta el punto final.

Los documentos listados arriba, como el tutorial de animaciones no tratan específicamente sobre la interpolación, sino que utilizan interpolación en sus ejemplos.

Animación basada en la física

En la animación basada en la física, el movimiento se modela para que se parezca al comportamiento del mundo real. Cuando lanzas una pelota, por ejemplo, dónde y cuándo cae depende de la rapidez con la que fue lanzada, de su peso y de la distancia del suelo. De manera similar, dejar caer una pelota atada a un resorte cae (y rebota) de manera diferente que dejar caer una pelota atada a una cuerda.

Patrones de animación comunes

La mayoría de los diseñadores de UX o de movimiento encuentran que ciertos patrones de animación se usan repetidamente cuando diseñan una interfaz de usuario. Esta sección enumera algunos de los patrones de animación más utilizados y te indica dónde puedes obtener más información.

Lista o grid animada

Este patrón implica animar la adición o eliminación de elementos de una lista o cuadrícula.

  • Ejemplo de AnimatedList
    Esta demostración, de la App Catálogo de Ejemplos, muestra cómo animar la adición de un elemento a una lista, o la eliminación de un elemento seleccionado. La lista interna de Dart se sincroniza a medida que el usuario modifica la lista utilizando los botones más (+) y menos (-).

Transición de elementos compartidos

En este patrón, el usuario selecciona un elemento—a menudo una imagen—de la página, y UI anima el elemento seleccionado a una nueva página con más detalles. En Flutter, puedes implementar fácilmente transiciones de elementos compartidos entre routes (páginas) utilizando el widget Hero.

  • Animaciones Hero Cómo crear dos estilos de animaciones de Hero:
    • El Hero se traslada de una página a otra mientras cambia de posición y tamaño.
    • El borde del Hero cambia de forma, de un círculo a un cuadrado, a medida que se traslada de una página a otra.
  • Flutter Gallery
    Puedes construir la aplicación Gallery tú mismo o descargarla de la Play Store. La demo Shrine incluye un ejemplo de animación Hero.

  • También consulta la documentación de la API para las clases Hero, Navigator, y PageRoute.

Animación escalonada

Animaciones que se dividen en movimientos más pequeños, donde parte del movimiento se retrasa. Las animaciones más pequeñas pueden ser secuenciales, o pueden sobreponerse parcial o totalmente.

Otros recursos

Aprende más sobre las animaciones de Flutter en los siguientes enlaces:


Si hay documentación de animación específica que te gustaría ver, por favor crea un issue.