Sobre easing

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.

Se os easings forem editados no Modo avançado, talvez o tipo de easing "Misto" seja exibido quando você mudar para o Modo rápido.

Para alterar o easing no Modo rápido, faça o seguinte:

1. Clique no botão Opções de frame-chave entre as miniaturas.
2. O editor de transição será aberto.
   

3. 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:

1. 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.

2. 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:

1. 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".
2. 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.
3. Como opção, salve esse easing personalizado como uma predefinição clicando em Salvar como uma nova predefinição.
4. Clique em Aplicar para usar esse easing personalizado nos intervalos selecionados.
   

Predefinições de easing personalizado

Caso você queira reutilizar um easing personalizado específico em vários intervalos, salve-o como uma predefinição. As predefinições oferecem as seguintes vantagens:

• 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.

As predefinições personalizadas são salvas na sua instância pessoal do Google Web Designer e podem ser usadas em documentos diferentes. Se você abrir um documento que contém a predefinição personalizada de um usuário diferente, o easing será exibido como "personalizado" em vez de usar o nome da predefinição. A curva de easing não será alterada.

Para salvar uma nova predefinição personalizada, crie um easing personalizado nas opções da caixa de diálogo "Easing" e clique em Salvar como uma nova predefinição para nomeá-lo. Os nomes de predefinição e as curvas cúbicas de Bézier precisam ser únicos. Se quaisquer intervalos existentes tiverem o mesmo valor personalizado, eles exibirão o nome personalizado da predefinição.

Para renomear uma predefinição personalizada, clique duas vezes nela ou passe o cursor sobre ela na caixa de diálogo "Opções de easing" e clique no ícone de lápis que aparece ao lado do nome da predefinição. Edite o nome e pressione Enter. Os intervalos que usavam essa predefinição exibirão o novo nome.

Para excluir uma predefinição personalizada, passe o cursor sobre ela na caixa de diálogo "Opções de easing" e clique no ícone de lixeira exibido ao lado do nome da predefinição. Os intervalos que usavam essa predefinição permanecerão inalterados, mas serão exibidos como personalizados.

Não é possível editar a curva de uma predefinição existente. Em vez disso, crie uma nova predefinição personalizada e aplique-a aos intervalos que serão alterados.