Criar animações no Modo avançado

Linha do tempo do Modo avançado

No Modo avançado, você pode animar cada elemento adicionando frames-chave na linha do tempo para indicar onde as animações começam e terminam. Basta editar os elementos em frames-chave específicos, e o Google Web Designer criará a animação entre eles.

O espaço entre os frames-chave é chamado de intervalo e determina a duração das animações. Por exemplo, para tornar a animação mais rápida, você precisa ter um espaço menor entre os frames-chave. O easing permite mudar a aceleração e a desaceleração de uma transição.

Para fazer a animação de um elemento no Modo avançado, siga estas etapas:

1. Para adicionar um frame-chave, clique com o botão direito do mouse na linha do tempo e selecione Inserir frame-chave.
2. Altere as propriedades do elemento para definir como elas ficarão ao final da animação. Por exemplo, você pode alterar a posição, a cor ou a opacidade do elemento, ou até mesmo as três propriedades.

É possível adicionar mais frames-chave e ter vários intervalos de animação na string para um mesmo elemento. Se você quiser que o elemento permaneça inalterado por um período antes de animá-lo novamente, adicione um frame-chave sem alterar qualquer propriedade.

Exemplo

A animação acima mostra uma imagem aparecendo, em pausa e deslizando para a esquerda e usa quatro frames-chave.

1. O primeiro frame-chave define o estado do elemento no início da animação. Nesse caso, a imagem tem a opacidade definida como "0". Por isso, ela não fica visível.
2. No segundo frame-chave, a opacidade do elemento é definida como "1" (100%). A imagem aparece gradualmente durante o período anterior de um segundo.
3. No terceiro frame-chave, o elemento não tem propriedades modificadas em comparação ao frame-chave anterior. Não há animações durante esse período de meio segundo. Assim a imagem permanece a mesma.
4. No último frame-chave, a posição do elemento muda para que a metade direita da imagem fique visível no cenário. A imagem desliza para a esquerda até chegar a essa posição. Esse movimento dura um segundo.

Para ver as propriedades especificadas para um determinado frame-chave, clique nele com o botão direito e selecione Propriedades da animação no menu pop-up.

Como adicionar um frame-chave

Há várias maneiras de adicionar um frame-chave. Na linha do tempo, selecione a camada do elemento que você está animando e mova o marcador para o local onde ficará o frame-chave. Para selecionar várias camadas, pressione a tecla Ctrl/⌘ durante a seleção. Use um dos seguintes métodos:

• Clique com o botão direito do mouse na linha do tempo e selecione Inserir frame-chave no menu pop-up.
• Pressione F6.
• Selecione Linha do tempo > Adicionar frame-chave no menu "Editar".

Se você alterar as propriedades de um elemento animado com o marcador posicionado fora do local de um frame-chave, o Google Web Designer adicionará automaticamente um frame-chave à posição do marcador.

Duração da área de trabalho da linha do tempo

Se você quiser adicionar um frame-chave ao final da linha do tempo, será possível estender o comprimento da área de trabalho correspondente. A duração padrão, por exemplo, é 12 segundos, mas é possível adicionar um frame-chave aos 15 segundos. Para aumentar a duração da área de trabalho da linha do tempo, siga estas etapas:

1. Clique no indicador de duração na parte superior da linha do tempo.

   

2. Insira um novo valor de duração da linha do tempo (em segundos). O valor mínimo é 12 segundos.
3. Pressione Enter.

A área de trabalho da linha do tempo precisa ter um tamanho compatível com suas animações. Nenhuma parte não utilizada dessa linha afetará o tempo de exibição da animação.

As linhas do tempo de anúncios em vídeo podem ter uma duração máxima de cinco minutos.

Escala da linha do tempo

Arraste o controle deslizante de zoom próximo ao canto superior direito da linha do tempo para ajustar a escala. Se você tiver frames-chave em posições muito próximas, pode ser útil usar o zoom. O nível de zoom só muda sua visualização da linha do tempo e não afeta o tempo da animação.