Animação morph SVG: compatibilize os traçados primeiro

Se o contorno deve permanecer igual enquanto a marca inteira gira, defina um pivô de rotação SVG compartilhado.

A animação morph SVG altera a geometria de uma forma entre dois estados. Para interpolação nativa de dados de traçado, prepare estruturas de comandos correspondentes e decida quais pontos devem corresponder entre si. Dois desenhos finais bonitos ainda podem produzir uma forma colapsada ou torcida na metade da transição.

As regras de animação de dados de traçado do W3C exigem a mesma quantidade e os mesmos tipos de comandos, na mesma ordem, para uma interpolação suave. Esse é um requisito estrutural. Ele não decide qual canto de um logo deve se tornar qual canto de seu próximo estado.

Comece com um pequeno par que você consiga inspecionar. Os exemplos originais abaixo usam um quadrado, um losango e um quadrado deliberadamente invertido para separar essas duas decisões.

Construa dois traçados com cantos correspondentes

Este quadrado e este losango feitos manualmente usam M L L L Z: mover para o primeiro canto, desenhar três linhas e fechar a forma. Cada par de coordenadas tem uma posição correspondente no outro traçado.

<svg id="matched" viewBox="0 0 160 160"
  xmlns="http://www.w3.org/2000/svg"
  role="img" aria-label="Square morphing into a diamond">
  <path fill="#147d78" d="M30 30L130 30L130 130L30 130Z">
    <animate attributeName="d" dur="2s" begin="0s"
      fill="freeze" calcMode="linear"
      values="M30 30L130 30L130 130L30 130Z;M80 20L140 80L80 140L20 80Z" />
  </path>
</svg>

O elemento animate do SVG altera um atributo ao longo do tempo. Aqui, ele altera d em dois segundos. O fill="freeze" da animação mantém seu estado final; o fill verde do traçado é uma configuração separada de pintura.

Mantenha o exemplo em uma página HTML independente durante a inspeção. Ele começa automaticamente sem o script de inspeção abaixo. Para controles de produção, decida quando deve ser executado e forneça um estado estático adequado à interface.

O mapeamento dos cantos é explícito:

Os dois contornos percorrem seu perímetro na mesma direção. O primeiro canto se move em direção ao topo do losango, o segundo para sua direita e assim por diante. Essa é uma escolha deliberada de desenho, não uma interpretação do significado de qualquer uma das formas.

Pause a interpolação real

Inspecione o início, o meio e o fim antes de ajustar a suavização ou adicionar efeitos decorativos. Para o SVG acima, esta função auxiliar pausa sua linha do tempo e busca um instante em segundos:

const svg = document.querySelector('#matched');
 
function showMorphAt(seconds) {
  svg.pauseAnimations();
  svg.setCurrentTime(seconds);
}
 
showMorphAt(1); // Midpoint of the two-second animation

A MDN documenta pauseAnimations() e setCurrentTime() para controlar a linha do tempo SVG. Conecte a função a botões com os valores 0, 1 e 2. São três posições em uma interpolação, não três desenhos substitutos.

Em um segundo, a interpolação linear coloca cada coordenada na metade entre seus dois valores extremos. O primeiro canto, portanto, fica em 55, 25. A forma intermediária completa deste exemplo original é:

M55 25L135 55L105 135L25 105Z

Conferimos esta animação SVG nativa em um navegador no início, no meio e no fim e depois a reproduzimos uma vez. A forma intermediária permaneceu um quadrilátero preenchido, e a reprodução chegou ao losango. Essa observação se aplica a esses traçados feitos manualmente no navegador testado; não é um resultado de conversão do PerfectVector nem um teste de compatibilidade entre navegadores.

Quantidades iguais de comandos ainda podem produzir um morph ruim

Mantenha o quadrado inicial, mas inverta a ordem dos cantos do quadrado de destino:

Start:  M30 30L130 30L130 130L30 130Z
Target: M30 30L30 130L130 130L130 30Z

Os dois estados extremos parecem o mesmo quadrado. As duas strings ainda usam M L L L Z. No entanto, o segundo e o quarto cantos agora atravessam a forma para trocar de lugar. No meio da transição, suas coordenadas coincidem:

M30 30L80 80L130 130L80 80Z

Os quatro pontos ficam em uma diagonal. No nosso teste no navegador, o quadrado preenchido colapsou nessa diagonal na metade e voltou a ser um quadrado no fim. Compatibilizar a estrutura dos comandos tornou a interpolação possível; fazer corresponder os pontos errados tornou o resultado indesejado.

Quando um par exportado se torce, inspecione o primeiro ponto e a direção de percurso em cada traçado. Depois, confira se cantos e características de curvas ocupam posições correspondentes. Adicionar nós indiscriminadamente pode dificultar essa percepção. O guia de limpeza de nós ajuda a simplificar a arte estática, mas preserve a correspondência que você estabeleceu entre os dois estados.

Considere os vazados e as partes separadas

Um logo pode conter um limite externo, uma abertura e um detalhe separado. Trate-os como partes que precisam de parceiros deliberados no próximo estado. Antes de animar, liste qual parte se transforma em qual. Se um estado tem um vazado e o outro não, decida como a abertura deve desaparecer, em vez de supor que uma quantidade correspondente de nós resolverá isso.

A referência de fill-rule explica como o SVG decide quais regiões ficam dentro de um traçado. Preserve o comportamento de preenchimento pretendido ao preparar e testar um traçado composto. Se a abertura já parece errada em um estado extremo estático, use o guia de solução de problemas de vazados preenchidos antes de adicionar uma transição.

Uma ordem prática de inspeção é:

1. Confirmar a silhueta, os vazados e os detalhes separados de cada estado extremo.
2. Identificar os subtraçados correspondentes ou elementos separados.
3. Alinhar seus pontos iniciais, direção e características úteis.
4. Conferir os estados intermediários em busca de limites cruzados ou detalhes que desaparecem.
5. Ajustar os tempos somente após aceitar essa geometria.

Elementos separados podem ser mais fáceis de controlar quando um pequeno detalhe deve desaparecer gradualmente ou se mover de forma independente. Essa escolha faz parte do desenho da animação; ela não precisa ser forçada a caber em um único traçado composto.

Confira as regras do seu mecanismo de animação

O exemplo nativo usa deliberadamente comandos correspondentes. Uma biblioteca pode realizar preparações adicionais, portanto seus requisitos podem ser diferentes.

A documentação de MorphSVG do GSAP descreve a conversão dos dados de traçado em curvas cúbicas e a adição de pontos quando necessário. Ela também expõe controles de mapeamento, como shapeIndex. Use esses controles para revisar a correspondência, em vez de supor que duas formas exportadas de maneira independente já correspondem entre si.

O KUTE.js documenta outro modelo de preparação em seu guia de SVG Morph, incluindo um fluxo separado para subtraçados. Confira a versão e o componente que você realmente usa antes de aplicar a ele as restrições de traçados nativos ou os conselhos de outra biblioteca.

Escolha um pequeno par representativo para esse mecanismo e inspecione sua geometria intermediária. Um teste bem-sucedido de quadrado para losango não comprova o comportamento de um logo composto detalhado. Mantenha uma cópia da arte de origem para distinguir as mudanças introduzidas durante a preparação da animação do desenho original.

Prepare a arte raster antes de compatibilizar os estados

Se o mestre vetorial está ausente e resta apenas uma arte PNG ou JPG, o fluxo de imagem para vetor do PerfectVector pode ajudar a preparar uma versão candidata em SVG editável. Compare a silhueta, os vazados e as regiões separadas com a imagem original e inspecione os traçados baixados. O guia de edição de SVG aborda a próxima etapa de limpeza.

Vetorizar duas imagens não estabelece correspondência semântica entre seus pontos nem cria um morph finalizado. Aceite primeiro cada desenho estático e prepare o par para o mecanismo de animação escolhido. Se já existe um mestre vetorial editável, trabalhe a partir dele, em vez de vetorizar novamente uma cópia raster.

Teste um estado intermediário após cada mudança significativa no par. Um estado extremo mais simples só é útil se a transição ainda segue as características pretendidas. Os artigos de edição do blog fornecem orientações relacionadas à preparação da arte original.

Perguntas frequentes

Traçados SVG precisam da mesma quantidade de pontos para um morph? Para a interpolação nativa de dados de traçado, a estrutura correspondente de comandos importa, incluindo tipos e ordem dos comandos. Uma biblioteca pode normalizar estruturas diferentes; por isso, consulte sua própria documentação, em vez de depender apenas da quantidade de pontos.

Por que meu morph SVG se torce mesmo quando os estados extremos parecem corretos? Os pontos podem corresponder em uma ordem indesejada. Confira o ponto inicial, a direção e a correspondência de características e inspecione o meio da transição. Silhuetas extremas idênticas podem esconder uma forma intermediária colapsada.

Dois arquivos SVG separados podem ser transformados automaticamente um no outro? Um mecanismo de animação precisa de geometria compatível ou normalizada e de um mapeamento útil entre os estados. Duas extensões de arquivo, sozinhas, não fornecem esse mapeamento; inspecione traçados, vazados e partes separadas.

Converter dois PNGs para SVG cria um par compatível para morph? Não. A conversão prepara versões candidatas vetoriais estáticas. Você ainda precisa fazer corresponder suas partes e pontos, escolher um mecanismo de animação e inspecionar a transição.

Fontes

1. W3C — traçados SVG — Define a estrutura de interpolação nativa de dados de traçado e a correspondência de parâmetros.
2. MDN — animate — Documenta a animação de atributos ao longo do tempo.
3. MDN — pauseAnimations — Permite pausar a linha do tempo de inspeção.
4. MDN — setCurrentTime — Documenta a busca na linha do tempo SVG em segundos.
5. MDN — fill-rule — Explica o comportamento de regiões internas em arte composta.
6. GSAP — MorphSVG — Descreve a normalização e os controles de mapeamento de pontos.
7. KUTE.js — SVG Morph — Documenta a preparação específica do componente e o fluxo de subtraçados.

Compatibilize as partes e inspecione o meio da transição antes de aperfeiçoar os tempos. Se sua arte inicial é raster, prepare uma versão candidata em SVG, verifique sua geometria estática e construa os estados correspondentes de animação.