En las animaciones, se pueden agregar elementos visuales que informen a los usuarios sobre lo que sucede en tu app. Son particularmente útiles cuando la IU cambia de estado, como cuando se carga contenido nuevo o cuando hay acciones nuevas disponibles. Las animaciones también le dan un aspecto acabado a tu app, que se traduce en una apariencia y estilo de mayor calidad.
Android incluye diferentes APIs de animación según el tipo de animación que desees. En esta documentación, se proporciona una descripción general de las diferentes formas en que puedes agregar movimiento a tu IU.
Para comprender mejor cuándo debes usar animaciones, consulta la guía de Material Design sobre el movimiento.
Cómo animar mapas de bits
Figura 1: Un elemento de diseño animado.
Para animar un gráfico de mapa de bits, como un ícono o una ilustración, usa las APIs de animación de elementos de diseño. Por lo general, estas animaciones se definen de manera estática con un recurso de diseño, aunque también puedes definir el comportamiento de la animación en el tiempo de ejecución.
Por ejemplo, una buena manera de comunicarle al usuario que dos acciones están relacionadas es animar un botón de reproducción que se transforma en un botón de pausa cuando se presiona.
Para obtener más información, lee Cómo animar gráficos de elementos de diseño.
Cómo animar la visibilidad y el movimiento de la IU
Figura 2: Una animación sutil cuando aparece y desaparece un diálogo hace que el cambio de la IU sea menos molesto.
Cuando necesites cambiar la visibilidad o la posición de las vistas en tu diseño, es mejor incluir animaciones sutiles que le ayuden al usuario a entender los cambios de la IU.
Para mover, ocultar o mostrar vistas en el diseño actual, puedes usar el sistema de animación de propiedades del paquete de android.animation, disponible en Android 3.0 (nivel de API 11) y versiones posteriores. Estas APIs actualizan las propiedades de tus objetos View durante un período y dibujan la vista de manera continua a medida que cambian las propiedades. Por ejemplo, cuando cambias las propiedades de posición, la vista se mueve por la pantalla. Cuando cambias la propiedad alfa, se agrega un fundido de entrada o salida a la vista.
Para crear estas animaciones de la forma más sencilla, habilita las animaciones en tu diseño, de manera que cuando cambies la visibilidad de una vista, se aplique una animación automáticamente. Para obtener más información, consulta Cómo animar automáticamente actualizaciones de diseño.
Si deseas obtener información sobre cómo crear animaciones con el sistema de animación de propiedades, consulta Descripción general de animación de propiedades. También puedes consultar las siguientes páginas para crear animaciones comunes:
Movimiento basado en la física
Figura 3: Animación creada con ObjectAnimator.
Figura 4: Animación creada con APIs basadas en la física
Siempre que sea posible, aplica física del mundo real a tus animaciones para que se vean naturales. Por ejemplo, deben conservar el impulso cuando cambia su objetivo y mostrar transiciones fluidas durante los cambios.
Para ofrecer estos comportamientos, la biblioteca de compatibilidad de Android incluye APIs de animación basadas en la física que utilizan las leyes de la física para controlar tus animaciones.
Dos animaciones comunes basadas en la física son las siguientes:
Las animaciones no basadas en la física, como las compiladas con las APIs de ObjectAnimator, son bastante estáticas y tienen una duración fija. Si el valor del objetivo cambia, debes cancelar la animación en ese momento, volver a configurar la animación con un valor nuevo como el valor de inicio nuevo y agregarlo. Desde un punto de vista visual, este proceso crea una parada abrupta en la animación y un movimiento desarticulado después, como se muestra en la figura 3.
Las animaciones creadas con APIs de animación basadas en la física, como DynamicAnimation, están impulsadas por la fuerza. El cambio en el valor del objetivo genera un cambio en la fuerza. La fuerza nueva se aplica en la velocidad existente, lo que crea una transición continua al objetivo nuevo. Este proceso da como resultado una animación de aspecto más natural, como se muestra en la figura 4.
Cómo animar los cambios de diseño
Figura 5: Se puede lograr que una animación muestre más detalles, ya sea cambiando el diseño o iniciando una actividad nueva.
En Android 4.4 (nivel de API 19) y versiones posteriores, puedes usar el framework de transición para crear animaciones cuando cambias el diseño desde la actividad o el fragmento actual. Todo lo que necesitas hacer es especificar un diseño de inicio y finalización, y qué tipo de animación quieres usar. Luego, el sistema interpreta y ejecuta la animación entre los dos diseños. Puedes usar este proceso para cambiar toda la IU o para mover o reemplazar solo algunas vistas.
Por ejemplo, cuando el usuario presiona un elemento para ver más información, puedes reemplazar el diseño con los detalles del elemento y aplicar una transición como la que se muestra en la figura 5.
Los diseños de inicio y finalización se almacenan en un Scene, aunque, por lo general, la escena de inicio se determina automáticamente a partir del diseño actual. Creas un Transition para indicarle al sistema el tipo de animación que deseas. Luego, llamas a TransitionManager.go() y el sistema ejecuta la animación para cambiar los diseños.
Para obtener más información, consulta Cómo animar los cambios de diseño con una transición. Si quieres ver el código de muestra, consulta BasicTransition.
Cómo animar entre actividades
En Android 5.0 (nivel de API 21) y versiones posteriores, también puedes crear animaciones que sirvan de transición entre tus actividades. Este proceso se basa en el mismo marco de trabajo de transición que se describió en la sección anterior, pero te permite crear animaciones entre diseños en actividades separadas.
Puedes aplicar animaciones simples, como deslizar la actividad nueva desde el costado o atenuarla. También puedes crear animaciones que sirvan de transición entre vistas compartidas en cada actividad. Por ejemplo, cuando el usuario presiona un elemento para ver más información, puedes agregar una transición a una actividad nueva con una animación que aumente de tamaño ese elemento hasta ocupar la pantalla, como la animación que se muestra en la figura 5.
Como de costumbre, llamas a startActivity(), pero le pasas un paquete de opciones proporcionadas por ActivityOptions.makeSceneTransitionAnimation().
Este paquete de opciones puede incluir qué vistas se comparten entre las actividades para que el framework de transición pueda conectarlas durante la animación.
Para obtener recursos adicionales, consulta los siguientes vínculos: