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

Animación de los gestos de deslizar rápidamente (aplicaciones de la Tienda Windows con JavaScript y HTML)

Usa las animaciones de deslizar rápidamente cuando implementes el modelo de selección táctil de Windows 8 (llamado un "deslizamiento rápido") para la selección de un elemento.

Este conjunto de animaciones se compone de las siguientes API. Las tres animaciones se deben usar cuando se implementa la interacción de deslizar rápidamente:

En el vídeo siguiente se muestra la animación de revelar con deslizar rápidamente:

|

En el vídeo siguiente se muestran las animaciones de seleccionar y anular selección de deslizar rápidamente:

|

Nota  El control ListView incluye las animaciones de selección táctil y de deslizar rápidamente.

Seleccionar con deslizar rápidamente

Usa la animación de seleccionar con deslizar rápidamente cuando el usuario arrastra un elemento que admite seleccionar con deslizar rápidamente. El usuario debe arrastrar el elemento lo suficientemente lejos para seleccionarlo y luego lo suelta. La animación de seleccionar con deslizar rápidamente agrega el indicador de selección (por lo general una marca de verificación) que muestra el estado "seleccionado" en el elemento y lo mueve nuevamente a su posición de reposo.

Ilustración que muestra los pasos en una animación de seleccionar con deslizar rápidamente: mover y activar

Para usar esta animación, debes conocer el indicador de selección que se mostrará y la dirección y distancia de la animación.

Anular la selección con deslizar rápidamente

Usa la animación de anular la selección con deslizar rápidamente cuando el usuario arrastra un elemento seleccionado. El usuario debe arrastrar el elemento lo suficientemente lejos para anular la selección y luego lo suelta. La animación de anular la selección con deslizar rápidamente quita el indicador de selección del elemento y lo vuelve a mover a su posición de reposo.

Ilustración que muestra los pasos en una animación de anular la selección con deslizar rápidamente: mover y desactivar

Para usar esta animación, debes conocer el indicador de selección que se ocultará y la dirección y distancia de la animación.

Revelar con deslizar rápidamente

Usa la animación de revelar con deslizar rápidamente para mostrar al usuario que el elemento admite la interacción de deslizar rápidamente. Cuando el usuario mantiene presionado un elemento que admite la interacción de deslizar rápidamente, la animación mueve el elemento hacia abajo y después de vuelta hacia arriba como indicio de que el elemento admite la interacción de deslizar rápidamente.

Ilustración que muestra los pasos en una animación de revelar con deslizar rápidamente: mover y desactivar

Para usar esta animación, debes conocer la dirección y distancia de la animación. La animación debe reproducirse dos veces de forma secuencial; una para mover el elemento en la dirección especificada y otra para moverlo de regreso a su posición de reposo.

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 deslizar rápidamente.

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

Temas relacionados

Animación de la interfaz de usuario
swipeReveal
swipeSelect
swipeDeselect

 

 

Mostrar:
© 2018 Microsoft