Guía del usuario Cancelar

Crear transiciones temporizadas

Buscar

Última actualización el 21 feb. 2023

Guía del usuario de Adobe XD
Introducción
Diseño
1. Mesas de trabajo, guías y capas
2. Formas, objetos y trazados
3. Texto y fuentes
  1. Trabajar con herramientas de dibujo y texto
  2. Fuentes en Adobe XD
4. Componentes y estados
5. Máscaras y efectos
6. Maquetación
7. Vídeos y animaciones de Lottie
Prototipo
Compartir, exportar y revisar
Sistemas de diseño
Documentos en la nube
Integraciones y complementos
XD para iOS y Android
1. Vista previa en dispositivos móviles
2. Preguntas frecuentes de Adobe XD para dispositivos móviles
Solución de problemas
1. Problemas conocidos y resueltos
  1. Problemas conocidos
  2. Problemas resueltos
2. Instalación y actualizaciones
3. Inicio y cierre inesperado
4. Documentos en la nube y bibliotecas Creative Cloud
5. Crear prototipos, publicar y revisar
6. Importar, exportar y usar otras aplicaciones

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:

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

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.

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.