Introducción a las animaciones

Prueba el estilo de Compose
Jetpack Compose es el kit de herramientas de IU recomendado para Android. Aprende a usar animaciones en Compose.

En las animaciones, se pueden agregar elementos visuales que notifiquen 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 agregan un estilo refinado a tu app, lo que le brinda un aspecto de mayor calidad.

Android incluye diferentes APIs de Animation 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 también la guía de Material Design sobre el movimiento.

Cómo animar mapas de bits

Figura 1: 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 elementos de diseño, pero 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 transforme en un botón de pausa cuando se lo presiona.

Para obtener más información, consulta Cómo animar gráficos con 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 para ayudar al usuario a comprender cómo cambia la IU.

Para mover, ocultar o mostrar vistas en el diseño actual, puedes usar el sistema de animación de propiedades que proporciona el paquete 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 vuelven a dibujar 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 aplica un fundido de entrada o de salida a la vista.

Si deseas crear estas animaciones de la manera más sencilla, habilítalas en tu diseño para que, cuando cambies la visibilidad de una vista, se aplique automáticamente una animación. Para obtener más información, consulta Cómo animar automáticamente actualizaciones de diseño.

Si deseas obtener información para crear animaciones con el sistema de animación de propiedades, lee la Descripción general de la 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 mantener el impulso cuando cambia su objetivo y hacer transiciones fluidas durante cualquier cambio.

Para proporcionar estos comportamientos, la biblioteca de compatibilidad de Android incluye APIs de animación basadas en la física que se basan en las leyes de la física para controlar cómo ocurren 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 cambia el valor objetivo, debes cancelar la animación cuando cambie el valor objetivo, volver a configurarla con un valor nuevo como valor de inicio nuevo y agregar el valor objetivo nuevo. 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, se impulsan mediante la fuerza. El cambio en el valor objetivo genera un cambio de vigencia. La fuerza nueva se aplica a la velocidad existente, lo que crea una transición continua al nuevo objetivo. 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: Para lograr una animación que muestre más detalles, se puede cambiar el diseño o iniciar 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 dentro de la actividad o el fragmento actual. Lo único que debes hacer es especificar el diseño de inicio y finalización, y el tipo de animación que quieres usar. Luego, el sistema detecta y ejecuta una animación entre los dos diseños. Puedes usar esto para intercambiar toda la IU o 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 por 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 una Scene, aunque, por lo general, la escena de inicio se determina automáticamente a partir del diseño actual. Crea un objeto Transition para indicarle al sistema el tipo de animación que deseas. Luego, llama a TransitionManager.go() y el sistema ejecutará la animación para cambiar los diseños.

Para obtener más información, consulta Cómo animar cambios de diseño con una transición. Para ver un 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 hagan transiciones entre tus actividades. Se basa en el mismo framework de transición descrito 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, pero también puedes crear animaciones que hagan una transición entre vistas compartidas en cada actividad. Por ejemplo, cuando el usuario presiona un elemento para ver más información, puedes realizar la transición a una nueva actividad con una animación que amplía sin problemas ese elemento hasta llenar la pantalla, como la animación que se muestra en la figura 5.

Como de costumbre, llamarás a startActivity(), pero le pasarás un conjunto de opciones que proporciona 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 lo siguiente: