Puedes ajustar la velocidad y el retraso de tus animaciones haciendo clic en los bordes izquierdo o derecho de la barra de la línea de tiempo de tu capa y, después, manteniendo pulsado y arrastrando con el ratón para ajustar la duración de la animación y su punto de inicio o de fin.

Cuando una barra es demasiado estrecha para agarrarla con comodidad, pasa el ratón por encima o ponle el foco con el teclado: aparecerán unos tiradores circulares a izquierda y derecha y, si la barra mide 28px de ancho o menos, un pequeño asa de desplazamiento debajo de ella. Arrastra un punto para ajustar ese borde, o arrastra el asa inferior para mover la animación. Estos controles tienen zonas de agarre más grandes y se quedan dentro de la columna de la línea de tiempo. Las barras de duración hover solo muestran el tirador derecho. Estos controles usan el mismo ajuste magnético, los mismos atajos de teclado y el mismo historial de deshacer que la barra normal.

Puedes cambiar la posición de tu animación en la línea de tiempo haciendo clic en el centro de la barra de la línea de tiempo de tu capa y, después, manteniendo pulsado y arrastrando con el ratón hacia la izquierda o la derecha para cambiar dónde se coloca en la línea de tiempo.

Usa el teclado para introducir tiempos exactos. Si prefieres no usar la barra de tiempo, también puedes definir la velocidad y el retraso haciendo clic en el segundo valor de la capa de la línea de tiempo y escribiendo un nuevo número con el teclado (por ejemplo, 1.5) para fijar los segundos.

Ajustar los tiempos de varias capas

Selecciona dos o más capas y arrastra la barra de tiempo de entrada, salida o hover de una de las capas seleccionadas. Bannerify aplica el mismo movimiento a la pista de tiempo activa correspondiente de las demás capas seleccionadas y conserva sus desfases relativos.

Si el tiempo más temprano o el más tardío de la selección llega al borde de la línea de tiempo, Bannerify detiene el grupo en ese límite. Las capas bloqueadas, las pistas de tiempo inactivas y los tiempos de entrada controlados por animaciones reflejadas de Figma Motion no se modifican.

Cada arrastre completado se guarda como un paso del historial que se puede deshacer.

Hacer zoom y desplazarte por la línea de tiempo

Usa los botones + y − o el control deslizante de zoom que hay encima de la lista de capas para ver más o menos detalle. El porcentaje junto al control deslizante indica el nivel de zoom actual. Haz clic en Fit para volver al 100 % y mostrar de nuevo toda la línea de tiempo. El zoom cambia la vista, pero no los tiempos de las animaciones ni la duración exportada.

Pellizca para acercar o alejar con dos dedos en un trackpad mientras el puntero está sobre la regla o las pistas de tiempo. El momento que hay bajo el puntero se mantiene fijo mientras haces zoom, dentro del rango de zoom de 100–1000 %. Pellizcar solo cambia la vista y no tiene efecto mientras arrastras una barra de tiempo. También puedes usar Ctrl mientras te desplazas con la rueda del ratón.

Con el zoom ampliado, haz clic y mantén pulsado el tirador azul redondeado de la barra de desplazamiento, justo debajo de la regla, y arrástralo a la izquierda o a la derecha para moverte por la línea de tiempo. El tirador se resalta al pasar el ratón por encima y mientras lo pulsas. También puedes desplazarte en horizontal con un trackpad, o mantener pulsado Shift mientras te desplazas sobre una pista de tiempo. La regla y las barras de tiempo se mantienen alineadas en todos los banners.

Las barras de entrada y de salida muestran el tiempo que dura cada animación. El final de una barra de entrada marca cuándo termina la entrada; después, la capa puede seguir visible. Las barras hover controlan la duración del hover, con el inicio fijo.

Ajustar las barras con el teclado

Pon el foco en una barra o en uno de los tiradores de sus bordes y usa las teclas de flecha para moverla en pasos de 0,1 segundos. Mantén pulsado Shift para avanzar en pasos de 1 segundo. Al mover una barra se conserva su duración; al mover un borde cambia su inicio o su fin.

Pulsa Escape durante un arrastre para recuperar los tiempos que había antes, incluidas las capas seleccionadas que se movían con ella. Las barras de escena mueven a la vez las animaciones editables de la escena y conservan la duración de cada una.

Ajuste magnético y organización de la línea de tiempo

Abre Timeline Settings → Timeline Tools y activa Snap para alinear las barras de entrada y salida que arrastras, las barras de escena y sus bordes editables con el cabezal de reproducción, los marcadores, los límites del área de trabajo y los bordes de las animaciones cercanas. Mantén pulsado Alt (u Option en macOS) mientras arrastras para saltarte el ajuste magnético. Una guía muestra la alineación. El ajuste magnético usa el nivel de zoom actual, así que acerca el zoom para hacer ajustes más finos.

En la misma pestaña, usa el filtro de capas para mostrar All Layers, Selected Layers o Animated Layers. El filtro solo cambia la lista de la línea de tiempo; las filas ocultas se siguen reproduciendo y exportando con normalidad. En el mismo panel de ajustes, Collapse Groups pliega las listas de capas de las escenas y Expand Groups las vuelve a abrir. Selecciona capas y haz clic en Zoom To Selection para encuadrar sus rangos de tiempo activos, hasta el límite de zoom del 1000 %.

Abre Timeline Settings → Timeline Tools para añadir un marcador con nombre en la posición del cabezal de reproducción. Escribe un Marker Name y haz clic en Add At Playhead. Haz clic en el rombo de un marcador en la regla, o en su tiempo en el panel, para ir a ese punto. Puedes cambiar el nombre de los marcadores o quitarlos desde el panel. Los marcadores se conservan durante la sesión de edición actual y no afectan a las animaciones exportadas.

Guardar y reutilizar una secuencia de movimiento

Una secuencia de movimiento guarda las animaciones coordinadas de entrada, salida y hover de varias capas. Puedes aplicarla a capas con otros nombres mediante asignaciones explícitas.

1. Abre Timeline Settings → Motion Sequences y elige un Source Banner.
2. Si quieres, activa Selected Source Layers Only para usar solo las capas seleccionadas de ese banner.
3. Escribe un nombre para la secuencia y haz clic en Save Sequence. Las secuencias guardadas se conservan en los ajustes de Bannerify; la biblioteca admite hasta 50 secuencias. Al guardar, se selecciona la nueva secuencia y se actualizan las asignaciones de destino sugeridas, así que revísalas de nuevo antes de aplicarla.
4. Elige la secuencia guardada y selecciona uno o más banners de destino. Una secuencia guardada aporta las animaciones en lugar del banner de origen; Selected Source Layers Only se aplica al capturar o aplicar directamente desde el origen. También puedes aplicarla directamente desde el banner de origen sin guardarla antes.
5. Revisa las asignaciones de capas sugeridas. Los nombres coincidentes únicos se rellenan automáticamente; si hay nombres duplicados o sin coincidencia, tendrás que elegir una capa de destino. Desmarca una asignación o elige Skip / Choose A Layer para dejar ese destino sin cambios.
6. Si quieres, escribe un valor en Offset (Seconds) para desplazar los tiempos de entrada y salida. El desfase no cambia la duración del hover.
7. El panel de revisión explica si falta algún origen, destino o asignación de capa. Si las pistas asignadas ya coinciden, no hay nada que aplicar. Revisa los tiempos de antes y después y haz clic en Apply Motion Sequence. Toda la aplicación es una sola edición que se puede deshacer. Usa Undo, Redo o el panel History para volver a otro paso.

Las capas bloqueadas y las que no se pueden renderizar quedan excluidas. Las pistas de Figma Motion siguen vinculadas a sus nodos originales y no se copian ni se sobrescriben. Las animaciones específicas de texto necesitan capas de texto. Las pistas que se saldrían de la línea de tiempo se omiten y se indican en la vista previa; Bannerify no las acorta sin avisar. Las pistas inactivas existentes no se modifican, salvo que la secuencia aporte expresamente una animación para esa pista.

Para quitar una secuencia guardada, selecciónala en Saved Sequence y haz clic en el icono de la papelera. Quitar una entrada de la biblioteca no quita las animaciones que ya se han aplicado a tus banners.

Las secuencias reutilizan definiciones de animación que ya están disponibles en Bannerify, incluida tu biblioteca de animaciones personalizadas. Las animaciones personalizadas que faltan y las pistas incompatibles se indican y se omiten. Las animaciones Draw necesitan una capa SVG, y Split Text necesita una capa de texto apta, igual que en el selector de animaciones. La sincronización solo de tiempos mantiene la animación de destino y no aplica estas restricciones de la animación de origen. Las secuencias no empaquetan ilustraciones ni definiciones de animaciones personalizadas para pasarlas a la instalación de otro usuario.

Sincronizar los tiempos entre tamaños de banner

Usa Timeline Settings → Sync Timings para copiar los rangos de tiempo de un banner de origen a las capas correspondientes de otros banners cargados.

1. Elige el banner de origen y, si quieres, limítalo a las capas de origen seleccionadas.
2. Selecciona los banners de destino y revisa la asignación de cada capa.
3. Desmarca las asignaciones que deban conservar sus tiempos actuales. Elige destinos explícitos para los nombres de capa ambiguos o sin coincidencia.
4. Revisa los rangos de tiempo de antes y después y haz clic en Apply Timing Sync.

La sincronización de tiempos conserva las animaciones elegidas, los ajustes de bucle y los demás ajustes de capa de cada destino. Se omiten las pistas de destino inactivas, las capas bloqueadas y las pistas de Figma Motion. Cada aplicación es una sola edición que se puede deshacer desde el panel History. Es una copia puntual: las ediciones posteriores del origen no cambian automáticamente los destinos. Vuelve a aplicarla cuando quieras sincronizar otro cambio.