Na próxima vez que você criar animações regulares baseadas em CSS3, pode ser útil acessar as ferramentas de desenvolvedor do Chrome e aproveitar os recursos de verificação e personalização de animação. Neste breve artigo, mostraremos quais ferramentas de animação estão disponíveis no Chrome, como acessá-las e como elas podem ajudá-lo.
Se você quiser testar suas animações CSS3 usando essas ferramentas, poderá usar o código pronto de nosso curso:
10 Projetos CSS3: interface e layout .
Aqui está a versão completa da página.Abrindo a guia Animações
Na página com a animação CSS3 em execução, abra primeiro as "Ferramentas do desenvolvedor do Chrome", indo em
Exibir> Desenvolvedor> Ferramentas do desenvolvedor. Como alternativa, você pode usar o atalho de teclado:
F12 ou
CTRL + SHIFT + I.Quando as ferramentas do desenvolvedor estiverem abertas, vá para o menu indicado por três pontos verticais no canto superior direito e selecione
Mais ferramentas> Animações, conforme mostrado abaixo:
Quando você abre a guia da animação pela primeira vez, não verá nenhum conteúdo relacionado à sua animação, apenas a mensagem
Ouvindo animações ... O motivo para isso é que a ferramenta ganhou a guia e já deve estar aberta quando a página carregar pela primeira vez.
Para o painel ler informações sobre suas animações, atualize a página e você verá o seguinte:
O pequeno ícone colorido no canto superior esquerdo é uma animação dos elementos da sua página. Clique neste ícone para abrir as ferramentas de verificação de animação:
Cursor de reprodução e quadros-chave
À medida que a animação é reproduzida, você verá um cursor vermelho de reprodução se movendo ao longo da linha do tempo. Este cursor pode ser movido para o local desejado usando o mouse.
Cada linha da interface representa um elemento separado de animação na página. Você pode perceber que cada linha tem uma seção com cores saturadas mais escuras. Ele mostra o comprimento da animação e os segmentos mais claros a seguir representam uma repetição da animação.
Você também verá vários pequenos círculos ao longo de cada linha de animação. Eles correspondem aos quadros-chave da animação. As olheiras representam o início e o final da animação e as oletas representam quadros-chave intermediários entre elas.
Quadros-chave intermediários
Os quadros-chave intermediários (quadros-chave entre o início e o final de cada ciclo de animação) em cada linha podem ser arrastados para posições diferentes e, à medida que você os move, você verá como o tempo da animação muda na janela do navegador. Essa é uma boa ferramenta para experimentar qual porcentagem deve ser para cada quadro-chave intermediário.
No entanto, a dificuldade está no fato de que você não verá atualizações de código na guia Estilos durante esses experimentos. Em vez disso, quando você coloca seus quadros-chave intermediários no ponto correto, pode determinar manualmente qual o valor percentual a ser usado para o quadro-chave.
Posicione o cursor de reprodução diretamente acima do quadro-chave em questão e você verá um carimbo de data / hora no canto superior esquerdo do painel, informando a distância em segundos da animação. Então você pode descobrir qual porcentagem desse tempo é a duração total da animação. No exemplo abaixo, o cursor de reprodução está em cerca de 1 segundo de uma animação de 2 segundos; portanto, sabemos que esse quadro-chave é de 50%.
Atraso e duração da animação
Você pode fazer outras alterações na guia
Animações que atualizarão seu código na guia
Estilos para poder ver exatamente quais valores fazer no seu CSS. O primeiro deles é o atraso antes que a animação comece a ser reproduzida e o segundo é a sua duração.
Para aplicar um atraso antes de iniciar uma animação, passe o mouse sobre sua linha até ver um cursor em forma de mão e arraste-o horizontalmente. Você verá a atualização do valor de atraso na guia
Estilos :
Para alterar a duração da animação, passe o mouse sobre o último quadro-chave até ver o cursor bidirecional e arraste-o horizontalmente. Novamente, o valor será visível na guia
Estilos .
Função de tempo de animação
Você também pode usar as ferramentas de desenvolvedor do Chrome para alterar a curva de velocidade que controla o tempo da animação. Comece verificando o item ao qual a animação se aplica. À esquerda da função de tempo especificada atualmente, você verá um pequeno ícone com um "til". Clique nele para abrir o editor de curvas bezier:
Uma janela é aberta, mostrando a curva de Bezier, que exibe a função de tempo atual. Aqui, você pode selecionar uma predefinição existente clicando em uma das miniaturas à esquerda ou arrastar os marcadores da imagem principal da curva para criar um valor personalizado para as curvas de bezier, que você pode copiar para o CSS:
À medida que você muda, você verá uma pequena bola roxa se movendo da esquerda para a direita na parte superior do editor, exibindo as alterações atuais na sua função de tempo.
Renderização de camadas rotativas
Outro recurso útil é a capacidade de visualizar as camadas usadas na sua animação, incluindo a capacidade de girar a visualização especificada e visualizá-la de diferentes pontos de vista, a fim de entender melhor como tudo funciona.
Para abrir o painel
Camadas, acesse o menu Ferramentas de desenvolvimento do Chrome e selecione
Mais ferramentas> Camadas.
Quando a guia
Camadas estiver aberta, selecione a ferramenta
Modo de rotação no canto superior esquerdo:
Agora você pode usar esta ferramenta para girar a visualização da camada para qualquer ângulo necessário para ver melhor como funcionam as partes da sua animação:
Conclusão
Vamos dar uma olhada rápida nas ferramentas de animação do Chrome:
- Abra as ferramentas de animação abrindo primeiro as Ferramentas de desenvolvimento do Chrome e, no menu Ferramentas de desenvolvimento, selecione Mais ferramentas> Animações.
- O painel Animações deve ser aberto quando a página for carregada para exibir informações de animação - atualize a página para conseguir isso.
- Clique na miniatura do pequeno gráfico de cores para visualizar as informações da animação.
- Cada linha representa uma animação.
- Os círculos preenchidos representam os quadros-chave de início e fim.
- Círculos ocos representam quadros-chave intermediários.
- Os quadros-chave intermediários podem ser movidos, mas você não verá a atualização de código correspondente na guia Estilos . Em vez disso, calcule manualmente o ponto percentual em que eles caem.
- Altere o valor do atraso da animação passando o mouse sobre a linha até ver o cursor da mão e arraste-o horizontalmente.
- Altere o valor da duração da animação movendo o cursor sobre o último quadro-chave até ver o cursor com um contorno duplo e arraste-o horizontalmente.
- Na guia Estilos , clique no ícone à esquerda da função de temporização existente para abrir o editor de curvas de bezier.
- Escolha entre as predefinições a função de tempo das configurações ou crie a sua própria alterando a imagem da curva principal.
- Abra o painel Camadas , vá ao menu Ferramentas do desenvolvedor do Chrome e escolha Mais ferramentas> Camadas.
- Neste painel, use o modo Girar para visualizar as camadas da sua animação de qualquer ângulo.
Às vezes, criar a animação perfeita pode ser um processo muito preciso e sutil. Essas ferramentas podem fornecer informações muito necessárias sobre suas animações, bem como feedback em tempo real para ajudá-lo a alcançar a excelência.