quinta-feira, 28 de dezembro de 2017

Um guia de instrução para animação SVG

Qualquer engenheiro de ponta que valha o seu sal é consciente dos desafios que o ecossistema fragmentado de dispositivos traz. Diferentes tamanhos de tela, resoluções e proporções de aspecto dificultam a entrega de uma experiência consistente. Mais ainda, para aqueles que querem oferecer uma experiência perfeita para pixel.

Gráficos vetoriais escaláveis ​​(SVGs) ajudam a resolver uma parte desse problema e a fazê-lo muito bem. Embora eles tenham suas limitações, os SVGs podem ser muito úteis para certas ocasiões e, se você tiver uma boa equipe de design, você também pode criar uma experiência mais visualmente deslumbrante sem colocar carga indevida no navegador ou prejudicar os tempos de carregamento.



Durante os últimos meses, trabalhei em um projeto que faz uso extensivo do SVG e suas capacidades de animação e efeito. Neste artigo, vou compartilhar como você pode usar o SVG e suas técnicas de animação para trazer uma nova vida ao seu trabalho de front-end na web.

Gráficos vetoriais escaláveis

O SVG é um formato de imagem baseado em XML, bem como o funcionamento do HTML. Ele define diferentes elementos para uma série de formas geométricas familiares que podem ser combinadas na marcação para produzir gráficos bidimensionais.

A especificação SVG é um padrão aberto desenvolvido pelo World Wide Web Consortium (W3C) em 1999.

Todos os principais navegadores da web tiveram apoio de renderização SVG.

Uma vez que os gráficos SVG são documentos XML, os navegadores da Web fornecem APIs baseadas em nós DOM que podem ser usadas para interagir com as imagens. Fale sobre trazer fotos para a vida!

Caminhos SVG

Se houver um elemento superado em SVG, esse seria o elemento [path].

O elemento do caminho é uma forma básica que pode ser usada para criar quase qualquer formato 2D avançado que você possa imaginar.

O elemento funciona tomando uma seqüência de comandos de desenho. É muito parecido com a linguagem de programação do logotipo de 1967, apenas modernizada e projetada para gráficos sofisticados. O elemento leva essa seqüência de comandos de desenho através do atributo d.

<!-- A right-angled triangle -->
<path d="M10 10 L75 10 L75 75 Z" />


Você pode pensar em uma caneta virtual que desenha na tela, e os comentários de desenho no elemento de caminho apenas controlam a caneta. No exemplo acima, a caneta está sendo instruída para mover para a posição (10, 10)(M10 10), para desenhar uma linha para (75, 10)( L75 10), para desenhar uma linha (75, 75) L75 75 e fechar o caminho retornando ao ponto de partida (Z).

Usando outros comandos de desenho, como arcos (A), curvas de bezier quadrático (Q), curvas de bezier cúbicas (C), etc, você pode criar formas e gráficos muito mais complexos em SVG.

Você pode aprender muito mais sobre o elemento do caminho aqui.

Caminhos SVG e CSS

"Ok, Juan, entendi. Os caminhos são poderosos, mas como eu os animo? ", Você diz.

Para a nossa primeira técnica, vamos aproveitar dois atributos SVG: stroke-dasharray e stroke-dashoffset.



O atributo stroke-dasharray controla o padrão de traços e intervalos usados ​​para traçar o caminho. Se você quisesse desenhar suas linhas como um grupo de traços e lacunas em vez de um golpe contínuo de tinta, esse é o atributo que você usaria.

Com as imagens SVG sendo parte do DOM do navegador web e stroke-dasharray sendo um elemento de apresentação, o atributo também pode ser configurado usando CSS.

Da mesma forma, o atributo stroke-dashoffset (que especifica o quão longe no padrão de traço para iniciar o traço) também pode ser controlado usando CSS.

Esses dois atributos SVG, juntos, podem ser usados ​​para animar caminhos SVG, dando ao espectador a ilusão de que os caminhos estão sendo desenhados de forma gradual.

Tome esta curva de bezier quadrático, por exemplo:



<path fill="transparent" stroke="#000000" stroke-width="5" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>


Para animar esse caminho como se estivesse sendo desenhado de forma gradual e sem problemas na tela, teremos que definir os comprimentos do tabuleiro (e intervalo), usando o atributo stroke-dasharray, igual ao comprimento do caminho. Isto é para que o comprimento de cada traço e intervalo na curva tracejada seja igual ao comprimento de todo o caminho.

Em seguida, definiremos o deslocamento do traço, usando o atributo stroke-dashoffset, para 0. Isso fará com que o caminho apareça na tela como uma curva sólida (estamos essencialmente olhando o primeiro dash, e já fizemos cada intervalo de traço o todo comprimento da curva). Ao definir o deslocamento de traço igual ao comprimento da curva, acabaremos com uma curva invisível (agora estamos olhando a curva sendo renderizada como uma lacuna inteira - a parte que segue imediatamente um traço).

Agora, ao animar a propriedade stroke-dashoffset, você pode fazer a curva aparecer na tela gradualmente.



Como você pode ver, a curva está sempre lá. Estamos apenas alterando o deslocamento do painel para que a parte tracejada apareça um bit a bit.

Você pode dar um passo adiante usando o mesmo princípio, mas com mais caminhos:



Aqui você tem uma curva preta que é fixa, uma vermelha que se move ao longo do caminho, e outra preta que segue o vermelho, mas 40px atrás.

Stroke-dasharray e stroke-dashoffset são dois atributos muito poderosos que podem ser usados ​​para aplicar uma infinidade de animações e efeitos aos seus caminhos SVG. Você pode tentar esta ferramenta acessível que você pode usar para experimentar os dois atributos.

Animando objetos ao longo de caminhos SVG

Com SVG e CSS, outra coisa legal que você pode fazer é animar objetos ou elementos seguindo um caminho.

Existem 2 atributos SVG que vamos usar para a animação:
- offset-path: A propriedade CSS do caminho do deslocamento especifica o caminho do deslocamento onde o elemento é posicionado.
- Distância de deslocamento: a propriedade de CSS de distância especifica uma posição ao longo de um caminho de deslocamento.

Ao combinar essas duas propriedades, você pode criar animações assim facilmente:



Como você pode ver, temos um novo elemento div.ball.

Este elemento pode ser qualquer coisa, uma div, uma imagem, texto, seja o que for. A idéia neste exemplo é que, com o uso do caminho de deslocamento e distância de deslocamento, você pode dar ao elemento um caminho a seguir e animar a distância e o elemento se moverá através do caminho.

Animações SVG usando JavaScript

Se tudo isso não é bastante sofisticado, você sempre pode recorrer ao JavaScript.

Animar elementos SVG com JavaScript pode ser como animar os elementos DOM. No entanto, com o JavaScript, você pode alcançar as técnicas de animação que fizemos anteriormente, mas com mais facilidade.

Anteriormente, tivemos que codificar os comprimentos do caminho em nosso CSS. Com a ajuda da função JavaScript path.getTotalLength(), é possível calcular o comprimento do caminho on-the-fly e usá-lo conforme necessário. Você pode aprender mais sobre isso aqui.

Além disso, várias bibliotecas já estão à sua disposição, o que pode tornar as animações SVG muito mais fáceis do que já são.

Snap.svg não só facilita a criação de imagens SVG usando o JavaScript, mas as anima tão simples como chamar .animate({}).

Outra biblioteca, anime.js, permite que você faça um elemento div seguir um caminho SVG com apenas algumas linhas de código.

Se você está procurando uma biblioteca que faz mais por conta própria, mas faz com que os resultados ainda parecem deslumbrantes, então Vivus é o que você está procurando. É preciso uma abordagem diferente, mais orientada a configuração, para a animação do caminho do SVG. Com esta biblioteca, você só precisa adicionar uma ID ao elemento SVG que deseja desenhar e definir um objeto Vivus com essa ID. Vivus cuidará do resto.

Leitura adicional

Abaixo estão uma lista de recursos que você pode achar útil ao lidar com imagens SVG e animá-las:

Para aprofundar a animação SVG, você pode ler este breve artigo sobre as três formas de animar imagens SVG e assistir o screencast de vídeo por CSS Tricks.

Uma coisa que este artigo não abrange é a animação de imagens SVG com linguagem sincronizada de integração multimídia (SMIL). Ao usar CSV para SVG dá-lhe a vantagem de trabalhar com algo que você já conhece, o SMIL leva as coisas ao próximo nível.

Com o SMIL, você pode implementar efeitos de animação avançados, como o morphing de forma usando o SVG sozinho. Um guia curto e eficaz para usar o SMIL para tais efeitos está disponível aqui.

Embora o suporte para SMIL seja um pouco nervoso neste momento (sem trocadilhos).

Animações sem compromissos para a Web

Neste artigo, você passou por várias maneiras de animar elementos SVG usando CSS ou elemento HTML em caminhos SVG.

SVG é leve e pode ser usado para produzir gráficos nítidos, independentemente do tamanho da tela, nível de zoom e resolução da tela. Com o SVG, oferecer uma experiência moderna e vívida agora é mais fácil do que nunca, ao mesmo tempo em que colhe os benefícios do uso de tecnologias web padrão.

E é isso! Espero que você tenha encontrado este tutorial de animação SVG útil e gostou de lê-lo.

BY JUAN CALOU - FREELANCE SOFTWARE ENGINEER @ TOPTAL

ARTIGO ORIGINAL: Guía: Cómo Animar con SVG