Animar grupos y capas anidadas por separado

Mueve, escala, gira o funde un grupo padre mientras sus capas hijas anidadas reproducen sus propias animaciones de Bannerify.

Tutorial en vídeo: Anima grupos y capas por separado con Group Motion
Sigue el tutorial paso a paso.

Bannerify puede animar a la vez un grupo padre y las capas que contiene. Por ejemplo, puedes mover un coche agrupado por el banner mientras giras sus ruedas por separado.

Qué necesitas ​

  • Un frame de Figma de nivel superior con el diseño de tu banner.
  • Una capa padre con una o más capas hijas dentro.
  • Nombres distintos para las capas hijas que quieras animar por separado.

Pasos ​

  1. En Figma, coloca las capas relacionadas dentro de un mismo grupo padre. Para animar un coche, podrías crear un grupo Car que contenga Body, Wheel Left y Wheel Right.
  2. Indica a Bannerify que expanda el grupo padre con cualquiera de estos métodos:
    • Añade [expand] al nombre de la capa padre, por ejemplo Car [expand].
    • Abre Bannerify, haz clic en el icono List en la parte superior de la línea de tiempo del banner y, después, en la flecha que hay junto a la capa padre.
  3. En el panel de capas anidadas, activa Keep Parent Animatable junto al padre expandido. Esta opción está desactivada de forma predeterminada, así que las configuraciones de capas anidadas que ya tenías mantienen su comportamiento anterior, en el que solo se animan las hijas.
  4. Cierra el panel de capas anidadas. Bannerify actualizará el banner y añadirá a la línea de tiempo las capas hijas expuestas.
  5. Comprueba que la línea de tiempo contiene las capas hijas y una fila aparte para el padre con la etiqueta (Group Motion). En este ejemplo, la fila del padre aparece como Car [expand] (Group Motion).
  6. Aplica el movimiento compartido a la fila Group Motion. Por ejemplo, aplica Slide In Left para que todo el coche entre en el banner.
  7. Aplica animaciones independientes a las filas de las hijas. Por ejemplo, aplica Rotate 360° a cada rueda.
  8. Haz clic en Play All Banners o usa el cursor de la línea de tiempo para previsualizar el resultado combinado.
  9. Exporta el banner como siempre. Las animaciones del padre y de las hijas se combinan en las exportaciones HTML, GIF, MP4, WebM y otros formatos multimedia basados en canvas.

Group Motion ​

Cuando Keep Parent Animatable está activado, Bannerify marca el padre como Animatable y añade una fila Group Motion aparte a la línea de tiempo. La fila del padre actúa como un envoltorio de movimiento alrededor de sus capas hijas expuestas. La traslación, la escala, la rotación, la opacidad y el recorte que apliques al padre se combinan con las animaciones aplicadas a cada hija.

Si Keep Parent Animatable está desactivado, las capas hijas siguen expandidas y se pueden animar, pero Bannerify no añade la fila Group Motion del padre. Bannerify recuerda esta opción para cada capa padre.

Usa nombres claros y coherentes para las capas hijas cuando la misma estructura aparezca en varios tamaños de banner. Así podrás usar Quick Select Layers para seleccionar las capas coincidentes y aplicar sus animaciones en bloque.

Mover una foto dentro de una máscara redondeada ​

Para que un grupo con máscara entre deslizándose en el banner mientras su foto se mueve por separado:

  1. En Figma, usa un rectángulo como máscara de todo el grupo. Mantén la máscara por debajo de todo el contenido que recorta. Puedes usar un radio distinto en cada esquina.
  2. Expande el grupo de la máscara en Bannerify y activa Keep Parent Animatable.
  3. Aplica Slide In Left a la fila Group Motion del grupo.
  4. Aplica una animación distinta, como Zoom Pan Right, a la fila de la foto. Aumenta su duración para que el desplazamiento sea más lento.
  5. Previsualiza y exporta el banner. La foto se mueve dentro del contorno redondeado mientras la animación del padre mueve todo el grupo.

Esto funciona con máscaras rectangulares sin rotar y con esquinas estándar, usando una máscara Alpha opaca o una máscara Vector. La máscara en sí no se convierte en una fila de animación. Mantén contraídos los grupos con varias máscaras, máscaras parciales entre capas hermanas, máscaras suaves o de luminancia, suavizado de esquinas, trazos o efectos, para que conserven su aspecto como una sola imagen.

Usar secciones de Figma ​

La misma configuración funciona cuando Use Figma sections as multi-scene banners está activado. Cada fila expuesta incluye su número de escena, y un padre con la opción activada sigue disponible como una fila Group Motion aparte dentro de esa escena.

Capas Slot de Figma ​

Bannerify también admite capas slot de Figma dentro de los frames de banner. Los contenedores slot se tratan como grupos de capas anidadas y aparecen expandidos la primera vez que Bannerify los carga, de modo que sus capas hijas están disponibles al momento en la línea de tiempo.

Si contraes a mano una capa Slot, Bannerify recuerda esa preferencia cuando se actualiza el banner.

Si faltan el grupo o las capas hijas ​

  • Asegúrate de que el banner sea un frame de Figma de nivel superior o esté dentro de una sección cargada en modo de varias escenas.
  • Comprueba que el padre tiene capas hijas y está expandido en Bannerify.
  • Si las capas hijas aparecen sin la fila Group Motion del padre, abre el panel de capas anidadas y activa Keep Parent Animatable junto al padre.
  • Si cambiaste el nombre del padre con [expand] después de cargar el banner, haz clic en Refresh Banner Layers.
  • Mantén visibles en Figma las capas hijas y asegúrate de que estén dentro del padre expandido.