Aprenda a usar los desencadenadores de tiempo para crear transiciones temporizadas.

Con los desencadenadores de tiempo, puede crear transiciones entre mesas de trabajo basadas en el retardo de tiempo y duración. 

Puede usar desencadenadores de tiempo en combinación con acciones para crear una gama de efectos como animaciones en bucle, barras de progreso y más. Este es un ejemplo de desencadenador de tiempo usado con Animación automática para crear un efecto de bucle.

Contadores de números animados utilizando transiciones de tiempo
Contadores de números animados utilizando transiciones temporizadas

Para crear una transición temporizada sencilla, realice los siguientes pasos:

  1. En el modo Prototipo, haga clic en el título de la mesa de trabajo de origen y conéctela a la mesa de trabajo de destino. 

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

    • Desencadenador: seleccione Tiempo. Si no ve la opción Tiempo, es posible que no haya seleccionado toda la mesa de trabajo y su título en el paso 1.  
    • Retardo: introduzca el tiempo de retardo para comenzar la transición. El rango aceptable es de 0,2 a 5 segundos.
    • Acción: seleccione Transición. También puede usar el desencadenador de tiempo con otras acciones, como Animación automática, Superposición y Reproducción de voz para crear múltiples efectos. Consulte los Ejemplos para saber cómo crear un efecto de animación en bucle.
    • Destino: muestra la mesa de trabajo de destino conectada en el paso 1; puede modificarla si es necesario.
    • Suavizado: seleccione el efecto de suavizado que desea aplicar en la mesa de trabajo de origen.
    • Duración: introduzca la duración del efecto de suavizado para indicar la prolongación en el tiempo del efecto de suavizado. El rango aceptable es de 0,2 a 5 segundos. 

    XD guarda sus atributos de la mesa de trabajo y los ofrece como predeterminados en más pantallas.

  3. Para obtener una vista previa de la transición temporizada, seleccione  

Ejemplos y archivos de muestra

Las animaciones de los contadores de números se utilizan para mostrar los números de una manera interesante y llamativa. ¿Quiere saber cómo usar transiciones temporizadas para crear un marcador en ejecución?

1. En el modo Prototipo, seleccione el título de la mesa de trabajo y defina las siguientes opciones:

  • Desencadenador: seleccione Tiempo.
  • Retardo: introduzca 0,8 segundos como tiempo de retardo.
  • Acción: seleccione Animación automática.
  • Suavizado: seleccione Facilitar entrada-salida.
  • Duración: introduzca 4 segundos como la duración.

2. Haga clic en  para obtener una vista previa del contador de números animados.

Descargue los archivos de muestra y vea este vídeo para probarlos.

Tiempo de visualización: 2 minutos y 47 segundos.


¿Desea utilizar la transición temporizada para crear una experiencia de incorporación para su aplicación? Vea este vídeo y use este kit de interfaz de usuario gratuito para crear un flujo de trabajo de incorporación.

Tiempo de visualización: 5 minutos y 2 segundos.

Experiencia de incorporación para una aplicación

También puede consultar la comunidad de asistencia técnica de XD para obtener más ejemplos y tutoriales.

Sugerencias y trucos

¿Sabía que puede combinar las transiciones temporales con la Animación automática y la Superposición para crear efectos interactivos? Vea este vídeo para obtener más información.

Tiempo de visualización: 8 minutos y 33 segundos.


Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea