Animaciones en el Designer

La mayoría de los elementos de un diseño pueden moverse en la pantalla. Un título entra deslizándose, un precio late suavemente, una foto flota. Lo configuras en el Designer para cada elemento y tus pantallas lo reproducen automáticamente.

Poner un elemento en movimiento

  1. Abre tu diseño en el Designer y selecciona el elemento.
  2. Haz clic en Animar en la barra que hay sobre el lienzo. Si la ventana es estrecha, lo encontrarás en el menú del botón de los tres puntos, al final de esa barra.
  3. Elige una animación en Entrada, en Continua o en las dos.

Para quitar una animación, vuelve a ponerla en Ninguna.

Entrada

Una animación de entrada se reproduce cuando el diseño aparece en la pantalla. Puedes elegir entre:

  • Aparecer
  • Deslizar desde la izquierda o Deslizar desde la derecha
  • Deslizar hacia arriba o Deslizar hacia abajo
  • Acercar
  • Rebotar entrando

Tú decides cuánto dura la animación y cuánto espera antes de empezar. Si aumentas un poco la espera de un elemento a otro, por ejemplo primero el título y después los precios, tu diseño se va formando paso a paso.

Continua

Una animación continua sigue en marcha mientras el diseño esté en la pantalla. Puedes elegir entre:

  • Pulsar: el elemento crece y se encoge un poco.
  • Rotar: el elemento gira sobre sí mismo.
  • Rebotar: el elemento salta arriba y abajo.
  • Flotar: el elemento sube y baja despacio, como flotando.

Con los controles deslizantes de velocidad e intensidad eliges lo rápido y lo marcado que es el movimiento. Un elemento puede tener a la vez una animación de entrada y una continua: la continua empieza cuando termina la de entrada.

Previsualizar tus animaciones

Haz clic en el botón Vista previa de la barra superior del Designer, justo antes del botón Descargar, para ver cómo se mueve tu diseño. Si el diseño solo tiene animaciones de entrada, la previsualización se cierra sola cuando terminan.

En tus pantallas

  • En una lista de reproducción, la entrada se reproduce cada vez que el diseño vuelve a aparecer.
  • Cuando el diseño es lo único que hay en una pantalla, la entrada se reproduce una vez al cargarse y las animaciones continuas siguen en marcha.

Conviene saber

  • Las apps, las listas de reproducción y los códigos QR dentro de un diseño no se pueden animar.
  • Un texto que se desplaza por la pantalla no es una animación. Añade a tu diseño la app Cinta de texto desde el panel Apps, en el menú de la izquierda del Designer. Consulta Apps de información: tiempo, reloj, noticias, tickers y más.
  • El Asistente de IA puede configurar las animaciones por ti mientras tu diseño está abierto en el Designer. Pídele, por ejemplo: «haz que los precios pulsen» o «haz que el título entre deslizándose».

Consejo

El movimiento llama la atención. Anima solo uno o dos elementos, como la oferta del día, y deja el resto quieto. Así la pantalla se mantiene tranquila y se lee bien desde lejos.

Consulta también Crear un diseño en el Designer.

© screenbird.app