Animaciones de atenuación (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 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 funciones:

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 puedes usar la animación de fundido de entrada para realizar la transición desde un elemento de marcador de posición al elemento real a medida que el contenido se carga de forma dinámica, o bien para mostrar información sobre herramientas o un control de diálogo personalizados.

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 los cuales 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

Para ver ejemplos de código que muestran el uso de las funciones de animación de atenuación, consulta la muestra de HTML de la biblioteca de animaciones.

Para ver los procedimientos recomendados de diseño para el uso de estas animaciones, consulta Directrices y lista de comprobación para animaciones de atenuación.

Temas relacionados

Animación de la interfaz de usuario

fadeIn

fadeOut

crossFade