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 agregan un estilo refinado a tu app, lo que le da un aspecto 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 también la guía de Material Design sobre el movimiento.
Cómo animar mapas de bits
Figura 1: Es 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 forma estática con un recurso de elementos de diseño, pero también puedes definir el comportamiento de la animación en el entorno de ejecución.
Por ejemplo, una buena manera de comunicar 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, consulta 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 brusco.
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, revelar u ocultar vistas dentro del 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 forma 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, la vista aparece o desaparece de forma gradual.
La forma más sencilla de crear estas animaciones es habilitarlas en tu diseño para 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 las actualizaciones de diseño.
Para aprender a crear animaciones con el sistema de animación de propiedades, consulta la Descripción general de la animación de propiedades. También puedes consultar las siguientes páginas para crear animaciones comunes:
Cómo cambiar la visibilidad de una vista con una transición gradual
Cómo cambiar la visibilidad de una vista con una revelación circular
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 la física del mundo real a tus animaciones para que tengan un aspecto natural. Por ejemplo, deben mantener el impulso cuando cambia su objetivo y realizar 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 se producen las animaciones.
Dos animaciones comunes basadas en la física son las siguientes:
Las animaciones que no se basan en la física, como las que se compilan 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 en el momento en que se produce el cambio, volver a configurarla con un valor nuevo como el nuevo valor de inicio y agregar el nuevo valor objetivo. Visualmente, este proceso crea una detención 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 rigen por la fuerza. El cambio en el valor objetivo genera un cambio en la fuerza. La fuerza nueva se aplica a la velocidad existente, lo que genera una transición continua al objetivo nuevo. Este proceso genera 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, puedes 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 transiciones para crear animaciones cuando intercambias el diseño dentro de la actividad o el fragmento actuales. Solo debes especificar el diseño inicial y final, y el tipo de animación que quieres usar. Luego, el sistema calcula y ejecuta una animación entre los dos diseños. Puedes usarlo para intercambiar 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 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 un Scene, aunque la escena de inicio suele determinarse automáticamente a partir del diseño actual. Crea un objeto Transition para indicarle al sistema qué tipo de animación deseas y, luego, llama a TransitionManager.go(). El sistema ejecutará la animación para intercambiar los diseños.
Para obtener más información, consulta Cómo animar los 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 realicen transiciones entre tus actividades. Se basa en el mismo framework 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 un costado o hacer que aparezca gradualmente, pero también puedes crear animaciones que realicen transiciones entre las vistas compartidas de cada actividad. Por ejemplo, cuando el usuario presiona un elemento para ver más información, puedes realizar la transición a una actividad nueva con una animación que agrande ese elemento de forma fluida hasta que ocupe toda 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 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: