Com as trajetórias de animação, é possível movimentar os objetos ao longo de curvas e formas complexas. Assim como as linhas desenhadas com a ferramenta "Caneta", as demarcações de animação são definidas por pontos de fixação, que depois serão ligados por linhas retas ou curvas.
A animação por demarcação é aproximada no CSS. Por isso, talvez os elementos animados não sigam exatamente as demarcações. Em geral, a diferença não é perceptível (por padrão, menos de um pixel). Além disso, é possível limitar o desvio nas propriedades da trajetória de animação.
Sobre as demarcações de animação
Veja o que você encontra nesta página:
Visualizar trajetórias de animação
Selecione um único elemento ou um grupo para ver os pontos de fixação e linhas indicando onde o item se moverá durante a animação.
Pontos de fixação
Os pontos de fixação são definidos de duas maneiras:
- As miniaturas ou os frames-chave que especificam uma nova posição x ou y para o elemento geram pontos de fixação automaticamente. Os pontos de fixação inicial e final estão sempre em frames-chave.
- É possível adicionar pontos de fixação ao longo da demarcação de animação usando a ferramenta Demarcação de animação.
Alças de controle
As alças de controle são visíveis quando a ferramenta Trajetória de animação está selecionada. Cada segmento entre os pontos de fixação tem duas alças de controle, uma em cada ponto. O comprimento e a direção de uma alça de controle indicam o grau de curvatura da demarcação de animação. No caso das linhas retas, as alças de controle são alinhadas ao segmento ou recolhidas.
Editar trajetórias de animação
Editar a forma da trajetória de animação
As demarcações de animação podem ser curvas simples, formas fechadas (como polígonos e círculos) ou contornos detalhados de outros objetos. Para alterar a forma de uma demarcação de animação:
Adicionar um ponto de fixação
- Adicione uma miniatura ou um frame-chave que altera a posição do elemento. Com isso, será adicionado um ponto de fixação em que é possível mudar o easing.
- A opção Adicionar ponto de fixação
da ferramenta Trajetória de animação
permite clicar em um local da trajetória para adicionar um ponto de fixação a ela. Ao usar esse método para adicionar um ponto de fixação, não será incluído um frame-chave nem uma miniatura.
Ajustar a curvatura
- Quando a ferramenta Seleção ou a opção padrão
da ferramenta Trajetória de animação
- Quando a ferramenta Trajetória de animação
- Clique duas vezes em um ponto de fixação para recolher as alças de controle anexadas. Clicar duas vezes novamente estende as alças de controle.
Para endireitar uma trajetória de animação, clique duas vezes nos dois pontos de fixação.
Excluir um ponto de fixação
- A opção Excluir ponto de fixação
da ferramenta Trajetória de animação
- A exclusão de uma miniatura ou um frame-chave exclui o segmento da trajetória de animação que termina nesse elemento.
Transformar a trajetória de animação
É possível mover, redimensionar, inverter ou girar trajetórias de animação. Para isso, selecione a ferramenta Trajetória de animação e marque a caixa Controle de transformação na barra de opções. Dessa forma, os controles de transformação serão exibidos ao selecionar um elemento com uma trajetória de animação.
Mover uma trajetória de animação
Arraste a trajetória de animação para uma nova posição no cenário.
Redimensionar a trajetória de animação
- A caixa de redimensionamento delimita a trajetória de animação em azul, com alças em cada canto e em cada lado. Arraste uma alça para alterar o tamanho da trajetória de animação.
- Segure a tecla Shift ao arrastar os pontos para manter a proporção original.
- Segure a tecla Alt ao arrastar para manter a trajetória de animação centralizada no mesmo ponto.
- Para redimensionar a trajetória de animação em outra direção, gire a caixa de redimensionamento inserindo os graus de rotação no campo
da barra de opções da ferramenta. Outra alternativa é segurar a tecla Alt (Windows) ou Option (Mac) enquanto pressiona a tecla de seta para a esquerda ou para a direita a fim de girar a caixa de redimensionamento em 5°. O valor do campo sempre é redefinido como 0°. Por isso, é preciso inserir a rotação desejada a partir da orientação atual. A orientação da trajetória de animação não será alterada ao girar a caixa de redimensionamento.
- Para redefinir a orientação da caixa de redimensionamento, clique duas vezes no controle de rotação interna (o anel menor). Isso também redefine o local do ponto de giro da rotação.
da barra de opções da ferramenta. Outra alternativa é segurar a tecla Alt (Windows) ou Option (Mac) enquanto pressiona a tecla de seta para a esquerda ou para a direita a fim de girar a caixa de redimensionamento em 5°. O valor do campo sempre é redefinido como 0°. Por isso, é preciso inserir a rotação desejada a partir da orientação atual. A orientação da trajetória de animação não será alterada ao girar a caixa de redimensionamento.Inverter a trajetória de animação
- Arraste uma alça de redimensionamento sobre a alça de redimensionamento oposta.
Girar a trajetória de animação
- Arraste o controle de rotação externa (o anel maior) no sentido horário ou anti-horário para girar a trajetória de animação.
- Segure a tecla Shift ao arrastar os elementos para limitar a rotação a acréscimos de 45°.
- Para mover o ponto de giro da rotação, arraste o controle de rotação interna (o anel menor) até outro local. Redefina o local do ponto de giro clicando duas vezes no controle de rotação interna. Isso também redefine a orientação da caixa de redimensionamento.
Edição da trajetória de animação
Editar a velocidade da animação
Controle a velocidade de um objeto ao longo da trajetória de animação mudando a duração das miniaturas ou dos frames-chave e o easing entre eles. Também é possível exibir o movimento da demarcação de animação em loop.
Otimização
Sempre que uma demarcação de animação é criada ou editada, o Google Web Designer otimiza automaticamente a animação, reduzindo a quantidade de CSS usada para renderizá-la enquanto observa as tolerâncias especificadas nas propriedades da demarcação de animação. Quanto menores forem as tolerâncias, mais próxima a animação estará da demarcação de animação, mas é possível reduzir a otimização.
Para uma animação mais compacta, clique em Otimizar curva nas propriedades da trajetória. Esse processo pode demorar mais do que a otimização automática.
O Google Web Designer exibe o tamanho estimado da demarcação de animação do elemento selecionado no painel "Propriedades", refletindo quanto espaço em disco a demarcação de animação usará após a publicação do documento.
Propriedades da trajetória de animação
As propriedades da demarcação de animação aparecem no painel "Propriedades" quando você adiciona um ponto de fixação com a ferramenta Demarcação de animação ou edita a demarcação como uma curva.
| Propriedade | Descrição |
|---|---|
| Orientar para o caminho | Quando a propriedade é ativada, o elemento gira durante a animação e fica de frente para a direção da demarcação de animação. Por exemplo, ao seguir a curva descendente de uma demarcação de animação, o elemento inclina-se para baixo. A precisão da rotação é controlada com a propriedade Tolerância de ângulo. |
| Tolerância de posição | Define o quanto o elemento pode se desviar da demarcação de animação.
|
| Tolerância de ângulo | Controla o quanto a orientação do elemento pode variar em relação à da demarcação de animação. Essa propriedade só é aplicável quando a opção Orientar para o caminho está ativada.
|
| Otimizar curva | Clique no botão |
| Tamanho estimado | Exibe uma estimativa de tamanho da demarcação de animação. Para compressão adicional, use o botão Otimizar curva. |
Limitações
- Posicionamento superior/esquerdo: as trajetórias de animação não são compatíveis com o posicionamento superior/esquerdo. Em vez disso, use a propriedade
transformdo CSS (padrão). - Animação em 3D: o Google Web Designer não é compatível com trajetórias de animação em 3D. É possível aplicar translações 3D ao elemento separadamente.
- Painel CSS: o painel CSS não afeta as trajetórias de animação, embora os estilos ainda sejam aplicados ao próprio elemento.
- Visualização de código: não é possível ver nem editar trajetórias de animação na Visualização de código.
- Anúncios gráficos: a ferramenta de trajetória de animação não está disponível em anúncios gráficos.