Easing permite mudar a aceleração e a desaceleração de uma transição de animação. O Google Web Designer oferece cinco tipos de easing padrão definidos na especificação CSS3, bem como transições de etapa e uma opção de easing personalizado no Modo avançado.
Observação: opções de easing diferentes estão disponíveis para efeitos de texto.
Easing no Modo rápido
No Modo rápido, o mesmo easing é aplicado a todos os elementos animados entre as miniaturas.
Para alterar o easing no Modo rápido, faça o seguinte:
- Clique no botão Opções de frame-chave entre as miniaturas.
- O editor de transição será aberto.
-
No editor de transição, clique nas setas para ver as predefinições padrão de easing. Além disso, é possível alterar a duração do easing inserindo uma quantidade de tempo em segundos ou clicando no campo de tempo e arrastando-o para a direita ou esquerda.
Predefinições padrão de easing
Predefinição de easing | Descrição |
---|---|
Linear |
As animações mudam a uma velocidade constante. |
Ease |
As animações começam com velocidade média e desaceleram no final. |
Ease-out |
As animações começam com velocidade alta e desaceleram no final. |
Ease-in |
As animações começam com velocidade baixa e aceleram no final. |
Ease-in-out |
As animações começam e terminam com velocidade baixa, mas aceleram no meio. |
Etapa-término |
As animações permanecem na posição inicial durante o tempo de ease e, em seguida, passam diretamente para a posição final. |
Etapa-início |
As animações passam imediatamente para a posição final. |
Easing no modo Avançado
O Modo avançado oferece mais opções de easing:
- Alterar o easing de vários intervalos ao mesmo tempo.
- Especificar o easing personalizado.
- Salvar o easing personalizado como uma nova predefinição para facilitar o reuso em outros intervalos.
Para alterar o easing no Modo avançado, faça o seguinte:
-
Clique com o botão direito do mouse em um intervalo com a animação do easing que você pretende modificar. Para editar vários easings ao mesmo tempo, selecione os intervalos em sequência pressionando a tecla "Shift" ao clicar neles. Outra opção é selecionar os intervalos que não estão em sequência pressionando a tecla "Control" (Windows) ou "Command" (Mac) ao clicar. Em seguida, clique com o botão direito do mouse em um dos intervalos selecionados. Somente os easings de intervalos com animação serão modificados.
- Selecione uma das predefinições de easing no menu pop-up ou Opções de easing... para visualizar as curvas de easing ou especificar um easing personalizado.
Para criar um easing personalizado:
- Clique com o botão direito do mouse em um intervalo e selecione Opções de easing... para abrir a caixa de diálogo "Easing".
- Use um dos métodos a seguir para alterar o easing:
- Arraste as alças de controle para ajustar a forma da curva de easing. O ângulo da alça de controle determina a quantidade de curva, e o comprimento da alça controla a força de aceleração ou desaceleração.
- No campo Cubic-bezier, insira a notação funcional
cubic-bezier()
(em inglês) da curva de Bézier que você quer. Se um valor inválido for inserido, o campo será sublinhado em vermelho.
- Como opção, salve esse easing personalizado como uma predefinição clicando em Salvar como uma nova predefinição.
- Clique em Aplicar para usar esse easing personalizado nos intervalos selecionados.
Predefinições de easing personalizado
- Acesso rápido: as predefinições de easing serão exibidas como opções no menu pop-up quando você clicar com o botão direito do mouse em um intervalo.
- Fácil identificação: os nomes das predefinições são exibidos no cronograma do Modo avançado.