Animación de la interfaz de usuario (HTML)
[ 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 que ofrece Windows 8 en tu aplicación de la Tienda Windows, mediante el conjunto de animaciones proporcionadas por Windows en la Biblioteca de animaciones. En este artículo, se ofrece un resumen de las animaciones y algunos ejemplos de escenarios comunes incluidos en la biblioteca de animaciones.
Usar las animaciones de la Biblioteca de animaciones otorga los siguientes beneficios:
- Movimientos que cumplen los principios de animación de las aplicaciones de la Tienda Windows.
- Transiciones rápidas y fluidas entre los estados de interfaz de usuario que informan sin distraer al usuario.
- Efectos visuales más claros para mostrarle al usuario las transiciones de una aplicación.
Por ejemplo, cuando el usuario agrega un elemento a una lista, en lugar de aparecer en la lista al instante, el nuevo elemento se muestra como una animación y los otros elementos de la lista se trasladen de forma animada a sus nuevas posiciones, dando cabida al elemento recién incorporado. Esto hace que la acción resulte más clara para el usuario, a diferencia de las transiciones instantáneas.
Observa que todos los controles de Windows 8, como ListView, FlipView, Flyout y AppBar, usan animaciones de la Biblioteca de animaciones. Usando estos controles en tu aplicación, puedes conseguir la apariencia de las animaciones de las aplicaciones de la Tienda Windows sin tener que programarlas tú mismo.
La Biblioteca de animaciones no ofrece animaciones para todos los escenarios posibles. Habrá casos en que querrás crear una animación personalizada para reflejar tu marca. Debes considerar detenidamente en qué diverges de las animaciones de la Biblioteca de animaciones. Solo debes salirte de la biblioteca si existe una razón bien clara, por ejemplo, porque necesitas un aire especial para una marca o porque no existe ninguna animación en la biblioteca de animaciones que se adapte a tu caso.
Si quieres obtener código de ejemplo que use las API que se tratan en este tema, consulta Muestra de HTML de la biblioteca de animaciones.
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, las funciones necesarias para ejecutarla y un ejemplo de la animación.
- Transición de página: anima el contenido de una página que aparece o desaparece.
- Transición de contenido: anima una parte del contenido que aparece y desaparece.
- Fundido de entrada y salida: muestra controles o elementos transitorios.
- Encadenado: actualiza una área de contenido.
- Puntero arriba y abajo: da comentarios visuales de una pulsación o clic en un icono.
- Expandir o contraer: muestra información incorporada adicional.
- Cambiar la posición: mueve un elemento a una nueva posición.
- Mostrar u ocultar emergente: muestra la interfaz de usuario contextual en la parte superior de la página.
- Mostrar u ocultar UI de borde: desliza una UI que aparece o desaparece desde el borde.
- Mostrar u ocultar panel: desliza grandes paneles que aparecen o desaparecen desde el borde.
- Agregar o eliminar en lista: agrega o elimina un elemento de una lista.
- Agregar o eliminar en lista de búsqueda: agrega o elimina un elemento de una lista cuando se filtran los resultados de búsqueda.
- Inspeccionar: actualiza el contenido de un icono.
- Actualización de distintivo: actualiza un distintivo numérico.
- Inicio y fin de arrastre, y arrastre entre entrar y salir: proporciona información visual durante una operación de arrastrar y colocar.
- Indicio de deslizar rápidamente: insinúa que un icono admite la interacción del gesto de deslizar rápidamente.
- Seleccionar o anular selección de deslizar rápidamente: cambia un icono a un estado seleccionado por un gesto de deslizar rápidamente.
Transición de página
Las transiciones de página animan el contenido de una página que aparece o desaparece. Esto incluye tanto mostrar la primera página después de la pantalla de presentación, como hacer una transición entre las páginas de una aplicación.
En el vídeo siguiente se muestra la animación que hace que aparezca una página de contenido:
En el vídeo siguiente se muestran las animaciones que crean transiciones entre dos páginas de contenido:
Si quieres obtener más información acerca de la experiencia del usuario y una guía de uso, consulta Directrices y lista de comprobación de animaciones de transiciones de página.
Usa estas API para ejecutar esta animación en código JavaScript:
Transición de contenido
Usa animaciones de transición de contenido para mover una parte o una sección de contenido que aparece y desaparece. No confundas las transiciones de contenido, que implican elementos de una página, con las transiciones de página, que implican páginas completas. Por ejemplo, las animaciones de transición de contenido se usan para mostrar contenido que no estaba listo cuando se cargó la página por primera vez y para cambiar el contenido de una sección de una página.
En el vídeo siguiente se muestran animaciones que quitan contenido existente y muestran contenido nuevo:
Si quieres obtener más información acerca de la experiencia del usuario y una guía de uso, consulta Directrices y lista de comprobación para animaciones de transiciones de contenido.
Usa estas API para ejecutar esta animación en código JavaScript:
Fundido de entrada y salida
Usa animaciones de fundido de entrada y salida para mostrar u ocultar interfaces de usuario o controles transitorios. 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.
En el vídeo siguiente se muestran animaciones que hacen aparecer y desaparecer contenido. Observa la barra de desplazamiento que aparece y desaparece en la parte inferior de la pantalla:
Si quieres obtener más información acerca de la experiencia del usuario y una guía de uso, consulta Directrices y lista de comprobación para animaciones de atenuación.
Usa estas API para ejecutar esta animación en código JavaScript:
Encadenado
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 página.
En el vídeo siguiente se muestra la animación de encadenado:
Si quieres obtener más información acerca de la experiencia del usuario y una guía de uso, consulta Directrices y lista de comprobación para animaciones de atenuación.
JavaScript: Usa estas API para ejecutar esta animación:
Puntero arriba y abajo
Usa las animaciones de puntero arriba y abajo para comentar al usuario sobre pulsaciones o clics correctos en un icono. Por ejemplo, cuando el usuario hace clic o pulsa hacia abajo en 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.
En el vídeo siguiente se muestran estas animaciones:
Para obtener más información acerca de la experiencia del usuario y una guía de uso, consulta el tema sobre las Directrices y lista de comprobación de animaciones de puntero.
Usa estas API para ejecutar esta animación en código JavaScript:
Expandir o contraer
Usa la animación de expandir para agregar más espacio en el contenido de la página y mostrar información incorporada adicional. Por ejemplo, si aparece un mensaje de error, otro contenido de la página se mueve para darle lugar a ese mensaje. La animación de contraer oculta este contenido adicional y muestra menos detalles de un elemento en particular. La animación de contraer normalmente se activa a causa de la acción del usuario.
En el vídeo siguiente se muestran estas animaciones:
Usa estas API para ejecutar esta animación en código JavaScript:
Cambiar la posición
Usa la animación de cambiar la posición para mover un elemento a otra posición. Por ejemplo, podrías usarla para mover los encabezados en una vista panorámica.
En el vídeo siguiente se muestra esta animación:
Si quieres obtener más información acerca de la experiencia del usuario y una guía de uso, consulta Directrices y lista de comprobación para animaciones de reposición.
JavaScript: Usa estas API para ejecutar esta animación:
Mostrar u ocultar interfaces de usuario de borde
Usa las animaciones de mostrar u ocultar interfaces de usuario emergentes para mostrar u ocultar la interfaz de usuario contextual encima de la vista actual. Por ejemplo, una interfaz de usuario emergente puede mostrar información más detallada sobre un componente de un elemento. Usa las animaciones de mostrar u ocultar interfaces de usuario emergentes para mostrar un menú contextual personalizado o un control flotante.
En el vídeo siguiente se muestran estas animaciones:
Si quieres obtener más información acerca de la experiencia del usuario y una guía de uso, consulta Directrices y lista de comprobación para animaciones de interfaz de usuario emergentes.
Usa estas API para ejecutar esta animación en código JavaScript:
Mostrar u ocultar UI de borde
Usa las animaciones para mostrar u ocultar UI de borde para deslizar pequeñas UI de borde que aparecen y desaparecen de la página. Por ejemplo, podrías usar estas animaciones para mostrar una barra de la aplicación personalizada en la parte inferior de la pantalla o una superficie de interfaz de usuario para errores y advertencias en la parte superior de la pantalla.
En el vídeo siguiente se incluyen animaciones que muestran y ocultan una interfaz de usuario en el borde:
Para obtener más información acerca de la experiencia del usuario y una guía de uso, consulta el tema sobre las Directrices y lista de comprobación de animaciones en el borde.
Usa estas API para ejecutar esta animación en código JavaScript:
Mostrar u ocultar panel
Usa la animación de mostrar u ocultar panel para mostrar u ocultar un panel, que es una UI en el borde grande, como un panel de tareas o teclado personalizado. No confundas estas animaciones con las animaciones para mostrar u ocultar UI de borde, que se usan con elementos de interfaz de usuario pequeños en el borde como puntos de entrada y salida.
En el vídeo siguiente se incluyen animaciones que muestran u ocultan paneles:
Para obtener más información acerca de la experiencia del usuario y una guía de uso, consulta el tema sobre las Directrices y lista de comprobación de animaciones en el borde.
Usa estas API para ejecutar esta animación en código JavaScript:
Agregar o eliminar en lista
Usa las animaciones de agregar o eliminar en lista si quieres agregar o eliminar un elemento de una lista de una o dos dimensiones existente. La animación para agregar en lista primero cambia la posición de los elementos existentes en la lista para dar cabida a los elementos nuevos. Luego agrega los elementos nuevos. La animación para eliminar en lista quita elementos de una lista y, si es necesario, cambia la posición del resto de los elementos una vez que se quitaron los elementos eliminados.
En el siguiente vídeo se muestran estas animaciones:
Para obtener más información acerca de la experiencia del usuario y una guía de uso, consulta el tema sobre las Directrices y lista de comprobación de animaciones de listas.
Usa estas API para ejecutar esta animación en código JavaScript:
Agregar o eliminar en lista de búsqueda
Usa las animaciones de agregar o eliminar en lista de búsqueda cuando los elementos de una lista cambian rápidamente durante una búsqueda. Ten en cuenta que las animaciones de listas de búsqueda son más rápidas que las animaciones de listas estándar. Por ejemplo, si un usuario escribe un término de búsqueda y la lista filtra los resultados en tiempo real, los elementos que se filtran deben usar la animación de eliminar en lista de búsqueda. A la inversa, un usuario podría buscar una cadena y luego retroceder para quitar un carácter. Esto implica que se vuelven a agregar elementos a la lista de resultados de la búsqueda, por lo que deberías usar la animación de agregar en lista de búsqueda para realizar esta tarea.
En el siguiente vídeo se muestran estas animaciones:
Para obtener más información acerca de la experiencia del usuario y una guía de uso, consulta el tema sobre las Directrices y lista de comprobación de animaciones de listas.
Usa estas API para ejecutar esta animación en código JavaScript:
Inspeccionar
Usa la animación de inspeccionar para alternar entre mostrar una imagen o un texto en un icono cuando este no es lo suficientemente grande como para mostrar ambas cosas a la vez. Usa también esta animación para recorrer el conjunto de imágenes en un icono.
En el vídeo siguiente se muestra esta animación:
JavaScript: Usa estas API para ejecutar esta animación:
Actualización de distintivo
Usa la actualización de distintivo para actualizar los distintivos que muestran un número. Por ejemplo, una aplicación de correo que muestra el número de correos electrónicos no leídos puede usar la animación de actualización de distintivo para actualizar este valor.
En el vídeo siguiente se muestra esta animación:
JavaScript: Usa estas API para ejecutar esta animación:
Inicio y fin de arrastre, y arrastre entre entrar y salir
Usa las animaciones de arrastre para proporcionar información visual cuando el usuario arrastra o coloca un elemento. Usa la animación de inicio de arrastre cuando el usuario empieza a arrastrar un elemento. Usa la animación de fin de arrastre cuando el usuario coloca un elemento.
De manera opcional, puedes usar las animaciones de arrastre entre entrar y salir para mostrarle al usuario que la lista puede reordenarse en torno a un elemento colocado. Esto es útil para usuarios que saben adónde se irá el elemento en la lista, si se lo coloca en la ubicación actual. Las animaciones de arrastre entre entrar y salir informan visualmente que un elemento que está siendo arrastrado puede colocarse entre otros dos elementos de la lista y que esos elementos se moverán de lugar.
En el vídeo siguiente se muestran las animaciones relacionadas con la operación de arrastrar y colocar:
Para obtener más información acerca de la experiencia del usuario y una guía de uso, consulta el tema sobre las Directrices y lista de comprobación de animaciones de arrastrar y colocar.
Usa estas API para ejecutar esta animación en código JavaScript:
Indicio de deslizar rápidamente
Usa la animación de indicio de deslizar rápidamente 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 pulsar 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.
En el vídeo siguiente se muestra esta animación:
JavaScript: Usa estas API para ejecutar esta animación:
Seleccionar o anular la selección con deslizar rápidamente
Usa la animación de seleccionar con deslizar rápidamente cuando un elemento ha sido seleccionado mediante la interacción de deslizar rápidamente, para mostrar que el icono ha pasado a un estado seleccionado y para regresar el icono a su ubicación de reposo. Usa la animación de anular la selección con deslizar rápidamente cuando se anula la selección de un icono con el gesto de deslizar rápidamente.
En el vídeo siguiente se muestran las animaciones de seleccionar y anular selección de deslizar rápidamente:
Usa estas API para ejecutar esta animación en código JavaScript:
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 del sistema:
| Tipo de interfaz de usuario | Animación recomendada |
|---|---|
| Cuadro de diálogo | fadeIn y fadeOut |
| Control flotante | showPopup y hidePopup |
| Información sobre herramientas | fadeIn y fadeOut |
| Menú contextual | showPopup y hidePopup |
| Barra de comandos | showEdgeUI y hideEdgeUI |
| Panel de tareas o panel en el borde | showPanel y hidePanel |
| Contenido de cualquier contenedor de interfaz de usuario | enterContent y exitContent |
| Para controles o en casos en que no se apliquen otras animaciones | fadeIn y fadeOut |
Temas relacionados
Muestra de HTML de la biblioteca de animaciones