Criar animação de linhas com jquery

Criar animação de linhas com jquery

Construir a forma SVG

Começamos por criar a forma da mascara. Forma que estará visível no final da animação.
Aqui foi utilizado o Adobe Illustrator, mas também podem utilizar outro software vectorial.
Antes da exportação da mascara, convém fazer merge a todas as peças num único path. Para obter isto utilizamos as operações boolean do pathfinder ou então criamos um compondo path no menu de objetos.
Desenha os paths por cima, dando um stroke width suficiente para cobrir a mascara. Estas são as linhas que serão animadas, visíveis apenas dentro dos limites da mascara, de forma a criar a ilusão de que a mascara está animada.

Separar linhas e mascara

A imagem em exemplo utiliza oito paths distintos. Garantir que as linhas não revelam a mascara é crucial para a ilusão.

Identificar os paths

Uma vez satisfeitos com linhas e mascara, chegou a hora de exportar tudo para SVG.

Definir os Paths

No SVG adicionamos a tag <defs> e a tag <clipPath> tag com o id “myClip”, envolvendo no path da mascara, uma vez feito isto a mascara deixará de ser visível. De seguida adicionamos o atributo ‘clip-path’  aos paths da animação com valor de ‘url(#myClip)’, linkando-os assim ao clip path que acabamos de criar. Podemos agora adicionar este código ao nosso HTML

001 <svg version=”1.1” xmlns=” HYPERLINK “http://www.w3.org/2000/svg” http://
www.w3.org/2000/svg” x=”0px” y=”0px” 
width=”100px” height=”100px” viewBox=”0 0 100 100”>
002 <defs>
003 <clipPath id=”myClip”>
004 <path d=”M48.28,7.333v82.838c0,1.381-
1.117,2.496-2.495,2.496H14.762c-
1.379,0-2.499-1.115-2.499-2.496V7.33
3H25.64v72.029h9.268V7.333H48.28
z M65.1,92.667V20.64h9.265v72.027h13
.374V9.83c0-1.379-1.117-2.497-2.497-
2.497H54.219c-1.379,0-2.497,1.118-
2.497,2.497v82.837H65.1z”/>
005 </clipPath>
006 </defs>
007 <path clip-path=”url(#myClip)” 
fill=”none” stroke=”#000000” 
stroke-width=”20” d=”M18.5,7c0,
0,0,68.5,0,75.5s22.75,7,22.75,
0C41.417,56.5,41.301,7,41.301,7”/>
008 <path clip-path=”url(#myClip)” 
fill=”none” stroke=”#000000” stroke-
width=”20” d=”M81.5,93c0,0,0-
68.5,0-75.5s-22.91-7- 22.91,0”/></svg>

TweenMax e jQuery

A animação utiliza a biblioteca Greensock TweenMax em conjunto com jQuery, mais um truque CSS popularizado pelo Chris Coyier (http://css-tricks.com/svg-line-animation-works). Aqui apenas o path ‘stroke-dashoffset’ precisa de ser animado de forma a conseguir-se a ilusão de uma linha a aparecer. Recomenda-se a leitura.

001 <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.
js”></script>
002 <script src=”http://cdnjs.
cloudflare.com/ajax/libs/gsap/1.13.1/
TweenMax.min.js”></script>

Animar com JavaScript

Em primeiro lugar no nosso código fazemos referência aos nossos paths excluindo a mascara. Em seguida para cada path definimos as propriedades ‘stroke-dasharray’ e ‘stroke-dashoffset’ como iguais ao comprimento total do path, tornando-o assim invisível. Cada animação é adicionada a timeline separadamente, animando o ‘stroke-dashoffset’ para zero. A duração, e efeitos podem ser mexidos como se quiser.

001 <script>
$(document).ready(function() {
002 var paths = $(‘path:not(defs path)’);
paths.each(function(i, e) {
003 e.getTotalLength();
004 });
005 var tl = new TimelineMax();
006 tl.add([
007 TweenLite.to(paths.eq(0), 1, 
{strokeDashoffset: 0, delay: 0.0}),
008 TweenLite.to(paths.eq(1), 1, 
{strokeDashoffset: 0, delay: 0.5}),
009 ]);
010 })
011 </script>

Leave a Reply

Your email address will not be published. Required fields are marked *