Mostrar y ocultar elementos a petición, con retraso o con animación

Usa las acciones Show element y Hide element para revelar u ocultar un elemento sin necesidad de visibilidad condicional.

  • El trigger determina qué hace que el elemento aparezca o desaparezca: un clic en un botón o un cambio de pantalla.
  • El ajuste de delay determina el tiempo que transcurre entre el trigger y el momento en que la acción surte efecto.
  • El ajuste de animation determina el efecto visual (por defecto: Fade in / out).
Note

Las transiciones entre pantallas tienen sus propias animaciones. Para pasar a los usuarios de una pantalla de splash o de carga sin necesidad de un toque, retrasa una acción Navigate to Screen.

Mostrar u ocultar un elemento

Por defecto, todos los elementos de una pantalla aparecen al abrirse y permanecen visibles hasta que el usuario la abandona. Con las acciones Show element y Hide element, controlas cuándo y cómo aparece o desaparece un elemento. Por ejemplo, puedes:

  • Mostrar un botón de cierre unos segundos después de que se abra la pantalla.
  • Hacer que un titular aparezca con fundido en lugar de mostrarse de golpe.
  • Ocultar una pista cuando el usuario toca su icono de cierre.

Desencadenantes

Cada desencadenante se activa en un momento diferente:

MomentoDesencadenanteAñádelo a
La pantalla se abreOn Screen AppearCualquier elemento de la pantalla, incluso el que muestra la acción
El usuario pulsaOn TapCualquier elemento visible que el usuario pulse, como un botón
Un vídeo terminaOn Playback FinishedEl vídeo
Un temporizador de cuenta atrás terminaOn Timer EndEl temporizador, con su Visibility establecida en Show para que el desencadenante se active
El usuario modifica o envía un campo de entradaOn Changed o On SubmitEl campo de entrada

Configuración

Los pasos son los mismos para cada trigger:

  1. Selecciona en la tabla el elemento que necesites en ese momento, como un botón.
  2. En el panel Interactions, añade el trigger con una acción Show element o Hide element.
  3. En el desplegable Elements, selecciona qué mostrar u ocultar.
  4. Selecciona cada elemento del paso 3 y abre el panel Design. Si la acción lo muestra, establece Visibility en Hide; si la acción lo oculta, establece Visibility en Show. Si varias acciones lo modifican, aplica esta regla a la que se ejecute primero. Una acción Show element no tiene efecto sobre lo que ya es visible. Para editar un elemento oculto más adelante, selecciónalo en el panel Layers: el canvas no lo muestra.
  5. Para ver el resultado, prueba el flow en un dispositivo. El canvas no ejecuta acciones. En el dispositivo, un elemento oculto no ocupa espacio, por lo que el contenido a su alrededor se desplaza cuando aparece y cuando desaparece.

Sigue los pasos anteriores para configurar la acción Show element o Hide element. Luego, cambia sus ajustes:

  • Delay — mostrar un elemento unos segundos después de que se abra la pantalla
  • Animation — animar un elemento mientras aparece o desaparece

Mostrar un elemento unos segundos después de abrir la pantalla

Edit action window for Show element with Button selected, Fade in with Ease out, a 300 ms duration, an animation preview, and no delay

El campo Delay define cuánto tiempo espera la acción después de que se active su trigger (hasta 5000 ms). Por ejemplo, para mostrar un botón de cierre tres segundos después de abrir la pantalla, usa el trigger On Screen Appear y establece Delay en 3000 ms. Usa segundos enteros: en iOS, el retraso se redondea al segundo entero superior.

Para ver el retraso, prueba el flow en un dispositivo: la ventana Edit action no lo previsualiza.

Para un retraso superior a 5 segundos, muestra el elemento cuando termina un temporizador de cuenta atrás.

Anima un elemento al aparecer o desaparecer

La ventana Edit action tiene las siguientes opciones de animación:

ConfiguraciónQué cambia
AnimationCómo aparece o desaparece el elemento: None, Fade in o Fade out, Rise o Pop
EasingCómo cambia la velocidad durante la animación: Linear, Ease in, Ease out o Ease in-out
DurationCuánto dura la animación, hasta 5000 ms
DistancePara Rise: qué distancia recorre el elemento, 1–200 px
Start scalePara Pop: el tamaño mínimo del elemento, entre 0.1 y 0.99 de su tamaño completo

La ventana Edit action reproduce en bucle una vista previa de la animación. Los usuarios solo pueden pulsar un elemento después de que haya aparecido por completo, así que mantén la Duration corta en el caso de un botón.

Una acción que apunta a varios elementos los anima todos a la vez. Para animarlos uno tras otro, añade una acción por elemento, cada una con un Delay mayor que la anterior.

Cuándo no aplican la animación y el retraso

En tres casos, Animation y Delay no tienen efecto:

  • Un elemento con visibilidad condicional: Las acciones que apuntan al elemento lo muestran u ocultan de inmediato. Para animarlo o retrasarlo, elimina la condición: establece Visibility en Show o Hide.
  • Un componente reutilizable: Un elemento dentro de un componente, o cualquier destino de una acción dentro de uno, aparece o desaparece de inmediato.
  • Una hoja inferior: La hoja se abre y se cierra con su propio movimiento, sin retraso.

En los tres casos, la ventana Edit action sigue mostrando Animation y Delay, y no aparece ninguna advertencia cuando publicas.