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.
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.
Para crear una transición temporizada sencilla, realice los siguientes pasos:
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.
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 establezca 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. Hacer clic en para obtener una vista previa del contador animado.
Descargue los archivos de muestra y vea este vídeo para probarlos.
Tiempo de visualización: 2 minutos y 47 segundos.
¿Desea utilizar una 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.
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.
Recursos relacionados
Póngase en contacto con nosotros
Si tiene alguna pregunta que hacer o una idea que compartir, venga y participe en la Comunidad de Adobe XD. Nos gustaría conocer sus comentarios y ver sus creaciones.
Diseñar prototipos de experiencia de usuario con Adobe XD
Crea bocetos interactivos para sitios web y aplicaciones móviles.