Guía del usuario Cancelar

Animar prototipos

Descubra cómo crear microinteracciones usando la animación automática.

Con la animación automática puede crear transiciones inmersivas para visualizar el movimiento de contenido a través de las mesas de trabajo.

En combinación con las posibilidades de los desencadenadores de Arrastrar y Tiempo, le ayudará a crear una amplia gama de efectos, como un deslizamiento y arrastre de YouTube, para contar una mejor historia de prototipo.

Interacciones de ondulación en un sitio web
Efecto de ondulación en un sitio web

Efecto de deslizamiento y arrastre en un dispositivo táctil
Efecto de deslizamiento y arrastre en un dispositivo táctil

Para crear un prototipo animado, siga estos pasos:

  1. Antes de comenzar, use estas sencillas reglas para conocer cómo se manejan los objetos durante la animación:

    • Si un objeto no está presente en la mesa de trabajo de destino, aparece progresivamente.
    • Si un objeto no está presente en la mesa de trabajo de origen, desaparece progresivamente.
    • Si un objeto tiene una coincidencia tanto en términos de su nombre de capa como de su grupo, los atributos se animan. Para obtener una lista completa de las propiedades y transiciones compatibles, lea Propiedades de objetos.
    • Si desea crear un prototipo con efecto de desplazamiento horizontal o vertical, utilice grupos de desplazamiento.
  2. Cablee las mesas de trabajo en el modo de prototipo. 

  3. Haga clic en el conector para ver el panel de interacción que aparece en Inspector de propiedades y configure las siguientes opciones:

    • Desencadenador: seleccione una opción para activar una animación. Por ejemplo, para simular una experiencia de tarjeta táctil, seleccione Tocar.
    • Acción: seleccione Animación automática. Ahora puede asignar dos acciones en un solo desencadenante, como Tocar. Para hacerlo, establezca el primer botón Acción + en el Inspector de propiedades  en TransiciónAnimación automáticaSuperposiciónDesplazarse aMesa de trabajo anterior y establezca el segundo botón Acción + en acción no transitoria como Reproducción de audio o Reproducción de voz. Tenga en cuenta que si selecciona Reproducción de audio o de voz como la primera acción, no puede agregar una segunda acción
    • Destino: seleccione la mesa de trabajo de destino para la transición de la animación.
    • Suavizado: seleccione una opción para simular efectos de suavizado. Por ejemplo, seleccione Suavizar salida si quiere que se suavice la salida de sus animaciones con respecto al prototipo.
    Flujo de trabajo de animación automática
    Flujo de trabajo de animación automática

    A. Seleccionar el tipo de desencadenador B. Seleccionar una acción para la animación automática C. Seleccionar la mesa de trabajo de destino D. Seleccionar los efectos de suavizado 

  4. Para definir más interacción para un objeto, seleccione el objeto con una interacción ya definida y haga clic en el botón + en la mesa de trabajo; como alternativa, también puede hacer clic en + en el Inspector de propiedad.

     Recuerde que puede aplicar los desencadenadores de Tocar, Arrastrar, Pasar por encimaHora una vez, y los de VozTeclas y mando de juego muchas veces. 

  5. Seleccione   Previsualizar las animaciones en navegadores compatibles

     Recuerde que XD no admite el desplazamiento mientras se realiza una vista previa de las mesas de trabajo animadas automáticamente.

Ejemplos y archivos de muestra

Más información

Para obtener más información sobre la animación automática en XD, vea este vídeo.
Duración: 6 minutos

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?