---
url: "/pt/bannerify/animation/animating-banners.md"
description: "Depois de carregar seus frames do Figma no Bannerify, aplique animações a qualquer camada dos banners com os recursos da linha do tempo do plugin."
---

# Animar seus banners

> Depois de carregar seus frames do Figma no Bannerify, aplique animações a qualquer camada dos banners com os recursos da linha do tempo do plugin.

### Vídeo tutorial: anime e exporte banners para HTML a partir do Figma

Este vídeo mostra como animar e exportar, em segundos, banners HTML prontos para veicular a partir do Figma.
[Embedded media](https://www.youtube-nocookie.com/embed/-TA088FNulA)

## Selecionar animações {#selecting-animations}

[Video](/assets/videos/bannerify/animation/select-animations.mp4)

O Bannerify vem com dezenas de animações predefinidas baseadas em keyframes, agrupadas em 5 categorias:

- Entrances
- Exits
- Basic Transforms
- Attention Seekers
- Background Pans

Para definir uma **animação de entrada**, passe o mouse sobre a camada que você quer animar na linha do tempo do Bannerify e clique na **caixa de seleção de cima**. Percorra a lista de animações e **clique** no nome de uma animação para aplicá-la à camada. A pré-visualização do banner é atualizada na hora com a nova animação.

> **Tip:** **Remover as animações de uma camada**. Se você não quer que uma camada tenha animações, selecione **No Entry Animation** e/ou **No Exit Animation**. Outra opção é renomear qualquer camada do Figma com o prefixo **locked-** (por exemplo, _locked-RectangleBackground_). Isso também garante que nenhuma animação seja adicionada e desativa a caixa de seleção de animações na linha do tempo do plugin.

## Visualizar as animações do banner na linha do tempo {#previewing-your-banner-animations-in-the-timeline}

[Video](/assets/videos/bannerify/animation/preview-banner.mp4)

Para visualizar as animações nos seus banners, clique no botão com o ícone **Play**. Você pode pausar a linha do tempo a qualquer momento clicando no botão com o ícone **Pause**. Também é possível reiniciar a reprodução desde o começo clicando no botão com o ícone **Restart**.

Clique na régua de tempo acima dos banners ou arraste-a para percorrer a animação. O cursor de reprodução compartilhado fica alinhado com as faixas de tempo de todos os banners. Você também pode percorrer a animação pelo cabeçalho de um banner, sempre que a régua dele estiver visível.

Use **+**, **−**, o controle deslizante de zoom ou o gesto de pinça com dois dedos no trackpad sobre a régua ou as faixas de tempo para aplicar zoom de **100% a 1000%**. Com o zoom aplicado, arraste a alça azul arredondada da barra de rolagem abaixo da régua para mover a visualização para a esquerda ou para a direita. Clique em **Fit** para mostrar a linha do tempo inteira de novo. Esses controles mudam apenas a visualização, sem alterar os tempos das animações nem a duração da exportação. Veja [aplicar zoom e rolar a linha do tempo](/pt/bannerify/animation/animation-speed-timing#zoom-and-scroll-the-timeline) para conhecer todos os controles de navegação.

Para uma edição mais precisa, use [encaixe, filtros de camadas, marcadores e sequências de movimento reutilizáveis](/pt/bannerify/animation/animation-speed-timing#snap-and-organise-your-timeline) ou [repita uma área de trabalho em loop](/pt/bannerify/animation/previewing-animations#loop-a-work-area) enquanto ajusta uma transição.

## Timeline Settings {#timeline-settings}

Clique em **Timeline Settings** no cabeçalho. O painel abre na aba **General** e tem quatro abas:

| Aba | Controles |
| --- | --- |
| **General** | Duração da linha do tempo, Magic Delays e Magic Speeds |
| **Timeline Tools** | [Repetir um intervalo da pré-visualização em loop](/pt/bannerify/animation/previewing-animations#loop-a-work-area) e [adicionar marcadores com nome](/pt/bannerify/animation/animation-speed-timing#snap-and-organise-your-timeline) |
| **Motion Sequences** | [Salvar e reutilizar animações coordenadas](/pt/bannerify/animation/animation-speed-timing#save-and-reuse-a-motion-sequence) |
| **Sync Timings** | [Copiar os tempos entre tamanhos de banner](/pt/bannerify/animation/animation-speed-timing#synchronise-timings-across-banner-sizes) |

**Snap**, o filtro de camadas, **Zoom To Selection** e os controles para recolher grupos ficam em **Timeline Settings → Timeline Tools**.

## Revisar e restaurar edições {#review-and-restore-edits}

Clique em **History**, ao lado das setas de desfazer e refazer, para [navegar pelas edições da linha do tempo](/pt/bannerify/animation/undo-redo). Escolha uma etapa para voltar ou avançar; **Current** identifica o estado ativo. Novas edições feitas depois de voltar substituem o histórico posterior.

## Ajustar a duração da linha do tempo {#adjusting-the-timeline-length}

[Video](/assets/videos/bannerify/animation/adjusting-timeline.mp4)

Abra **Timeline Settings → General**, escolha uma duração em **Total Timeline Length** e clique em **Update Timeline Length**. As durações disponíveis vão de 1 segundo a 3 minutos. A alteração vale para todos os seus banners; intervalos de tempo que ultrapassam uma linha do tempo mais curta são ajustados para caber.

Você pode restaurar a duração e os tempos anteriores com **Undo** ou escolher uma etapa anterior em **History**. Veja [ajustar a duração da linha do tempo](/pt/bannerify/animation/timeline-length).

## Adicionar animações de saída {#adding-exit-animations}

[Video](/assets/videos/bannerify/animation/exit-animation.mp4)

Adicionar **animações de saída** funciona do mesmo jeito que adicionar animações de entrada; em vez de clicar na caixa de seleção de cima, clique na **caixa de seleção de baixo** para escolher uma animação de saída para a camada.

> **Note:** Garanta que qualquer animação de saída definida em uma camada **comece _depois_ que a animação de “entrada” terminar**. Caso contrário, as duas animações vão se sobrepor e ter transições conflitantes ao mesmo tempo.

## Ajustar a velocidade e o tempo das animações {#adjusting-animation-speeds-and-timings}

[Video](/assets/videos/bannerify/animation/adjust-speed.mp4)

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.

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.

> **Tip:** **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.

## Repetir animações em loop {#looping-animations}

[Video](/assets/videos/bannerify/animation/loop-animation.mp4)

Se você quer que a animação de uma camada específica se repita infinitamente (mesmo depois que a linha do tempo do banner terminar), ative a opção **Loop** ao lado da animação selecionada. Isso é útil para animações muito curtas que funcionam bem em loop (por exemplo, “Heartbeat”, “Flicker” ou “Pulse”).

## Copiar e colar animações {#copy-pasting-animations}

[Video](/assets/videos/bannerify/animation/copy-paste.mp4)

Para copiar rapidamente uma animação de uma camada da linha do tempo para outra, use os botões **Copy** e **Paste**. Clique em **Copy** para copiar a animação e depois clique em **Paste** em qualquer outra camada para colá-la.

> **Tip:** **Colar uma animação copiada em várias camadas** Você também pode aplicar a animação copiada em massa a várias camadas usando o recurso de [aplicação em massa](/pt/bannerify/animation/animating-banners#applying-bulk-animations).

## Aplicar animações em massa {#applying-bulk-animations}

[Video](/assets/videos/bannerify/animation/bulk-animations.mp4)

Para aplicar rapidamente uma animação a várias camadas ao mesmo tempo, selecione algumas camadas usando as caixas de seleção ao lado do nome de cada camada (ou use o recurso **Quick Select Layers**) e defina a animação na área que sobe na parte inferior da janela do plugin. Quando estiver satisfeito com a animação, clique no botão **Apply Animations to Selected Layers** para aplicá-la a todas as camadas selecionadas.

## Selecionar rapidamente camadas semelhantes {#quick-selecting-similar-layers}

[Video](/assets/videos/bannerify/animation/quick-select.mp4)

Se você trabalha com um conjunto de banners que têm os mesmos elementos ou camadas, pode usar o menu **Quick Select Layers** no cabeçalho do Bannerify para selecionar automaticamente as camadas semelhantes em todos os banners. Essa é uma ótima alternativa a marcar cada camada manualmente.

> **Tip:** **Exemplo de uso do Quick Select Layers** Por exemplo, se todos os seus banners têm uma camada chamada **CTA Button**, você pode clicar nessa opção para marcar automaticamente todas as camadas **CTA Button**. Assim, você pode **aplicar em massa** animações a essa camada em todos os banners ao mesmo tempo.

## Usar Magic Delays e Magic Speeds {#using-magic-delays-and-magic-speeds}

[Video](/assets/videos/bannerify/animation/magic-timeline.mp4)

Abra **Timeline Settings → General** e escolha um valor em **Magic Delays** ou **Magic Speeds**. Clique em **Apply To All Entry Animations** ou **Apply To All Exit Animations** para aplicá-lo a todos os seus banners.

### Magic Delays {#magic-delays}

Escolha um atraso escalonado de 0,1 a 0,5 segundo. As camadas recebem deslocamentos de atraso sucessivos e mantêm a duração das animações.

### Magic Speeds {#magic-speeds}

Escolha uma duração de 0,1 a 1 segundo. Os horários de início continuam os mesmos, a menos que precisem ser antecipados para caber na linha do tempo.

Cada aplicação é uma etapa do histórico. Use **Undo**, **Redo** ou o painel **History** para navegar entre as alterações. Veja [Magic Delays e Magic Speeds](/pt/bannerify/animation/magic-delays-speeds).