Idioma: HTML | XAML

Animando gestos de passar o dedo (HTML)

Applies to Windows only

Use animações de passagem do dedo ao implementar o modelo de seleção por toque do Windows 8 (chamado de passar o dedo) para a seleção de um item.

Esse conjunto de animações consiste nas seguintes APIs: Todas essas três animações precisam ser usadas ao implementar a interação de passagem do dedo:

O vídeo a seguir demonstra a animação de revelação de passagem do dedo:

O vídeo a seguir demonstra as animações de seleção/anulação da seleção por passagem do dedo:

Observação  O controle ListView inclui seleção de toque e animações de passagem do dedo, portanto você não precisa implementar essas animações quando usar esse controle.

Seleção por passagem do dedo

Use a animação de seleção por passagem do dedo quando o usuário arrastar um item que oferece suporte para esse tipo de seleção. O usuário deve arrastar o item longe o suficiente para selecioná-lo e, em seguida, deve soltá-lo. A animação da seleção por passagem do dedo adiciona o indicador de seleção (geralmente uma marca de seleção) que mostra o estado "selecionado" no item e move o item de volta à sua posição de repouso.

Ilustração que mostra as etapas em uma animação da seleção por passagem do dedo: mover e verificar

Para usar essa animação, você precisa saber qual é o indicador de seleção que será mostrado, bem como a direção e a distância da animação.

Anulação da seleção por passagem do dedo

Use a animação de anulação da seleção por passagem do dedo quando o usuário arrastou um item selecionado no momento longe o suficiente para anular sua seleção e solta o item. A animação da anulação da seleção por passagem do dedo remove o indicador de seleção do item e o move de volta à sua posição de repouso.

Ilustração que mostra as etapas em uma animação da anulação da seleção por passagem do dedo: mover e desmarcar

Para usar essa animação, você precisa saber qual é o indicador de seleção que será oculto, bem como a direção e a distância da animação.

Revelação de passagem do dedo

Use a animação de revelação de passagem do dedo para mostrar ao usuário que o item dá suporte à interação por passagem do dedo. Quando o usuário pressiona e segura um item que dá suporte à interação por passagem do dedo, a animação move o item para baixo e de volta para cima como uma dica de que o item dá suporte a essa interação.

Ilustração que mostra as etapas em uma animação de revelação de passagem do dedo: mover e desmarcar

Para usar essa animação, você precisa saber qual é a direção e a distância da animação. A animação precisa ser executada duas vezes em sequência; uma vez para mover o item na direção especificada, e mais uma vez para mover o item de volta para a posição de repouso.

Outros recursos

Para obter exemplos de código que demonstram o uso de APIs de animação de passagem do dedo, consulte o Exemplo de biblioteca de animação HTML.

Para obter práticas recomendadas no uso dessas animações, consulte Diretrizes e lista de verificação para animações de passagem do dedo.

Tópicos relacionados

Animando sua interface do usuário
swipeReveal
swipeSelect
swipeDeselect

 

 

Mostrar:
© 2014 Microsoft