Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Animación de la interfaz de usuario emergente (aplicaciones de la Tienda Windows con JavaScript y HTML)

Usa las animaciones de elementos emergentes para mostrar y ocultar la interfaz de usuario emergente, que incluye los menús contextuales y los controles flotantes. Los elementos emergentes son contenedores que aparecen sobre el contenido de la aplicación y desaparecen si el usuario pulsa o hace clic fuera del elemento emergente.

Este conjunto de animaciones se compone de las siguientes API:

En el vídeo siguiente se incluyen estas animaciones que muestran y ocultan la interfaz de usuario emergente:

|

Nota  El menú contextual de Windows y los controles flotantes incluyen las animaciones de elementos emergentes. Si usas estos controles en la aplicación, no es necesario que ofrezcas esas animaciones.

La animación showPopup incluye una traslación, que es un movimiento vertical de una posición inicial a la posición final a medida que el elemento emergente realiza un fundido de entrada. La aplicación especifica la distancia de la traslación y su dirección. En la mayoría de los casos, la traslación debe ser de 50 píxeles, y moverse hacia arriba. Sin embargo, si el elemento emergente se mostrará debajo del elemento de la interfaz de usuario que desencadenó el elemento emergente, la traslación debe ser de 50 píxeles desplazándose hacia abajo. Por ejemplo, esta traslación hacia abajo se aplicaría a un control flotante que se desencadenó en una barra de la aplicación superior o en un encabezado de la aplicación. Esto se hace para que el usuario tenga un vínculo visual entre el elemento emergente y su elemento desencadenante.

Para usar las animaciones de elementos emergentes, deberás saber cuál es el objeto que aparecerá o desaparecerá y, en el caso de showPopup, desde dónde se desplazará el objeto mientras aparece.

Otros recursos

Consulta el ejemplo sobre el uso de las animaciones de la Biblioteca de animaciones para obtener ejemplos de códigos que muestran el uso de las API de animaciones de interfaz de usuario emergentes.

Consulta Directrices y lista de comprobación para animaciones de interfaz de usuario emergentes para conocer los procedimientos recomendados de diseño para el uso de estas animaciones.

Temas relacionados

Animación de la interfaz de usuario
Animación de interfaz de usuario en el borde
showPopup
hidePopup

 

 

Mostrar:
© 2018 Microsoft