Inspecionar e modificar efeitos de animação CSS

Inspecione e modifique efeitos de animação CSS usando o Inspetor de Animação na ferramenta Animações :

Capture animações abrindo a ferramenta Animações. A ferramenta Animações detecta e classifica automaticamente as animações em grupos.

Inspecione as animações diminuindo a velocidade de cada uma, reproduzindo cada uma ou exibindo o código-fonte.

Modifique as animações alterando o intervalo, o atraso, a duração ou os deslocamentos do quadro-chave.

Visão Geral

A ferramenta Animações tem dois objetivos principais:

• Inspecionando animações. Você pode desacelerar, reproduzir ou inspecionar o código-fonte de um Grupo de Animação.

• Modificando animações. Você deseja modificar o intervalo, o atraso, a duração ou os deslocamentos de quadro-chave de um grupo de animação. No momento, não há suporte para a edição de Bézier e a edição de quadro-chave.

O Inspetor de Animação é compatível com animações CSS, transições CSS e animações da Web. requestAnimationFrame No momento, não há suporte para animações.

Grupos de animação

Um Grupo de Animação é um grupo de animações que podem estar relacionadas entre si. A web não tem um conceito real de animação de grupo, então designers de movimento e desenvolvedores precisam compor e cronometrar animações individuais para que as animações sejam renderizadas como um efeito visual coerente. O Inspetor de Animação prevê quais animações estão relacionadas com base na hora de início (excluindo atrasos e assim por diante). O Inspetor de Animação também agrupa as animações lado a lado.

Em outras palavras, um conjunto de animações que são todas disparadas no mesmo bloco de script é agrupada. Se uma animação for assíncrona, ela será colocada em um grupo separado.

Introdução

Para abrir o Inspetor de Animação, use qualquer uma destas abordagens no DevTools:

• Na barra de ferramentas da Barra de Atividades ou Visualização Rápida: Clique no botão Mais Ferramentas () e selecione Animações.

  

• No menu Personalizar : Clique no botão de menu Personalizar e controlar o DevTools (), aponte para o submenu Mais ferramentas e selecione Animações.

• No Menu de Comando: Quando o DevTools tiver o foco, pressione Ctrl+Shift+P (Windows/Linux) ou Command+Shift+P (macOS) para abrir o Menu de Comando, comece a digitar animationse selecione Mostrar Animações [Visualização Rápida].

Por padrão, a ferramenta Animações é aberta no painel Visualização Rápida na parte inferior do DevTools. Usando a ferramenta Animações no painel Visualização rápida , você pode usar a ferramenta Animações lado a lado com outra ferramenta aberta no painel Barra de atividades .

O Inspetor de Animação é agrupado em quatro seções principais (ou painéis). Este guia se refere a cada painel da seguinte maneira:

Para capturar uma animação, execute a interação que dispara a animação enquanto o Inspetor de animação estiver aberto. Se uma animação for disparada no carregamento da página, atualize a página com o Inspetor de Animação aberto para detectar a animação.

Inspecionar animações

Depois de capturar uma animação, há algumas maneiras de reproduzi-la:

• Passe o mouse sobre a miniatura no painel Visão geral para exibir uma visualização dela.
• Selecione o Grupo de Animação no painel Visão Geral (para que ele seja exibido no painel Detalhes ) e clique no ícone de reprodução (). A animação é reproduzida na janela de exibição. Clique nos ícones de velocidade de animação () para alterar a velocidade de visualização do Grupo de Animação selecionado no momento. Você pode usar a barra vertical vermelha para alterar sua posição atual.
• Clique e arraste a barra vertical vermelha para esfregar a animação da viewport.

Exibir detalhes da animação

Depois de capturar um Grupo de animação, clique nele no painel Visão geral para exibir os detalhes. No painel Detalhes , cada animação individual é atribuída a uma linha:

Passe o mouse sobre uma animação para destacá-la na janela de exibição. Clique na animação para selecioná-la na ferramenta Elementos :

A seção mais à esquerda e mais escura de uma animação é sua definição. A seção direita, mais desbotada, representa iterações. Por exemplo, na figura a seguir, as seções dois e três representam iterações da seção um:

Se dois elementos tiverem a mesma animação aplicada a eles, o Inspetor de animação atribuirá a mesma cor aos elementos. A cor é aleatória e não tem significado. Por exemplo, na figura a seguir, os dois elementos div.cwccw.earlier e div.cwccw.later têm a mesma animação (spinrightleft) aplicada, assim como os div.ccwcw.earlier elementos e div.ccwcw.later .

Modificar animações

Há três maneiras de modificar uma animação com o Inspetor de animação:

• Duração da animação.
• Intervalos de quadro-chave.
• Atraso de tempo de início.

Para esta seção, suponha que a captura de tela abaixo represente a animação original:

Para alterar a duração de uma animação, clique e arraste o primeiro ou o último círculo.

Se a animação definir regras de quadro-chave, elas serão representadas como círculos internos preenchidos em branco. Clique e arraste um círculo interno preenchido em branco para alterar o intervalo do quadro-chave:

Para adicionar um atraso a uma animação, clique na animação em qualquer lugar, exceto nos círculos, e arraste-a:

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.