Diretrizes para animações de arrastar

Applies to Windows and Windows Phone

Use animações de arrastar e soltar quando os usuários moverem objetos, como ao mover um item dentro de uma lista, ou ao largar um item em cima de outro.

O que fazer e o que não fazer

Animação de início de arraste

  • Use a animação de início de arraste quando o usuário começa a mover um objeto.
  • Inclua os objetos afetados na animação se, e somente se, houver outros objetos que possam ser afetados pela operação de arrastar e soltar.
  • Permita que o usuário mova o objeto um pouco antes de você disparar a animação de início de arraste. Isso impedirá que o usuário arraste acidentalmente um objeto que ele apenas pretendia tocar ou selecionar. O limite recomendado é de 20 pixels independentes de toque (TIPs).
  • Use a animação de término de arraste para concluir qualquer sequência de animação que começou com a animação de início de arraste. Isso reverte a alteração de tamanho no objeto arrastado que foi causada pela animação de início de arraste.

Animação de término de arraste

  • Use a animação de término de arraste quando o usuário solta um objeto arrastado.
  • Quando o usuário solta um objeto para reordenar uma lista, geralmente é necessário reposicionar os outros itens existentes na lista para liberar espaço para o item que está sendo solto. Para fazer isso, após a animação de término de arraste ser concluída, use a animação de lista para adicionar um item, mas sem nenhum item adicionado. O item que está sendo adicionado já está presente. Isso animará todos os elementos em suas posições adequadas.
  • Se a origem de arraste desaparecer depois de ser solta (por exemplo, quando o usuário solta um arquivo em um ícone de pasta para armazenar o arquivo nessa pasta), use a animação de fade out na origem de arraste.
  • Inclua os objetos afetados na animação de término de arraste se, e somente se, você incluiu esses mesmos objetos afetados na animação de início de arraste.
  • Não use a animação de término de arraste se você não usou primeiro a animação de início de arraste. Ambas as animações devem ser usadas para que os objetos retornem aos tamanhos originais depois que a sequência de arrastar e soltar for concluída.

Animação de arraste intermediário na entrada

  • Use a animação de arraste intermediário na entrada quando o usuário arrasta a origem de arraste para uma área de soltar em que ela pode ser solta entre dois outros objetos.
  • Escolha uma área de destino razoável para soltar. Essa área não deve ser muito pequena a ponto de dificultar que o usuário posicione a origem de arraste para a ação de soltar.
  • A distância recomendada para mover os objetos afetados para mostrar a área de soltar é de 40 pixels.
  • A direção recomendada para mover os objetos afetados de forma a mostrar a área de soltar é uns diretamente separados dos outros. Se o movimento será na vertical ou na horizontal depende da orientação dos objetos afetados entre si.
  • Não use a animação de arraste intermediário na entrada se não for possível soltar a origem de arraste em uma área. A animação de arraste intermediário na entrada informa ao usuário que a origem de arraste pode ser solta entre os objetos afetados.

Animação de arraste intermediário na saída

  • Use a animação de arraste intermediário na saída quando o usuário arrasta um objeto para fora de uma área em que ele poderia ter sido solto entre dois outros objetos.
  • Não use a animação de arraste intermediário na saída se você não usou primeiro a animação de arraste intermediário na entrada.

Tópicos relacionados

Para designers
Diretrizes para adicionar e excluir
Diretrizes para animações de transações de conteúdo
Diretrizes para animações de interface do usuário baseada em bordas
Diretrizes para animações de fade
Diretrizes para animações de transações de página
Diretrizes para animações de clique de ponteiro
Diretrizes para animações de reposição
Diretrizes para animações de interface do usuário pop-up
Diretrizes para animações de passagem do dedo
Para desenvolvedores (HTML)
Exemplo da biblioteca de animação em HTML
Animando sua interface do usuário
Animando sequências de arrastar e soltar
dragSourceEnd
dragSourceStart
dragBetweenLeave
dragBetweenEnter
Para desenvolvedores (XAML)
Animando sua interface do usuário
Animando sequências de arrastar e soltar
Guia de início rápido: Animando sua interface do usuário usando as animações da biblioteca
DragItemThemeAnimation
DropTargetItemThemeAnimation
DragOverThemeAnimation

 

 

Mostrar:
© 2014 Microsoft