Animando gestos de passar o dedo (aplicativos da Windows Store que usam JavaScript e HTML)
Use animações de passagem do dedo ao implementar o modelo de seleção por toque do Windows 8 (chamado "passar o dedo") para selecionar 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 Windows ListView inclui seleções por toque e as animações de passagem do dedo.
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.
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 arrastar um item atualmente selecionado. O usuário deve arrastar o item longe o suficiente para anular sua seleção e, em seguida, deve soltá-lo. 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.
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.
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
Veja o Exemplo de uso das animações da Biblioteca de Animação para obter exemplos de código que demonstram o uso das APIs de animação de passagem do dedo.
Veja Diretrizes e lista de verificação para animações de passagem do dedo para obter as práticas recomendadas de design no uso dessas animações.
Tópicos relacionados
