Transiciones de pantalla

Puedes animar las transiciones entre pantallas: cómo desaparece una pantalla y aparece la nueva. Las animaciones disponibles dependen de la acción de navegación concreta:

  • Navigate to Screen: Abre los ajustes de acción y selecciona entre la gama completa de tipos de animación. Cada paso puede usar una transición diferente.
  • Navigate Next: Solo la animación push predeterminada.
  • Navigate back: Reproduce en sentido inverso y sin demora la transición que se usó al llegar a la pantalla actual. Si no había animación al llegar, tampoco la habrá al volver.
  • Close Flow: No tiene animación propia. Tu app es responsable de la transición entre el flow y la interfaz nativa.

Tipos de animación

El menú desplegable Animation de la acción Navigate to Screen tiene cinco opciones:

  • Push: La nueva pantalla entra desde un borde y empuja la pantalla actual hacia el otro lado.
  • Slide in: La nueva pantalla se desliza y aparece con fundido sobre la pantalla actual, que se mueve un poco en la misma dirección.
  • Slide out: La pantalla actual se desliza y desaparece con fundido, dejando al descubierto la nueva pantalla debajo.
  • Fade through: La nueva pantalla aparece con fundido sobre la pantalla actual.
  • None: La nueva pantalla reemplaza a la actual al instante.

Personalizar una transición

Solo puedes cambiar la animación en una acción Navigate to Screen.

  1. Selecciona el elemento que activa una acción de navegación.
  2. En el panel Interactions, haz clic en la acción de navegación.
  3. Si la acción es Navigate Next, selecciona Navigate to Screen en el desplegable Action. A continuación, selecciona la siguiente pantalla como Destination.
  4. Selecciona una animación en el desplegable Animation.
  5. Si la animación tiene opciones de Direction, Easing o Duration, ajústalas.
  6. Para mantener la pantalla actual visible antes de que comience la animación, introduce un valor en el campo Delay. Por ejemplo, usa un delay para mantener una pantalla de carga visible durante unos segundos. Las acciones listadas después de la navegación no esperan al delay.
  7. Para ver la transición en tus propias pantallas, prueba el flow en un dispositivo.