Inspecionar e modificar efeitos de animação do CSS
Inspecione e modifique os efeitos de animação do CSS usando o Inspetor de Animação na ferramenta Animações .
Resumo
Capture animações abrindo a ferramenta Animações . A ferramenta Animações detecta e classifica automaticamente 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 os deslocamentos de tempo, atraso, duração ou quadro de chaves.
Visão Geral
A ferramenta Animações tem duas finalidades main:
Inspecionando animações. Você pode reduzir a velocidade, reproduzir ou inspecionar o código-fonte de um Grupo de Animação.
Modificando animações. Você deseja modificar os deslocamentos de tempo, atraso, duração ou quadro de chaves de um Grupo de Animação. Atualmente, não há suporte para edição de quadros de chaves e edição de quadro de chaves.
O Inspetor de Animação dá suporte a animações CSS, transições CSS e animações da Web. requestAnimationFrame No momento, não há suporte para animações.
O que é um grupo de animação?
Um Grupo de Animação é um grupo de animações que podem estar relacionadas entre si. Atualmente, a Web não tem nenhum conceito real de animação de grupo, portanto, 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 são agrupadas. 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 dessas abordagens em DevTools:
Na barra de ferramentas main ou na Gaveta: clique no botão Mais Ferramentas (
) e selecione Animações.
No menu Personalizar : clique no botão Personalizar e controlar DevTools (
para o sub-menu Mais ferramentas e selecione Animações.No Menu de Comando: quando DevTools tiver foco, pressione Ctrl+Shift+P (Windows/Linux) ou Command+Shift+P (macOS) para abrir o Menu de Comando, comece a digitar
animationse selecione Gaveta: Mostrar Animações.
Por padrão, a ferramenta Animações é aberta na Gaveta, ao lado da ferramenta Console . Usando a ferramenta Animações na Gaveta, você pode usá-la ao mesmo tempo que usar outras ferramentas na barra de ferramentas main.
O Inspetor de Animação é agrupado em quatro seções de main (ou painéis). Este guia refere-se a cada painel da seguinte maneira:
| Índice | Pane | Descrição |
|---|---|---|
| 1 | Controls | A partir daqui, você pode limpar todos os Grupos de Animação capturados no momento ou alterar a velocidade do Grupo de Animação selecionado no momento. |
| 2 | Visão geral | Selecione um Grupo de Animação aqui para inspecioná-lo e modificá-lo no painel Detalhes . |
| 3 | Timeline | Pausar e iniciar uma animação daqui ou ir para um ponto específico na animação. |
| 4 | Detalhes | Inspecione e modifique o Grupo de Animação selecionado no momento. |
Para capturar uma animação, basta executar a interação que dispara a animação enquanto o Inspetor de Animação está 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 na miniatura no painel Visão geral para exibir uma visualização dele.
- Selecione o Grupo de Animação no painel Visão geral (para que ele seja exibido no painel Detalhes ) e clique no ícone replay (
). A animação é reproduzida no modo 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 do modo de exibição.
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 em uma animação para realçá-la no modo 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.
- Tempo de quadro de chaves.
- Atraso na hora 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 quaisquer regras de quadro de chaves, elas serão representadas como círculos internos cheios de branco. Clique e arraste um círculo interno cheio de brancos para alterar o tempo do quadro de chaves:
Para adicionar um atraso a uma animação, clique na animação em qualquer lugar, exceto nos círculos, e arraste-a:
Observação
Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Internacional de Atribuição do Creative Commons 4.0. A página original é encontrada aqui e é de autoria de Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).
Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.