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

Animaciones de atenuación (aplicaciones de la Tienda Windows con JavaScript y HTML)

Usa animaciones de atenuación para hacer aparecer o desaparecer los elementos de la vista. Existen tres tipos de animaciones de atenuación: de entrada, de salida y encadenado. Cada animación está diseñada para un escenario diferente.

Este conjunto de animaciones se compone de las siguientes API:

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:

|

En el vídeo siguiente se muestra la animación de encadenado:

|

Fundido de entrada

Usa la animación de fundido de entrada para hacer aparecer un elemento o conjunto de elementos. Un ejemplo de animación de fundido de entrada se puede observar en la barra de la aplicación, donde pueden aparecer nuevos controles como resultado de la interacción del usuario. También podrías usar la animación de fundido de entrada para realizar una transición desde un elemento marcador de posición al elemento final, a medida que el contenido se carga dinámicamente. O bien, para mostrar un control personalizado de información sobre herramientas o cuadro de diálogo.

Ten en cuenta que los diálogos de control y la información sobre herramientas de Windows incluyen las animaciones de fundido de entrada y de salida.

Fundido de salida

Usa la animación de fundido de salida para hacer desaparecer un elemento o conjunto de elementos. Un ejemplo de animaciones de fundido de salida se puede observar en los controles transitorios, tales como la barra de desplazamiento o el indicador panorámico, que realizan un fundido de salida después de que haya transcurrido un período de tiempo y no se haya detectado ninguna entrada de usuario.

Encadenado

Usa la animación de encadenado para realizar un reemplazo en contexto de un elemento existente con un elemento entrante. La animación hace desaparecer los elementos existentes a medida que hace aparecer los elementos de reemplazo en el mismo espacio.

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 atenuación.

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

Temas relacionados

Animación de la interfaz de usuario
fadeIn
fadeOut
crossFade

 

 

Mostrar:
© 2018 Microsoft