letanure.dev

Vivus Biblioteca JavaScript para animações em SVG

26 February 2015

Vivus é uma lib javascript, sem dependências, para criar animações em SVGs com o efeito de "desenhando", mostrando o SVG sendo desenhado traço por traço com várias opções, como sincronia entre todos os traços ou atraso na animação.

Como funciona?

Basicamente a biblioteca manipula a propriedade stroke-dashoffset, que especifica o tamanho do traço em relação ao seu ponto inicial.

Mas essa propriedade só existe em elementos do tipo path, então para ser possível animar outros tipos de elementos como circle, rect, line e polyline a library possui uma classe interna chamada pathformer, que transforma esses elementos em paths.

Outro ponto importante é que animação acontece na ordem em que cada elemento ocorre dentro da tag SVG.

Requisitos

Para funcionar, observe que:

  • O SVG deve ser inline (suporte ie8+ );
  • todos os elementos do SVG devem ter a propriedade stroke sem preenchimento;
  • o SVG não deve possuir elementos ocultos ( a animação ocorre neles também, mas não é mostrada, gerando um "furo" na sequencia de animações);
  • Elementos do tipo text não funcionam porque não podem ser convertidos em paths.

Como usar?

Primeiro, óbvio, inclua a lib na sua página (baixe bia bower, no git ou use via CDN):

<script src="//cdn.jsdelivr.net/vivus/0.1.2/vivus.min.js"></script>

Depois, um SVG inline, como por exemplo:

<svg id="animacao1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="100%" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200">
    <circle fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" cx="100" cy="100" r="72.947"/>
    <circle fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" cx="100" cy="100" r="39.74"/>
    <line fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" x1="31.306" y1="75.416" x2="92.41" y2="60.987"/>
    <line fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" x1="124.584" y1="31.305" x2="139.013" y2="92.409"/>
    <line fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" x1="168.693" y1="124.584" x2="107.59" y2="139.012"/>
    <line fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" x1="75.417" y1="168.693" x2="60.987" y2="107.59"/>
</svg>


Finalmente, chame a função:

new Vivus('animacao1', {type: 'delayed', duration: 200});

Exemplo básico funcional

Juntando tudo você terá o efeito:


O construtor da função possui 3 argumentos:

    new Vivus('id-svg', {objeto-config}, [callback]);
  • O #ID do SVG;
  • Um objeto de configurações, descrito abaixo;
  • Uma função de callback, opcional, chamado ao final da animação.

Configurações

O Objeto de configurações possui a seguinte estrutura:

{   
    // Tipo de animação usado
    type    : 'delayed', // String [delayed|async|oneByOne|script]
    // Duração em frames
    duration: 200, // Integer
    // Quando a animação inicia
    start   : 'autostart', // String [inViewport|manual|autostart]
    // Tempo entre a primeira e última animação, apenas para type: 'delayed'
    delay   : 100, // Integer
    // Margem extra entre traços, default 2
    dashGap: 2, // Integer
    // Força o navegador a renderizar novamente os elementos, default true
    forceRender: true, // Boolean
    // Remove estilizações extras no SVG
    selfDestroy: false // Boolean
}

Métodos

Para controlar a animação, temos três métodos disponíveis, com nomes autoexplicativos:

    var animacao = new Vivus('id-svg');
    animacao
        .stop()
        .reset()
        .play(1) // velocidade da animação ou negativo para retroceder

Roteirizando sua animação

Ou tra opção para controlar sua animação, criando um roteiro de cada passo a ser feito é configurando o type para o valor scenario e controlando sua animação através de propriedades nas próprias tags do seu SVG

As Propriedades a serem ineridas são data-start _ e _data-duration, definindo quando aquele path específico terá sua animação iniciada e por quanto tempo. Exemplo:


<svg id="animacao2" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
    width="100%" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200">
    <circle data-start="100" data-duration="50" fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" cx="100" cy="100" r="72.947"/>
    <circle data-start="50" data-duration="50" fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" cx="100" cy="100" r="39.74"/>
    <line data-start="0" data-duration="50" fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" x1="31.306" y1="75.416" x2="92.41" y2="60.987"/>
    <line data-start="0" data-duration="50" fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" x1="124.584" y1="31.305" x2="139.013" y2="92.409"/>
    <line data-start="100" data-duration="50" fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" x1="168.693" y1="124.584" x2="107.59" y2="139.012"/>
    <line data-start="50" data-duration="50" fill="none" stroke="#f9f9f9" stroke-width="3" stroke-miterlimit="10" x1="75.417" y1="168.693" x2="60.987" y2="107.59"/>
</svg>

Playground


Ações
Log: Início

Leia mais