Animación de interfaz de usuario en el borde (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 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. Estas animaciones se usan principalmente en controles personalizados. Los controles existentes como AppBar tienen animaciones de la biblioteca integradas para las interfaces de usuario de borde y el comportamiento animado se obtiene simplemente incluyendo los controles en 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.
.png "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 siguiente vídeo se incluyen animaciones que muestran y ocultan una interfaz de usuario en el borde:
En el siguiente vídeo se incluyen animaciones que muestran y ocultan paneles:
- Usa animaciones de interfaz de usuario de borde con interfaces de usuario de borde más pequeñas si tu intención es animar un control personalizado cuyo comportamiento se asemeje al de una AppBar o similar. También puedes definir una superficie o área de interfaz de usuario para errores y advertencias resultantes de las acciones en la aplicación. Si decides hacerlo, asegúrate de leer las directrices de controles flotantes; puede que la interfaz de usuario de borde no sea adecuada para tu escenario.
- 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 ventana de la aplicación como, por ejemplo, el teclado en pantalla.
.png "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 barra de la aplicación 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.
.png "Ilustración de la medida llamada desplazamiento")
Animaciones de borde en comportamientos de controles de Windows en tiempo de ejecución predeterminados
El método que se recomienda para incluir interfaces de usuario de borde es agregar una AppBar, lo que aplicará automáticamente todo el comportamiento interactivo y las transiciones que correspondan. Para más información, consulta el tema sobre cómo agregar barras de la aplicación.
Los objetos flotantes (Flyout, Menu o SettingsFlyout) también tienen animaciones de interfaz de usuario, si bien no son interfaces de usuario de borde realmente. Los objetos flotantes están relacionados con el contexto que hace que se muestren, y no con el borde de la ventana de la aplicación. Estos objetos flotantes podrían usarse para la interfaz de usuario que se invoca desde una AppBar pero, repetimos, no de trataría de una interfaz de usuario genuina. Para más información, consulta los temas sobre cómo agregar controles flotantes y y sobre la animación de la interfaz de usuario emergente.
Otros recursos
Si quieres ver ejemplos de código en los que se expone el uso de las API de animación de interfaz de usuario en el borde, consulta la muestra de HTML de la biblioteca de animaciones.
Para conocer los procedimientos recomendados de uso de estas animaciones, consulta Directrices y lista de comprobación para animaciones de interfaz de usuario en el borde.