Directrices para animaciones de arrastre

Applies to Windows and Windows Phone

Usa animaciones de arrastrar y colocar cuando los usuarios muevan objetos, por ejemplo, cuando mueven un objeto dentro de una lista o colocan un elemento encima de otro.

Qué hacer y qué no hacer

Animación de inicio de arrastre

  • Usa la animación de inicio de arrastre cuando el usuario empieza a mover un objeto.
  • Incluye los objetos afectados en la animación si, y solo si, existen otros objetos que puedan verse afectados por la operación de arrastrar y colocar.
  • Permite al usuario mover un poco el objeto antes de desencadenar la animación de inicio de arrastre. Esto evitará que el usuario arrastre accidentalmente un objeto que solo quería pulsar o seleccionar. El umbral recomendado es de 20 píxeles independientes táctiles (TIP).
  • Usa la animación de fin de arrastre para completar todas las secuencias de animaciones que empiecen con la animación de inicio de arrastre. Esto revierte el cambio de tamaño en el objeto arrastrado causado por la animación de inicio de arrastre.

Animación de fin de arrastre

  • Usa la animación de fin de arrastre cuando el usuario coloca un elemento arrastrado.
  • Cuando el usuario coloca un objeto para reordenar una lista, suele ser necesario volver a colocar los otros elementos de la lista para hacer sitio a dicho elemento. Para ello, una vez completada la animación de fin de arrastre, usa la animación de lista para agregar un elemento pero sin elemento para agregar. El elemento que se va a agregar ya está presente. De este modo se animarán todos los elementos en sus propias posiciones.
  • Si el origen de arrastre desaparecerá después de ser colocado (por ejemplo, cuando el usuario coloca un archivo sobre un icono de carpeta para almacenar el archivo en la carpeta), usa la animación de fundido de salida sobre el origen de arrastre.
  • Incluye los objetos afectados en la animación de fin de arrastre si, y solo si, incluiste los mismos objetos afectados en la animación de inicio de arrastre.
  • No uses la animación de fin de arrastre si no has usado antes la animación de inicio de arrastre. Tienes que usar ambas para que todos los objetos vuelvan a sus tamaños originales después de completar la secuencia de arrastrar.

Animación de entrada de arrastre entre

  • Usa la animación de entrada de arrastre entre cuando el usuario arrastra el origen de arrastre hacia un área de colocación donde se pueda colocar entre otros dos objetos.
  • Elige una zona de destino para soltar razonable. Esta zona no debe ser demasiado pequeña ya que podría resultarle difícil al usuario colocar el origen de arrastre.
  • La distancia recomendada para mover objetos afectados que muestran el área de colocación es de 40 píxeles.
  • La dirección recomendada para mover los objetos afectados y mostrar el área de colocación es apartarlos entre sí. El hecho de que sea en vertical u horizontal depende de la orientación de los objetos afectados entre sí.
  • No uses la animación de entrada de arrastre entre si el origen de arrastre no se puede colocar en un área. La animación de entrada de arrastre entre le indica al usuario que el origen de arrastre se puede colocar entre los objetos afectados.

Animación de salida de arrastre entre

  • Usa la animación de salida de arrastre entre cuando el usuario arrastra un objeto alejándolo de un área donde lo podría haber colocado entre otros dos objetos.
  • No uses la animación de salida de arrastre entre si no has usado antes la animación de entrada de arrastre entre.

Temas relacionados

Para diseñadores
Directrices para agregar y eliminar
Directrices para animaciones de transiciones de contenido
Directrices para animaciones de la interfaz de usuario basadas en el borde
Directrices para animaciones de atenuación
Directrices para animaciones de transiciones de página
Directrices para animaciones de los clics del puntero
Directrices para animaciones de reposición
Directrices para animaciones de la interfaz de usuario emergentes
Directrices para animaciones de deslizar rápidamente
Para desarrolladores (HTML)
Muestra de HTML de la biblioteca de animaciones
Animación de la interfaz de usuario
Animación de secuencias de arrastrar y colocar
dragSourceEnd
dragSourceStart
dragBetweenLeave
dragBetweenEnter
Para desarrolladores (XAML)
Animación de la interfaz de usuario
Animación de secuencias de arrastrar y colocar
Inicio rápido: animar la interfaz de usuario con animaciones de la biblioteca
DragItemThemeAnimation
DropTargetItemThemeAnimation
DragOverThemeAnimation

 

 

Mostrar:
© 2015 Microsoft