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. Selecciona   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

¿Quiere aprender las bases de la animación automática? Comience con este kit de interfaz de usuario que tiene las interacciones básicas, elementos de IU, ejemplos de arrastre, etc.

También puede usar más cosas, como archivos de muestra para probar la animación automática.

¿Quiere lograr un efecto de deslizamiento de YouTube sin la molestia de las líneas de tiempo y los fotogramas clave?

Conecte las mesas de trabajo y seleccione estas opciones en el Inspector de propiedades del prototipo:

  • Desencadenador: seleccione Arrastrar.
  • Acción: seleccione Animación automática.
  • Destino: seleccione la mesa de trabajo de destino para la transición de la animación.
  • Suavizado: seleccione una opción para crear efectos de suavizado. Por ejemplo, seleccione Suavizar entrada-salida si quiere que se suavice la entrada-salida de sus animaciones con respecto al prototipo.

Descargue los archivos de muestra y pruébelos o vea este vídeo para obtener más información.

Duración: 1 minuto.

¿Quiere aprender cómo crear un menú móvil animado con efecto de suavizado en la entrada? 

  1. Descargue los archivos de muestra.
  2. En el modo de prototipo, conecte el menú Hamburguesa a la mesa de trabajo home_expanded y seleccione las siguientes opciones en el Inspector de propiedades del prototipo:
  • Desencadenador: seleccione Tocar.
  • Acción: seleccione Animación automática.
  • Destino: seleccione la mesa de trabajo de destino para la transición de la animación.
  • Suavizado: seleccione el efecto Suavizar entrada.
  • Duración : establezca la duración en 0,8 segundos.

¿Quiere añadir animaciones avanzadas a los diseños? Mire este vídeo para trabajar con After Effects. 

Exportar desde Adobe XD a After-Effects (Duración: 1 minuto)

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

Logotipo de Adobe

Inicia sesión en tu cuenta