Animación de la interfaz de usuario
Idioma: HTML | XAML

Animación de la interfaz de usuario (XAML)

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente

Puedes integrar la apariencia de Windows en tu aplicación con la biblioteca de animaciones que se explican en este tema. En este tema, se ofrece un resumen de las animaciones y algunos ejemplos de escenarios comunes en los que se usa cada una.

Los controles de Windows en tiempo de ejecución para XAML incluyen ciertos tipos de animaciones como comportamientos integrados procedentes de una biblioteca de animaciones. Ciertos controles, como ListView, FlipView, Flyout y AppBar, usan estas animaciones como comportamiento integrado. Al usar estos controles en tu aplicación, puedes conseguir la apariencia animada sin tener que programarla tú mismo.

Las animaciones de la biblioteca de animaciones de Windows en tiempo de ejecución proporcionan estos beneficios:

  • Movimientos que cumplen los principios de animación
  • Transiciones rápidas y fluidas entre los estados de interfaz de usuario que informan sin distraer al usuario.
  • Comportamiento visual que muestra al usuario las transiciones dentro de una aplicación

Por ejemplo, cuando el usuario agrega un elemento a una lista, en lugar de aparecer en la lista de forma instantánea, este se coloca en su lugar mediante una animación. Los otros elementos de la lista se animan a su nueva posición rápidamente para hacer lugar para el elemento nuevo. Este comportamiento de transición hace que la interacción de control sea más aparente para el usuario.

La biblioteca de animaciones no ofrece animaciones para todos los escenarios posibles. Habrá casos en que querrás crear una animación personalizada en XAML. Para obtener más información, consulta Animaciones con guion gráfico.

Si quieres obtener un código de ejemplo que use las API que se tratan en este tema, consulta la muestra de animaciones XAML, la muestra de animaciones de personalidad XAML o el tema de inicio rápido: animación de la interfaz de usuario con animaciones de la biblioteca.

Tipos de animaciones

El objetivo último del sistema de animación de Windows en tiempo de ejecución y de la biblioteca de animaciones es permitir que los controles y otras partes de la interfaz de usuario tengan un comportamiento animado. Existen varios tipos de animaciones diferentes.

  • Las transiciones de tema se aplican automáticamente cuando cambian ciertas condiciones en la interfaz de usuario, incluidos controles o elementos de los tipos de interfaz de usuario de XAML de Windows en tiempo de ejecución predefinidos. Se conocen como transiciones de tema porque las animaciones admiten la apariencia de Windows y porque definen el comportamiento de todas las aplicaciones en escenarios de interfaz de usuario determinados cuando cambian de un modo de interacción a otro. Las transiciones de tema forman parte de la biblioteca de animaciones.
  • Las animaciones de tema son animaciones de una o más propiedades de tipos de interfaz de usuario de XAML de Windows en tiempo de ejecución predefinidos. Las animaciones de tema no son iguales a las transiciones de tema, ya que las primeras están destinadas a un elemento específico y existen en estados visuales específicos dentro de un control, mientras que las últimas se asignan a propiedades del control que existen fuera de los estados visuales e influyen en las transiciones entre esos estados. Muchos de los controles XAML de Windows en tiempo de ejecución incluyen animaciones de tema dentro de guiones gráficos que forman parte de su plantilla de control y que se desencadenan por medio de estados visuales. Siempre y cuando no modifiques las plantillas, tendrás animaciones de tema integradas disponibles para los controles en la interfaz de usuario. Pero si las reemplazas, eliminarás al mismo tiempo las animaciones de tema de los controles integrados. Para recuperarlas, debes definir un guion gráfico que incluya estas animaciones dentro del conjunto de estados visuales del control. También puedes ejecutar las animaciones de tema desde guiones gráficos que no estén dentro de los estados visuales e iniciarlas con el método Begin, pero esto no es tan común. Las animaciones de tema forman parte de la biblioteca de animaciones.
  • Las transiciones visuales se aplican cuando un control cambia de uno de sus estados visuales definidos a otro estado. Son animaciones personalizadas escritas por ti y que suelen estar relacionadas con la plantilla personalizada que escribes para un control y las definiciones de estado visual incluidas en dicha plantilla. La animación solo se ejecuta en el espacio de tiempo entre ambos estados, que suele ser muy breve, de unos pocos segundos a lo sumo. Para obtener más información, consulta la sección "VisualTransition" de las animaciones con guion gráfico para estados visuales.
  • Las animaciones con guion gráfico se aplican cuando las inicia específicamente tu código de aplicación o código que incorpore un componente, como un control que hayas incluido. Las animaciones con guion gráfico pueden cambiar el valor de cualquier propiedad de dependencia de Windows en tiempo de ejecución a lo largo de un período de tiempo. Estas no se limitan a escenarios de la interfaz de usuario. De hecho, quizás te resulte útil pensar en ellas como una técnica de máquina de estados, si conoces ese concepto. Tampoco se limitan al tiempo de transición entre los estados visuales, sino que se pueden ejecutar en cualquier momento, independientemente de un cambio en el estado del control, e incluso de manera continua. Para más información, consulta el tema sobre las animaciones con guión gráfico. Para más información sobre las propiedades de dependencia y dónde se encuentran, consulta el tema de introducción a las propiedades de dependencia.

Animaciones disponibles en la biblioteca

Podrás encontrar las siguientes animaciones en la biblioteca de animaciones. Haz clic en el nombre de una animación para conocer los escenarios principales de uso y cómo definirla, y para ver un ejemplo.

Nota  Las animaciones expand, peek, badge y search list de la biblioteca de animaciones de JavaScript no están disponibles para XAML.
 

Comportamiento de Windows 8

En Windows 8, las transiciones de tema XAML y otros comportamientos animados automáticos de la biblioteca de animaciones no respetaban una determinada configuración de Accesibilidad de Microsoft Windows que permite a los usuarios desactivar "animaciones innecesarias".

A partir de Windows 8.1, tanto las transiciones de tema como las animaciones de tema y las transiciones visuales respetan la configuración Desactivar todas las animaciones no necesarias (cuando sea posible) de Accesibilidad. Las animaciones no se ejecutarán y los cambios de estado de los controles o los cambios visuales serán instantáneos.

Si migras el código de tu aplicación de Windows 8 a Windows 8.1, es posible que quieras probar el comportamiento de las animaciones con la configuración Desactivar todas las animaciones no necesarias (cuando sea posible) habilitada. Debido a que algunas de estas animaciones son controladas por guiones gráficos, y a que a veces encadenas animaciones personalizadas para que empiecen una vez se completen las transiciones visuales o las animaciones de tema, la configuración Desactivar todas las animaciones necesarias (cuando sea posible) podría afectar a los intervalos de tus animaciones. Además, si has implementado algo como VisualTransition en un estado visual en vez de una animación con guión gráfico, es posible que quieras cambiarlo para que sea una animación personalizada, de modo que la configuración Desactivar todas las animaciones necesarias (cuando sea posible) no lo deshabilite.

Las aplicaciones compiladas para Windows 8 pero ejecutadas en Windows 8.1 seguirán usando el comportamiento de Windows 8 para las animaciones de tema y las transiciones visuales. Sin embargo, la configuración de Windows 8.1 deshabilita las transiciones de tema, incluso aunque la aplicación no se haya recompilado.

Transición de contenido y transición de entrada

Usa las animaciones de transición de contenido (ContentThemeTransition) para hacer que una parte o una sección de contenido aparezca o desaparezca de la vista actual. Por ejemplo, las animaciones de transición de contenido muestran contenido que no estaba listo cuando se cargó la página por primera vez o cuando cambia el contenido de una sección de una página.

La biblioteca de animaciones de XAML no tiene un concepto de una animación que se aplica a toda la página al cargarla, pero sí tiene una transición independiente (EntranceThemeTransition) que se puede aplicar al contenido de una página al cargarla por primera vez y al representar esa parte del contenido. De este modo, cuando el contenido aparece por primera vez el usuario puede ver información diferente de la que ve cuando cambia el contenido.

Para más información, consulta el tema sobre la animación de transiciones de contenido y de entrada.

Fundido de entrada, fundido de salida y encadenado

Usa animaciones de fundido de entrada y de salida para mostrar u ocultar interfaces de usuario o controles transitorios. En XAML estas se representan como FadeInThemeAnimation y FadeOutThemeAnimation. Por ejemplo, en una barra de la aplicación pueden aparecer controles nuevos debido a la interacción del usuario. Otro ejemplo es una barra de deslizamiento o un indicador de movimiento panorámico transitorios con fundido de salida, cuando no se detecta ninguna entrada del usuario durante cierta cantidad de tiempo. Las aplicaciones también deben usar el fundido en una animación cuando realizan una transición de un elemento marcador de posición al elemento final, a medida que el contenido se carga dinámicamente.

Usa una animación de encadenado para suavizar la transición cuando el estado de un elemento cambia, por ejemplo, cuando la aplicación actualiza el contenido actual de una vista. La biblioteca de animaciones de XAML no proporciona una animación de encadenado dedicada (no hay un equivalente para crossFade), pero es posible obtener el mismo resultado si se usan FadeInThemeAnimation y FadeOutThemeAnimation con tiempos superpuestos.

Para más información, consulta el tema sobre la animación de atenuaciones.

Puntero arriba y abajo

Usa las animaciones PointerUpThemeAnimation y PointerDownThemeAnimation para que el usuario sepa que una pulsación o un clic en un icono se realizó correctamente. Por ejemplo, cuando el usuario hace clic o presiona un icono, se reproduce la animación de puntero abajo. Una vez finalizado el clic o la pulsación, se reproduce la animación de puntero arriba.

Para más información, consulta el tema sobre la animación de acciones de puntero.

Cambiar la posición

Usa las animaciones de reposición (RepositionThemeAnimation o RepositionThemeTransition) para mover un elemento a otra posición. Por ejemplo, podrías usarlas para mover los encabezados en un control de elementos con encabezados.

Para más información, consulta el tema sobre la animación de reposiciones.

Mostrar u ocultar emergente

Usa PopInThemeAnimation y PopOutThemeAnimation para mostrar y ocultar un Popup o elementos de interfaz de usuario contextuales similares en el frente de la vista actual. PopupThemeTransition es una transición de tema que resulta útil si se quiere cerrar una ventana emergente por cambio de foco.

Para más información, consulta el tema sobre la animación de la interfaz de usuario emergente.

Mostrar u ocultar interfaces de usuario de borde

Usa la animación EdgeUIThemeTransition para deslizar pequeñas interfaces de usuario de modo que aparezcan y desaparezcan desde el borde. Por ejemplo, podrías usarla para mostrar una barra de la aplicación personalizada en la parte superior o inferior de la pantalla o una superficie de interfaz de usuario para errores y advertencias en la parte superior de la pantalla.

Usa la animación PaneThemeTransition para mostrar u ocultar un panel. Se usa para interfaces de usuario de borde de gran tamaño, como un teclado personalizado o un panel de tareas.

Para más información, consulta el tema sobre la animación de interfaz de usuario en el borde.

Cambios de elementos de lista

Usa la animación AddDeleteThemeTransition para añadir comportamiento animado al agregar o eliminar elementos en una lista existente. Para agregarlos, la transición primero cambiará la posición de los elementos existentes en la lista para dar cabida a los elementos nuevos y luego los agregará. Para eliminarlos, la transición los quita de la lista y, si es necesario, cambia la posición del resto de los elementos.

También hay una animación ReorderThemeTransition independiente que se aplica si cambia la posición de un elemento en una lista. Este comportamiento animado es diferente del de las animaciones de eliminación y adición que eliminan un elemento y luego lo agregan en otro lugar.

Para más información, consulta el tema sobre la animación de cambios de elementos de lista.

Arrastrar y colocar

Usa las animaciones de arrastrar (DragItemThemeAnimation, DragOverThemeAnimation) y la animación de colocar (DropTargetItemThemeAnimation) para ofrecer comentarios visuales cuando el usuario arrastra o coloca un elemento.

Cuando están activas, las animaciones muestran al usuario que la lista se puede reordenar alrededor del elemento que se colocará. Esto es útil para los usuarios que saben adónde irá el elemento en la lista si se lo coloca en la ubicación actual. Estas animaciones muestran comentarios visuales para indicar que un elemento que se está arrastrando puede colocarse entre otros dos elementos de la lista que se moverán para darle lugar.

Para más información, consulta el tema sobre la animación de secuencias de arrastrar y colocar.

Gestos de deslizar rápidamente

Usa la animación SwipeHintThemeAnimation para mostrar que un icono admite la interacción del gesto de deslizar rápidamente. Los usuarios pueden deslizar rápidamente hacia abajo para seleccionar un icono. Si el usuario no sabe si puede deslizar sobre un icono, el gesto de presionar y sostener sobre el icono reproducirá la animación de indicio de deslizar rápidamente para sugerirle al usuario que debe interactuar con el icono de esta forma.

Usa la animación SwipeBackThemeAnimation para mostrar que el icono se ha seleccionado y devolverlo a su ubicación de reposo.

Para más información, consulta el tema sobre la animación de gestos de deslizar rápidamente.

Usar animaciones con controles personalizados

En la tabla siguiente se resumen las recomendaciones sobre qué animación debes usar cuando crees una versión personalizada de estos controles de Windows en tiempo de ejecución:

Tipo de interfaz de usuarioAnimación recomendada
Cuadro de diálogo FadeInThemeAnimation y FadeOutThemeAnimation
Control flotante PopInThemeAnimation y PopOutThemeAnimation
Información sobre herramientas FadeInThemeAnimation y FadeOutThemeAnimation
Menú contextual PopInThemeAnimation y PopOutThemeAnimation
Barra de comandos EdgeUIThemeTransition
Panel de tareas o panel en el borde PaneThemeTransition
Contenido de cualquier contenedor de interfaz de usuario ContentThemeTransition
Para controles o en casos en que no se apliquen otras animaciones FadeInThemeAnimation y FadeOutThemeAnimation

 

Temas relacionados

Guía básica para crear aplicaciones de Windows en tiempo de ejecución con C# o Visual Basic
Muestra de animaciones de personalidad XAML
Muestra de HTML de la biblioteca de animaciones
Espacio de nombres Windows.UI.Xaml.Media.Animation

 

 

Mostrar:
© 2016 Microsoft