Para ajustar a velocidade e o atraso das animações, clique nas bordas esquerda ou direita da barra de tempo da camada e segure e arraste com o mouse para mudar a duração da animação e o ponto de início ou fim.
Quando uma barra for estreita demais para segurar com facilidade, passe o mouse sobre ela ou coloque-a em foco pelo teclado para mostrar as alças circulares da esquerda e da direita e, se a barra tiver 28px de largura ou menos, uma pequena alça de movimento abaixo dela. Arraste um ponto para ajustar aquela borda ou arraste a alça de baixo para mover a animação. Esses controles têm áreas de clique maiores e ficam dentro da coluna da linha do tempo. As barras de duração do hover mostram apenas a alça da direita. Esses controles usam o mesmo encaixe, os mesmos atalhos de teclado e o mesmo histórico de desfazer que a barra normal.
Para mudar a posição da animação na linha do tempo, clique no meio da barra de tempo da camada e segure e arraste com o mouse para a esquerda ou para a direita.
Use o teclado para inserir tempos precisos. Se preferir não usar a barra de tempo, você também pode definir os valores de velocidade e atraso clicando no segundo valor da camada na linha do tempo e digitando um novo número (por exemplo, 1.5) para definir a quantidade de segundos.
Ajustar os tempos de várias camadas
Selecione duas ou mais camadas e arraste a barra de tempo de entrada, saída ou hover de uma das camadas selecionadas. O Bannerify aplica o mesmo movimento à faixa de tempo ativa correspondente das outras camadas selecionadas, mantendo os deslocamentos relativos entre elas.
Se o tempo mais cedo ou mais tarde entre os selecionados chegar à borda da linha do tempo, o Bannerify para o grupo nesse limite. Camadas bloqueadas, faixas de tempo inativas e tempos de entrada controlados por animações espelhadas do Figma Motion não são alterados.
Cada arraste concluído é salvo como uma etapa do histórico que pode ser desfeita.
Aplicar zoom e rolar a linha do tempo
Use os botões + e − ou o controle deslizante de zoom acima da lista de camadas para ver mais ou menos detalhes. A porcentagem ao lado do controle deslizante mostra o nível de zoom atual. Clique em Fit para voltar a 100% e mostrar a linha do tempo inteira de novo. O zoom muda apenas a visualização, sem alterar os tempos das animações nem a duração exportada.
Faça o gesto de pinça com dois dedos no trackpad, para aproximar ou afastar, com o ponteiro sobre a régua ou as faixas de tempo. O tempo sob o ponteiro fica fixo enquanto você aplica o zoom, dentro do intervalo de 100–1000%. O gesto de pinça muda apenas a visualização e é ignorado enquanto você arrasta uma barra de tempo. Você também pode usar Ctrl enquanto rola a roda do mouse.
Com o zoom aplicado, clique e segure a alça azul arredondada da barra de rolagem logo abaixo da régua e arraste-a para a esquerda ou para a direita para se mover pela linha do tempo. A alça fica destacada quando você passa o mouse sobre ela e enquanto está pressionada. Você também pode rolar na horizontal com o trackpad ou segurar Shift enquanto rola sobre uma faixa de tempo. A régua e as barras de tempo ficam alinhadas em todos os banners.
As barras de entrada e saída mostram o tempo de reprodução de cada animação. O fim de uma barra de entrada marca quando a entrada termina; a camada pode continuar visível depois disso. As barras de hover controlam a duração do hover, e o início delas é fixo.
Ajustar as barras com o teclado
Coloque o foco em uma barra ou em uma das alças das bordas e use as setas do teclado para movê-la em passos de 0,1 segundo. Segure Shift para passos de 1 segundo. Mover uma barra mantém a duração; mover uma borda muda o início ou o fim.
Pressione Escape durante um arraste para restaurar os tempos de antes do arraste, incluindo as camadas selecionadas que se moviam junto. As barras de cena movem juntas as animações editáveis da cena, mantendo a duração de cada uma.
Encaixar e organizar a linha do tempo
Abra Timeline Settings → Timeline Tools e ative Snap para alinhar as barras de entrada e saída arrastadas, as barras de cena e suas bordas editáveis ao cursor de reprodução, aos marcadores, aos limites da área de trabalho e às bordas de animações próximas. Segure Alt (ou Option no macOS) enquanto arrasta para ignorar o encaixe. Uma guia mostra o alinhamento. O encaixe usa o nível de zoom atual, então aplique mais zoom para ajustes mais finos.
Na mesma aba, use o filtro de camadas para mostrar All Layers, Selected Layers ou Animated Layers. O filtro muda apenas a lista da linha do tempo; as linhas ocultas continuam sendo reproduzidas e exportadas normalmente. No mesmo painel de configurações, Collapse Groups recolhe as listas de camadas das cenas e Expand Groups as abre de novo. Selecione camadas e clique em Zoom To Selection para enquadrar os intervalos de tempo ativos delas, até o limite de zoom de 1000%.
Abra Timeline Settings → Timeline Tools para adicionar um marcador com nome na posição do cursor de reprodução. Digite um Marker Name e clique em Add At Playhead. Clique no losango de um marcador na régua, ou no tempo dele no painel, para ir até esse ponto. Você pode renomear ou remover marcadores no painel. Os marcadores ficam guardados durante a sessão de edição atual e não afetam as animações exportadas.
Salvar e reutilizar uma sequência de movimento
Uma sequência de movimento guarda as animações coordenadas de entrada, saída e hover de várias camadas. Ela pode ser aplicada a camadas com nomes diferentes usando mapeamentos explícitos.
- Abra Timeline Settings → Motion Sequences e escolha um Source Banner.
- Se quiser, ative Selected Source Layers Only para usar apenas as camadas selecionadas nesse banner.
- Digite um nome para a sequência e clique em Save Sequence. As sequências salvas ficam nas configurações do Bannerify; a biblioteca comporta até 50 sequências. Ao salvar, a nova sequência é selecionada e os mapeamentos de destino sugeridos são atualizados, então revise-os de novo antes de aplicar.
- Escolha a sequência salva e selecione um ou mais banners de destino. Uma sequência salva fornece as animações no lugar do banner de origem; Selected Source Layers Only se aplica quando você captura ou aplica direto da origem. Você também pode aplicar direto do banner de origem sem salvar antes.
- Revise os mapeamentos de camadas sugeridos. Nomes correspondentes únicos são preenchidos automaticamente; para nomes duplicados ou sem correspondência, você precisa escolher uma camada de destino. Desmarque um mapeamento ou escolha Skip / Choose A Layer para deixar esse destino sem alterações.
- Se quiser, digite um valor em Offset (Seconds) para deslocar os tempos de entrada e saída. A duração do hover não muda com o deslocamento.
- O painel de revisão explica qualquer origem, destino ou mapeamento de camada que esteja faltando. Se as faixas mapeadas já forem iguais, não há nada para aplicar. Revise os tempos antes e depois e clique em Apply Motion Sequence. A aplicação inteira é uma única edição que pode ser desfeita. Use Undo, Redo ou o painel History para voltar a outra etapa.
Camadas bloqueadas e não renderizáveis ficam de fora. As faixas do Figma Motion continuam ligadas aos nós originais e não são copiadas nem sobrescritas. Animações específicas de texto exigem camadas de texto. Faixas que ultrapassariam a linha do tempo são ignoradas e informadas na pré-visualização; o Bannerify não as encurta sem avisar. Faixas inativas existentes não mudam, a menos que a sequência forneça explicitamente uma animação para aquela faixa.
Para remover uma sequência salva, selecione-a em Saved Sequence e clique no ícone da lixeira. Remover um item da biblioteca não remove as animações já aplicadas aos seus banners.
As sequências reutilizam definições de animação já disponíveis no Bannerify, incluindo sua biblioteca de animações personalizadas. Animações personalizadas ausentes e faixas incompatíveis são informadas e ignoradas. As animações Draw exigem uma camada SVG, e o Split Text exige uma camada de texto elegível, assim como no seletor de animações. A sincronização apenas de tempos mantém a animação do destino e não aplica essas restrições da animação de origem. As sequências não empacotam a arte nem as definições de animações personalizadas para transferência para a instalação de outro usuário.
Sincronizar os tempos entre tamanhos de banner
Use Timeline Settings → Sync Timings para copiar os intervalos de tempo de um banner de origem para as camadas correspondentes de outros banners carregados.
- Escolha o banner de origem e, se quiser, limite-o às camadas de origem selecionadas.
- Selecione os banners de destino e revise cada mapeamento de camada.
- Desmarque os mapeamentos que devem manter os tempos atuais. Escolha destinos explícitos para nomes de camadas ambíguos ou sem correspondência.
- Revise os intervalos de tempo antes e depois e clique em Apply Timing Sync.
A sincronização de tempos preserva as escolhas de animação, as configurações de loop e as outras configurações de camada de cada destino. Faixas de destino inativas, camadas bloqueadas e faixas do Figma Motion são ignoradas. Cada aplicação é uma única edição que pode ser desfeita no painel History. É uma cópia única: edições posteriores na origem não mudam os destinos automaticamente. Aplique de novo quando quiser sincronizar outra atualização.