Animación de interfaz de usuario emergente (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
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. Estas animaciones se usan principalmente en controles personalizados. Los controles Flyout y Menu incluyen las animaciones de elementos emergentes. Si usas estos controles en la aplicación, no es necesario que ofrezcas esas animaciones.
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:
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 muestra 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 navegación 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 ejemplos de código sobre el uso de las API de animaciones de interfaz de usuario emergentes en la Muestra de HTML de la biblioteca de animaciones.
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