SVG tem sido uma das tecnologias mais subutilizadas quando se trata de desenvolvimento web. Apesar da sua utilidade e possibilidades infinitas, ainda é um mistério para muitos e quando se trata de integrá-lo utilizando animações, muitos desenvolvedores não sabem ainda por onde começar. Com grandes bibliotecas como Snap.svg a utilização de recursos SVG torna-se mais fácil e hoje, nós gostaríamos de explorar como animar ícones SVG.
Você certamente tem visto muitos exemplos de ícones animados usando transições e animações CSS, como os Transformicons Navicon por Bennett Feely que explicaremos em breve. Queremos tentar fazer algo semelhante usando ícones SVG com a ajuda de Snap.svg.
Note que estamos trabalhando com uma biblioteca JavaScript
moderna para manipular nossos SVGs. Navegadores antigos e sem suporte não
serão capazes executar todas as funcionalidades.
A primeira coisa que fazemos é criar alguns ícones SVG usando um editor SVG como o Inkscape. Nós usamos um tamanho de 64×64 pixels para os ícones.
Para cada ícone iremos executar uma animação exclusiva. Vamos definir o que vai acontecer para cada ícone em nosso script.
Nós vamos adicionar os ícones dinamicamente a nossa página usando Snap.svg e se não houver suporte à tecnologia SVG vamos simplesmente mostrar uma imagem de fundo para os elementos span que usamos para empacotar cada gráfico:
<section class="si-icons"> <span class="si-icon si-icon-play" data-icon-name="play"></span> <span class="si-icon si-icon-monitor" data-icon-name="monitor"></span> <!-- ... --></section>Com a ajuda de Modernizr podemos definir o fallback em nosso CSS:
.no-svg .si-icon-play { background-image: url('../png/play.png') }.no-svg .si-icon-monitor { background-image: url('../png/monitor.png') }
Os ícones PNG foram gerados com a fabulosa ferramenta iconizr. Você poderia também usar sprites CSS e definir uma classe ativa, mas decidimos apenas fazer um retorno muito simples para esta demonstração.
Agora vamos dar uma olhada no que estamos fazendo no JavaScript. A
idéia é fazer algo com cada ícone. Pode ser algum tipo de
transformação, como uma rotação ou uma escala, ou numa mudança de um
caminho completamente. Com a Snap.svg podemos carregar dinamicamente
nossos SVGs, armazenados em uma determinada pasta, e manipulá-los de uma maneira
muito prática graças à essa API poderosa.
A variável de configuração para os ícones ", svgIconConfig" tem todas as configurações de animação para cada ícone.
Vamos dar uma olhada em sua lógica:
Vamos dar uma olhada em sua lógica:
[icon name - same name given to the data-icon-name] : { url : [url of the svg file], animation : [array of animation configs for each element]} Cada animação de configuração pode ter a seguinte estrutura:
{ el : [element selector], animProperties : [animation config for the initial/from and final/to state]}
Vamos dar uma olhada em alguns valores possíveis para o estado inicial e final:
from : { val : [animation name value pairs], after : [attribute name value pairs to be applied when the animation ends], before : [attribute name value pairs to be applied before the animation starts], delayFactor : [animation delay factor], animAfter : [animation name value pairs to be applied when the animation ends] }Um exemplo real seria o seguinte:
myIconName : { url : 'svgs/myIconName.svg', animation : [ { el : 'path:nth-child(5)', animProperties : { from : { val : '{"path" : "m 61.693118,24.434001 -59.386236,0 29.692524,19.897984 z"}', animAfter : '{"stroke" : "#000"}' }, to : { val : '{"path" : "m 61.693118,24.434001 -59.386236,0 29.692524,-19.7269617 z"}', animAfter : '{"stroke" : "#444"}' } } }, { el : 'rect:nth-child(3)', animProperties : { from : { val : '{"transform" : "t0 0"}', after : '{ "opacity" : 0 }' }, to : { val : '{"transform" : "t-10 -10"}', before : '{ "opacity" : 1 }' } } }]}Confira a demo para vislumbrar alguns exemplos de diferentes apresentações e a fácil ativação.
Esperamos que você aproveite esta experiência e que lhe seja útil!
Nenhum comentário:
Postar um comentário