{"id":132,"date":"2016-06-04T05:22:37","date_gmt":"2016-06-04T08:22:37","guid":{"rendered":"https:\/\/www.origamid.com\/codex\/?p=132"},"modified":"2016-06-04T05:29:57","modified_gmt":"2016-06-04T08:29:57","slug":"animacao-de-svg-baseada-em-strokes","status":"publish","type":"post","link":"https:\/\/www.origamid.com\/codex\/animacao-de-svg-baseada-em-strokes\/","title":{"rendered":"Anima\u00e7\u00e3o de SVG baseada em strokes"},"content":{"rendered":"<img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"420\" src=\"https:\/\/www.origamid.com\/codex\/wp-content\/uploads\/2016\/06\/svg-animate.gif\" alt=\"Anima\u00e7\u00e3o com SVG\" class=\"alignnone size-full wp-image-134\" \/>\n<p>A f\u00f3rmula m\u00e1gica \u00e9:<\/p>\n<p>SVG (path&#8217;s) + CSS Animation + stroke-dashoffset + stroke-dasharray + JS<\/p>\n<p data-height=\"420\" data-theme-id=\"0\" data-slug-hash=\"vKEQWX\" data-default-tab=\"css,result\" data-user=\"origamid\" data-embed-version=\"2\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/origamid\/pen\/vKEQWX\/\">animated-origamid<\/a> by Andr\u00e9 Rafael (<a href=\"http:\/\/codepen.io\/origamid\">@origamid<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"\/\/assets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n<p>Passo a passo (depois que aprende \u00e9 lindo e d\u00e1 para usar em qualquer vetor do mundo.)<\/p>\n<p>1 &#8211; Selecionar o item que deseja animar. Deve ser um vetor composto por linhas (stroke). Exportar para SVG. No illustrator \u00e9 s\u00f3 ir em File > Save As > Selecionar SVG.<\/p>\n<p>2 &#8211; Otimizar o SVG, com isso voc\u00ea vai diminuir o tamanho do svg e ainda transformar linhas em path&#8217;s.<\/p>\n<p>2.1 &#8211; \u00c9 f\u00e1cil otimizar, basta entrar neste link: https:\/\/jakearchibald.github.io\/svgomg\/ e arrastar o arquivo para a tela que o upload ser\u00e1 feito.<\/p>\n<p>2.2 &#8211; A \u00fanica mudan\u00e7a que precisa fazer nas configura\u00e7\u00f5es \u00e9 desmarcar o item Merge paths (No menu vertical que est\u00e1 no canto direito do site). Salve o c\u00f3digo gerado e cole direto no seu HTML.<\/p>\n<p>3 &#8211; A anima\u00e7\u00e3o \u00e9 feita da seguinte forma:<\/p>\n<p>Existem 2 propriedades no CSS que manipulam o stroke (linha) de cada path (s\u00e3o as partes do seu arquivo) do seu SVG.<\/p>\n<p>1 &#8211; stroke-dasharray<\/p>\n<p>A dasharray vai definir o tamanho do pontilhado das linhas. Uma dasharray de 0, cria linhas n\u00e3o pontilhadas. Uma dasharray de 10, cria um pontilhado de 10px (n\u00e3o \u00e9 10px, mas \u00e9 quase isso).<\/p>\n<p>2 &#8211; stroke-dashoffset<\/p>\n<p>A dashoffset especifica a que dist\u00e2ncia o primeiro pontilhado vai come\u00e7ar. No 0 voc\u00ea ter\u00e1 um um pontilhado normal, com o primeiro tracinho iniciando no come\u00e7o do path.<\/p>\n<p>Agora a grande sacada de Jake Archibald foi a seguinte. Se definirmos um stroke-dasharray do tamanho do path, ou seja se o path tem 100 de dist\u00e2ncia o stroke-dasharray tiver 100 tamb\u00e9m.<\/p>\n<p>Voc\u00ea vai acabar criando um pontilhado t\u00e3o grande que n\u00e3o ser\u00e1 poss\u00edvel ver os outros tra\u00e7os. J\u00e1 que um tracinho vai ocupar 100% da dist\u00e2ncia do path.<\/p>\n<p>E se definirmos um stroke-dashoffset tamb\u00e9m do tamanho do path, esse grande tra\u00e7o que criamos agora ter\u00e1 um offset do mesmo tamanho dele.<\/p>\n<p>Exemplo: se temos uma caixa de 100px e um item dentro dela com margem de -100px, esse item acaba n\u00e3o aparecendo dentro da caixa, ele est\u00e1 &#8220;fora dela&#8221;.<\/p>\n<p>Ai a anima\u00e7\u00e3o acontece quando mudamos o stroke-dashoffset do tamanho total para 0.<br \/>\nSe o stroke-dashoffset for de 200, a dist\u00e2ncia que ele percorrer para voltar ao ponto 0, inicial dele, dever\u00e1 ser animada.<\/p>\n<p>3 &#8211; Agora precisamos definir o comprimento de cada path do nosso SVG. Isso \u00e9 muito simples com uma fun\u00e7\u00e3o que eu criei com jQuery<br \/>\nvar comprimento = $(this).get(0).getTotalLength();<\/p>\n<p>E dinamicamente com o jQuery adicionamos este valor ao stroke-dashoffset e stroke-dasharray de cada path do nosso SVG. (Veja o exemplo para o c\u00f3digo completo)<\/p>\n<p>4 &#8211; Animar com CSS<\/p>\n<pre><code class=\"language-css\">\n@keyframes svg-animate {\n  from {}\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\nsvg.animate path {\n  animation: svg-animate 4s forwards infinite;\n}\n<\/code><\/pre>\n<p>A explica\u00e7\u00e3o est\u00e1 no exemplo.<\/p>\n<p>5 &#8211; Agora basta voc\u00ea adicionar a classe animate, que criamos no CSS, no seu SVG e ele ser\u00e1 animado.<\/p>\n<p>Compartilhe o seu experimento.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A f\u00f3rmula m\u00e1gica \u00e9: SVG (path&#8217;s) + CSS Animation + stroke-dashoffset + stroke-dasharray + JS See the Pen animated-origamid by Andr\u00e9 Rafael (@origamid) on CodePen. Passo a passo (depois que aprende \u00e9 lindo e d\u00e1 para usar em qualquer vetor do mundo.) 1 &#8211; Selecionar o item que deseja animar. Deve ser um vetor composto [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/132"}],"collection":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/comments?post=132"}],"version-history":[{"count":5,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/132\/revisions"}],"predecessor-version":[{"id":138,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/posts\/132\/revisions\/138"}],"wp:attachment":[{"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/media?parent=132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/categories?post=132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.origamid.com\/codex\/wp-json\/wp\/v2\/tags?post=132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}