Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG
Webdesign

Criando um Carregador Animado em SVG Usando DrawSVG do GreenSock

by
Difficulty:IntermediateLength:ShortLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Final product image
What You'll Be Creating

O tutorial de hoje é um que deixará você impressionado em ter escrito tão pouco código e conseguido uma animação linda. DrawSVG, do incrível grupo da GreenSock, permite-nos revelar (o esconder) gradativamente os traços de um SVG. Vejamos como funciona, construindo um carregador animado.

O Que DrawSVG Faz?

Como dito, o plugin dar-nos-á o poder de revelar (ou esconder) o traço de um SVG, mas também permite animar os traços de dentro para fora (de qualquer posição ou segmento). Isso é exatamente o que faremos nesse tutorial.

DrawSVG é parte do GreenSock Animation Platform (GSAP) e pode usado em qualquer animação TweenLite, TweenMax, TimelineLite ou TimelineMax. Todos os recursos do GSAP (controles de execução, callbacks, suavisações, administração de sobrescrta, aninhamento) funcionarão em animações SVG!

Consigamos uma Cópia de DrawSVG

Acessar a documentação e suporte do DrawSVG plugin requer uma inscrição no Club GreenSock. No momento, os planos variam entre US$50 e US150 por ano, dependendo do tipo de inscrição.

Testemos DrawSVGPlugin de Graça no Codepen!

Há uma versão especial e totalmente funcional do DrawSVGPlugin usada nos Codepens do DrawSVGPlugin da GreenSock, então faça uma cópia deles por lá, adicione seus SVGs e experimente o plugin.

Nota: essa versão especial funcionará apenas no domínio do CodePen.

Construindo o Carregador

O código abaixo tem tudo que precisamos para fazer o carregador SVG funcionar!

As demos suportam qualquer navegador que suporte SVG (suporte total garantido, exceto por IE8 e anteriores). Também podemos ver a demo completa, Filler Loader, no CodePen.

A Marcação

Eis a marcação necessária:

Dentro de index.html temos um único <svg> que contém uma tag <circle>. Anexados a <circle> há dois atributos que ajudam no posicionamento dentro da caixa delimitadora (quadrado preto). Esses atributos, cx e cy, posicionanam o círculo dentro da viewBox do elemento <svg>.

Podemos o sistema em funcionamento na imagem abaixo. O primeiro quadro representa nosso <circle> sem qualquer atributo, o segundo adiciona cx="50" e, por fim, o último quadro adiciona cy="50". O x e y desses atributos referem-se ao sistema de posicionamento de coordenadas cartesinas para nossa forma e seus posicionamentos horizontal e vertical.

O último atributo (r) de circle ajusta o raio do circulo ou, em outras palavras, a distância do centro do círculo até o borda da caixa. Podemos ajustar esse valor na demo do CodePen para ver os resultados de acordo com a mudança.

Os Estilos

Agora, alguns estilos.

Esse exemplo tem um estilo mínimo. Definimos algumas limitações como width e height (32 x 32), então a classe .fill-path é o que dá a aparência, ajustando algumas propriedades SVG disponíveis ao CSS. Damos ao traço largura, cor e tipo de ponta. O tipo de ponta dessa demo é butt e deixa as pontas retas do traço.

Agora, podemos rotatcionar o círculo -90deg (anti-horário). Vemos o porque, com base nas cpaturas de tela abaixo. A imagem à esquerda mostra o círculo antes da rotação e a segunda mostra depois da rotação.

O JavaScript

Agora, façamos as coisas funcionarem.

Se nunca viu a chamada TimelineMac, não tema. Podemos ler mais sobre aqui, antes de continuar.

Imaginemos TimelineMax como uma linha do tempo em que adicionaremos nossos quadros. Nesse caso, teremos uma única linha que conterá um objeto com um par key:value para controlar a reprodução da animação. A reprodução repetirá, usando repeat:-1 no objeto de opções de TimelineMax. Como usaremos jQuery para obter nodos DOM, usaremos a classe .fill-path para obter o carregador. Essa será nossa referência para começarmos a animação.

As últimas linhas do nosso código é onde a mágica acontece. O objeto que contém drawSVG começa iniciando o caminho da animação no sentido horário, do vazio (drawSVG: '0') para preenchido (drawSVG: '100%'). Agora que preenchemos o caminho em uma direção, precisamos da direção reversa (anti-horário). É aqui onde o método to() entra em ação e onde configuramos drawSVG para '100% 100%'. Como o preenchimento termina em 100%, precisamos revertê-lo em 100%. Isso animará o preenchimento de qualquer traço de do estado atual ao estado onde o traço existe no caminho. Viola!

Conclusão

Como vimos, DrawSVG é muito leve e rápida de configurar, tornando divertida a criação de animações SVG mesmo para desenvolvedores iniciantes. Com pouca configuração, podemos trazer outro arsenal ao nosso próximo projeto, tornando interações e experiências agradáveis.

Quaisquer dúvidas, deixe sua pergunta nos comentários. Ótimas animações!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.