Compartir a través de


Animación de gestos de deslizar rápidamente (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 deslizar rápidamente cuando implementes el modelo de selección táctil de Windows 8 (llamado un deslizamiento rápido) para seleccionar 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 este vídeo se muestran las animaciones de seleccionar y anular selección de deslizar rápidamente:

Nota

El control ListView incluye la selección táctil y las animaciones de deslizar rápidamente, así que no tendrás que implementar estas animaciones al usar este control.

 

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 lo suficientemente lejos como 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

Para ver ejemplos de código que muestran el uso de las API de animación de deslizar rápidamente, consulta la Muestra de HTML de la biblioteca de animaciones.

Temas relacionados

Animación de la interfaz de usuario

swipeReveal

swipeSelect

swipeDeselect