Animação de contorno SVG: prepare uma única rota de desenho

A animação de contorno SVG pode revelar uma linha ao mover um traço ao longo de seu traçado. Use stroke-dasharray para definir o traço e o intervalo e anime stroke-dashoffset até o contorno ficar visível. A MDN documenta essas propriedades como propriedades de pintura do contorno.

O traçado de origem determina o que parece ser desenhado. Um traçado aberto pode seguir uma rota de caneta pelo meio de uma marca. Uma forma preenchida descreve o limite da marca. Adicionar um contorno a essa forma leva a animação ao redor de suas bordas; as configurações de traços, sozinhas, não revelam seu preenchimento.

Comece com uma forma pequena antes de definir os tempos de um logo completo. Os exemplos feitos manualmente abaixo separam a rota de desenho, a arte preenchida e o perímetro para você escolher a geometria necessária à animação.

Para mover um ícone inteiro ao longo de uma curva, use o fluxo de movimento em traçado SVG, que mantém a rota de deslocamento separada da arte.

Comece com um traçado aberto com contorno

Este traçado original segue para a direita e depois para cima. Seu fill está desativado, portanto a marca visível vem inteiramente de seu contorno:

<div class="playing">
  <svg viewBox="0 0 140 130" role="img" aria-label="Open bent line">
    <path class="reveal route" pathLength="100" d="M30 90H100V30" />
  </svg>
</div>

Use este CSS para uma revelação de dois segundos:

.reveal {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
 
.route {
  fill: none;
  stroke: #147d78;
  stroke-width: 16;
  stroke-linecap: butt;
}
 
.playing .reveal {
  animation: draw 2s linear forwards;
}
 
@keyframes draw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
 
@media (prefers-reduced-motion: reduce) {
  .playing .reveal {
    animation: none;
    stroke-dashoffset: 0;
  }
}

pathLength="100" calibra operações baseadas em distância para um comprimento definido de 100. A referência de pathLength descreve essa normalização. Um único valor de dash-array se repete como um traço e um intervalo, então 100 fornece um traço do comprimento inteiro seguido de um intervalo igualmente longo. Deslocar esse padrão em 100 esconde o contorno neste exemplo; mover o deslocamento para zero o revela.

Use números sem unidade aqui. stroke-dashoffset: 100% não substitui 100 unidades normalizadas de traçado. A referência de dash-offset da MDN afirma que valores em porcentagem usam a diagonal normalizada da área de visualização SVG, em vez do comprimento total do traçado.

O exemplo usa pontas retas para facilitar a inspeção do início pausado. Outros estilos de ponta podem mudar a aparência das extremidades de um traço. Escolha a ponta para a arte e confira os quadros inicial e final no tamanho em que o ícone realmente aparecerá. Para repetições decorativas, compare contornos pontilhados e espaçamento das pontas antes de escolher os comprimentos dos traços e intervalos.

Compare a rota com uma forma preenchida

Uma faixa grossa dobrada pode parecer semelhante a essa linha contornada, mas conter outra geometria. Este segundo traçado feito manualmente percorre o limite da faixa e se fecha com Z:

<path class="reveal filled" pathLength="100"
  d="M30 82H92V30H108V98H30Z" />

Com a pintura abaixo, alterar seu deslocamento de traços não tem efeito visível:

.filled {
  fill: #ef8067;
  stroke: none;
}

A faixa continua preenchida porque não há contorno para tracejar. A especificação de pintura SVG do W3C diferencia a pintura do interior de uma forma da pintura de seu contorno.

Se, em vez disso, você definir fill: none, adicionar um contorno e animar esse traçado fechado, o contorno segue o perímetro: por uma borda, atravessando uma extremidade e voltando pela outra borda. Ele não se torna uma única rota pelo centro da faixa.

Essa distinção também explica por que uma vetorização pode produzir linhas de corte duplas. Em uma animação, o resultado indesejado pode ser uma linha que percorre o lado externo de uma marca de caneta. Se o efeito pretendido exige uma rota central, use o guia de SVG de linha única para inspecionar ou preparar essa geometria.

Confira o início, o meio e o fim

Para uma inspeção pausada do exemplo, desative a animação e defina stroke-dashoffset como 100, 50 e 0. Esses valores correspondem ao início, à revelação pela metade e ao estado final desse traçado normalizado. Eles não são porcentagens digitadas na propriedade CSS.

Mantenha as três versões em uma pequena página de teste com botões para esses estados. A configuração do meio é particularmente útil: as formas finalizadas podem parecer semelhantes, enquanto suas rotas de desenho se tornam evidentes durante a revelação.

Conferimos esses traçados feitos manualmente em um navegador nos deslocamentos 100, 50 e 0 e executamos a animação de dois segundos uma vez. A faixa preenchida permaneceu visível enquanto a rota e o perímetro eram revelados de maneiras diferentes. Este teste demonstra esses traçados originais; não é uma vetorização do PerfectVector nem um teste em todos os navegadores.

Inspecione a pintura e os estilos calculados do elemento real se um resultado for diferente. Uma regra CSS pode substituir um atributo de apresentação, e um traçado sem contorno visível não consegue demonstrar uma revelação por traços. A lista de verificação de contorno ausente ajuda a isolar problemas de pintura e exibição antes de ajustar os tempos da animação.

Decida o ponto inicial e a ordem dos traçados

O primeiro traçado começa em M30 90, segue horizontalmente até x=100 e depois verticalmente até y=30. Essa sequência dá uma direção à revelação. Se o desenho deve começar na extremidade superior, prepare o traçado nessa direção, em vez de supor que a animação conhece o movimento pretendido da caneta.

Para um logo com marcas separadas, decida qual traçado deve aparecer primeiro e qual deve vir depois. Iniciar a mesma animação em todos os traçados produz revelações simultâneas. Uma sequência exige atrasos explícitos ou outra organização da linha do tempo. Confira interseções e sobreposições nos estados pausados, pois formas posteriores podem cobrir um contorno que ainda está sendo desenhado.

Um desenho com vários subtraçados desconectados pode precisar ser separado em elementos para um controle útil dos tempos. Mantenha distintas as decisões sobre o desenho visual e as rotas de animação. Unir partes sem relação apenas para obter um traçado pode introduzir uma conexão que o artista nunca pretendeu.

Uma biblioteca de animação pode ajudar a controlar a sequência, mas sua entrada ainda precisa da geometria correta. A documentação de animação SVG do Motion oferece desenho de linhas pelo seu valor animado de pathLength. Esse controle da biblioteca é uma API separada da calibração nativa SVG pathLength="100" usada aqui; não copie os valores de um exemplo para o outro sem conferir a API.

Mantenha a arte concluída disponível sem movimento

O exemplo CSS usa por padrão um deslocamento de zero e o altera apenas enquanto a animação é executada. Sua consulta de mídia de movimento reduzido desativa a revelação e mostra a linha completa. O guia de prefers-reduced-motion da MDN explica como a consulta detecta a preferência do usuário.

Para uma demonstração interativa, ofereça um controle de resultado estático além de um botão de repetição. Para um ícone de interface, mantenha o rótulo de texto visível ou nome acessível que explica a ação. A animação não deve ser a única maneira de o leitor descobrir o significado do gráfico.

Teste os estados inicial, interrompido e concluído no posicionamento real. Se um ícone essencial continua invisível quando a animação não é executada, corrija o estilo base antes de estender o efeito a toda a interface. Uma demonstração isolada bem-sucedida não comprova todos os resultados de navegador, tecnologia assistiva ou desempenho.

Prepare a arte raster sem prometer uma rota de caneta

Se o mestre vetorial está ausente e uma marca PNG ou JPG de imagem plana precisa de arte editável, o fluxo de imagem para vetor do PerfectVector pode preparar uma versão candidata em SVG. Compare sua silhueta, vazados e regiões separadas com a imagem original e inspecione os traçados baixados em um editor. Use essa geometria como arte a ser revisada antes de planejar a animação.

A vetorização não estabelece a ordem original da caneta, não cria sua linha do tempo nem garante traçados únicos de linha central. Se a revelação precisa de uma rota pelo centro de um traço, desenhe ou prepare essa rota deliberadamente. Mantenha um mestre vetorial existente quando disponível. Um SVG que só incorpora uma imagem raster também precisa da verificação de imagem incorporada antes de você supor que sua marca visível é geometria editável de traçados.

Aceite primeiro a arte estática e depois a sequência de desenho. Os guias de edição do blog abordam a limpeza da arte original antes da camada de animação.

Perguntas frequentes

Por que meu SVG continua visível no início de uma animação de contorno? Confira se a parte visível é um preenchimento. As configurações de dash-array e dash-offset afetam o contorno; por isso, uma região preenchida pode continuar visível enquanto seu contorno está oculto.

Por que a animação desenha ao redor dos dois lados de uma linha? O traçado pode descrever um contorno fechado ao redor de uma marca grossa. Contornar esse traçado segue seu perímetro. Prepare uma rota de desenho aberta quando o efeito precisar de uma única linha pelo centro.

Posso usar 100% para todo o comprimento do traçado? Não como substituição geral em stroke-dashoffset. Suas porcentagens se referem à diagonal normalizada da área de visualização. O exemplo usa o pathLength="100" nativo com valores de traços sem unidade.

Converter um PNG para SVG o deixa pronto para animação de escrita manual? A vetorização não traz nenhuma garantia automática de ordem da caneta ou linha central. Inspecione a geometria resultante e prepare os traçados de desenho e os tempos separadamente.

Fontes

1. MDN — stroke-dasharray — Define comprimentos alternados de traços e intervalos para a pintura de contornos.
2. MDN — stroke-dashoffset — Explica deslocamentos do padrão e a referência usada pelas porcentagens.
3. MDN — pathLength — Documenta a calibração nativa de distância para traçados e contornos.
4. W3C — pintura SVG — Separa o comportamento de preenchimento e contorno.
5. MDN — prefers-reduced-motion — Documenta a preferência do usuário usada para um resultado estático.
6. Motion — animação SVG — Descreve a API separada de desenho de linhas da biblioteca.

Teste uma rota no início, no meio e no fim antes de sequenciar toda a arte. Se sua imagem original é uma marca raster, prepare uma versão candidata em SVG editável, inspecione sua geometria e planeje a rota de desenho separadamente.