Animar grupos e camadas aninhadas de forma independente

Mova, redimensione, gire ou aplique fade em um grupo pai enquanto as camadas filhas aninhadas reproduzem as próprias animações do Bannerify.

Vídeo tutorial: anime grupos e camadas de forma independente com o Group Motion
Siga o tutorial passo a passo.

O Bannerify consegue animar um grupo pai e as camadas dentro dele ao mesmo tempo. Por exemplo, você pode mover um carro agrupado pelo banner enquanto gira as camadas das rodas de forma independente.

O que você vai precisar ​

  • Um frame de nível superior do Figma com o design do banner.
  • Uma camada pai com uma ou mais camadas filhas dentro dela.
  • Nomes diferentes para cada camada filha que você quer animar individualmente.

Passos ​

  1. No Figma, coloque as camadas relacionadas dentro de um único grupo pai. Para animar um carro, você pode criar um grupo Car com Body, Wheel Left e Wheel Right.
  2. Peça ao Bannerify para expandir o grupo pai usando um destes métodos:
    • Adicione [expand] ao nome da camada pai, como Car [expand].
    • Abra o Bannerify, clique no ícone List no topo da linha do tempo do banner e depois clique na Arrow ao lado da camada pai.
  3. No painel de camadas aninhadas, ative Keep Parent Animatable ao lado do pai expandido. Essa opção vem desativada por padrão, para que as configurações de camadas aninhadas existentes mantenham o comportamento anterior, em que só as filhas são animadas.
  4. Feche o painel de camadas aninhadas. O Bannerify atualiza o banner e adiciona à linha do tempo as camadas filhas expostas.
  5. Confira se a linha do tempo contém as camadas filhas e uma linha separada para o pai, identificada como (Group Motion). Neste exemplo, a linha do pai aparece como Car [expand] (Group Motion).
  6. Aplique o movimento compartilhado na linha Group Motion. Por exemplo, aplique Slide In Left para fazer o carro inteiro entrar no banner.
  7. Aplique animações independentes às linhas das filhas. Por exemplo, aplique Rotate 360° a cada roda.
  8. Clique em Play All Banners ou use o controle de navegação da linha do tempo para visualizar o resultado combinado.
  9. Exporte o banner normalmente. As animações do pai e das filhas são combinadas nas exportações HTML, GIF, MP4, WebM e nas outras exportações de mídia baseadas em canvas.

Group Motion ​

Com Keep Parent Animatable ativado, o Bannerify marca o pai como Animatable e adiciona uma linha Group Motion separada à linha do tempo. A linha do pai funciona como um invólucro de movimento em volta das camadas filhas expostas. Translação, escala, rotação, opacidade e recorte aplicados ao pai são combinados com as animações aplicadas a cada filha.

Se Keep Parent Animatable estiver desativado, as camadas filhas continuam expandidas e animáveis, mas o Bannerify não adiciona a linha Group Motion do pai. O Bannerify lembra essa opção para cada camada pai.

Use nomes claros e consistentes para as camadas filhas quando a mesma estrutura aparecer em vários tamanhos de banner. Assim, você pode usar o Quick Select Layers para selecionar as camadas correspondentes e aplicar as animações delas em massa.

Mover uma foto dentro de uma máscara arredondada ​

Para fazer um grupo com máscara deslizar para dentro do banner enquanto a foto dele se move de forma independente:

  1. No Figma, use um único retângulo como máscara do grupo inteiro. Mantenha a máscara abaixo de toda a arte que ela recorta. Você pode usar raios diferentes em cada canto.
  2. Expanda o grupo da máscara no Bannerify e ative Keep Parent Animatable.
  3. Aplique Slide In Left à linha Group Motion do grupo.
  4. Aplique uma animação separada, como Zoom Pan Right, à linha da foto. Aumente a duração dela para uma panorâmica mais lenta.
  5. Visualize e exporte o banner. A foto se move dentro do contorno arredondado enquanto a animação do pai move o grupo inteiro.

Isso funciona com máscaras retangulares sem rotação e com cantos padrão, usando uma máscara Alpha opaca ou uma máscara Vector. A máscara em si não vira uma linha de animação. Mantenha recolhidos os grupos com várias máscaras, máscaras parciais entre camadas irmãs, máscaras suaves ou de luminância, suavização de cantos, contornos ou efeitos, para preservar a aparência deles como uma única imagem.

Usar Sections do Figma ​

A mesma configuração funciona quando Use Figma sections as multi-scene banners está ativado. Cada linha exposta inclui o número da cena, e um pai com a opção ativada continua disponível como uma linha Group Motion separada dentro daquela cena.

Camadas de slot do Figma ​

O Bannerify também é compatível com camadas de slot do Figma dentro dos frames de banner. Os contêineres de slot são tratados como grupos de camadas aninhadas e já começam expandidos na primeira vez que o Bannerify os carrega, deixando as camadas filhas disponíveis na linha do tempo imediatamente.

Se você recolher manualmente uma camada de slot, o Bannerify lembra essa preferência quando o banner é atualizado.

Se o grupo ou as camadas filhas não aparecerem ​

  • Verifique se o banner é um frame de nível superior do Figma ou se está dentro de uma Section carregada no modo de várias cenas.
  • Confirme que o pai tem camadas filhas e está expandido no Bannerify.
  • Se as camadas filhas aparecerem sem a linha Group Motion do pai, abra o painel de camadas aninhadas e ative Keep Parent Animatable ao lado do pai.
  • Se você renomeou o pai com [expand] depois de carregar o banner, clique em Refresh Banner Layers.
  • Mantenha as camadas filhas visíveis no Figma e verifique se elas estão dentro do pai expandido.