Animações no Designer

A maioria dos elementos de um design pode se mover na tela. Um título pode entrar deslizando, um preço pode pulsar de leve e uma foto pode flutuar. A configuração é feita por elemento no Designer, e as suas telas reproduzem a animação automaticamente.

Colocar um elemento em movimento

1. Abra o seu design no Designer e selecione o elemento.
2. Clique em Animar na barra acima da área de edição. Se a janela for estreita, a opção fica no menu do botão de três pontos, no fim dessa barra.
3. Escolha uma animação em Entrada, em Contínua ou nas duas.

Para remover uma animação, volte a seleção para Nenhuma.

Animação de entrada

Uma animação de entrada é reproduzida quando o design aparece na tela. As opções são:

• Aparecer
• Deslizar da esquerda ou Deslizar da direita
• Deslizar para cima ou Deslizar para baixo
• Ampliar
• Entrar saltando

Defina quanto tempo a animação dura e quanto tempo ela espera antes de começar. Aumente um pouco a espera de um elemento para o outro, por exemplo primeiro o título e depois os preços, e o design vai se montando passo a passo.

Animação contínua

Uma animação contínua segue enquanto o design estiver na tela. As opções são:

• Pulsar: o elemento aumenta e diminui um pouco.
• Girar: o elemento gira.
• Saltar: o elemento pula para cima e para baixo.
• Flutuar: o elemento flutua devagar para cima e para baixo.

Com os controles deslizantes de velocidade e intensidade, você define a rapidez e a força do movimento. Um elemento pode ter uma animação de entrada e uma contínua ao mesmo tempo: a contínua começa quando a entrada termina.

Pré-visualizar as animações

Clique no botão Pré-visualização na barra superior do Designer, logo antes do botão Baixar, para ver o design em movimento. Se o design tiver apenas animações de entrada, a pré-visualização se fecha sozinha quando elas terminam.

Nas suas telas

• Em uma playlist, a entrada é reproduzida toda vez que o design aparece na tela.
• Quando o design é a única coisa em uma tela, a entrada é reproduzida uma vez ao carregar, e as animações contínuas seguem rodando.

Bom saber

• Apps, playlists e códigos QR dentro de um design não podem ser animados.
• Texto que rola pela tela não é uma animação. Em vez disso, adicione ao design o app Letreiro, pelo painel Apps na barra da esquerda do Designer. Veja Apps de informação: meteorologia, relógio, notícias, tickers e mais.
• O Assistente de IA pode configurar animações para o seu design enquanto ele está aberto no Designer. Peça, por exemplo: "faça os preços pulsarem" ou "faça o título entrar deslizando".

Dica

O movimento chama a atenção. Anime um ou dois elementos, como a oferta do dia, e deixe o resto parado. Assim a tela fica calma e fácil de ler de longe.

Veja também Criar um design no Designer.