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

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

Usa las animaciones de interfaz de usuario en el borde para mostrar u ocultar una interfaz de usuario que se origina en el borde de la pantalla. Tanto el usuario como la aplicación pueden hacer que aparezca la interfaz de usuario. La interfaz de usuario puede superponerse a la aplicación o formar parte de la superficie de la aplicación principal. Si la interfaz de usuario forma parte de la superficie de la aplicación principal, puede que tengas que cambiar el tamaño del resto de la aplicación para hacer espacio para cuando aparezca la nueva interfaz de usuario.

Diagrama básico de un elemento en el borde

Este conjunto de animaciones se compone de las siguientes API:

Existen dos tipos de elementos en el borde, cada uno con su propio grupo de API de animación: UI de borde y UI de panel.

En el vídeo siguiente se incluyen animaciones que muestran y ocultan una interfaz de usuario en el borde:

|

En el vídeo siguiente se incluyen animaciones que muestran u ocultan paneles:

|

  • Usa animaciones de interfaz de usuario de borde con interfaz de usuario en el borde más pequeñas como, por ejemplo, la barra de comandos de la aplicación o una superficie de interfaz de usuario para errores y advertencias.
  • Usa animaciones de interfaz de usuario de panel con interfaz de usuario en el borde que suelen ser mayores y cubren una parte más amplia de la pantalla como, por ejemplo, el teclado en pantalla.

Ilustración que muestra la diferencia en tamaño entre una interfaz de usuario de borde y una interfaz de usuario de panel

Importante  El control de la app bar proporcionado por Windows incluye las animaciones de interfaz de usuario de borde. Si usas ese control, no es necesario que ofrezcas esas animaciones.

Para usar estas animaciones, has de conocer lo siguiente:

  • El objeto que se va a deslizar hacia adentro o hacia afuera.
  • La distancia (desplazamiento) de deslizamiento del objeto. Esta será la distancia final entre el borde interno de la interfaz de usuario y el borde de la pantalla.

    Ilustración de la medida llamada desplazamiento

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 en el borde.

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

Temas relacionados

Animación de la interfaz de usuario
showEdgeUI
hideEdgeUI
showPanel
hidePanel

 

 

Mostrar:
© 2018 Microsoft