8 bibliotecas JavaScript para animar o SVG
SVG é um gráfico independente de resolução. Isso significa que vai fica bem em qualquer tipo de tela sem sofrer perda de qualidade. Além disso, você também pode fazer com que o SVG ganhe vida com alguns efeitos de animação.
Em uma das postagens da nossa série SVG anteriormente, mostramos a você como a animação SVG funciona com o
Mais sobre Hongkiat.com:
- Animate.css - Biblioteca CSS3 para criar animação facilmente
- Animar facilmente o texto com Textillate.js
- Como converter texto do Photoshop em SVG
- Animar para ocultar e deslizar o conteúdo com jQuery
1. Vivus
Vivus é uma biblioteca JavaScript que dá ao seu SVG a aparência de ser desenhado. Vivus trabalha fora da caixa sem a necessidade de quaisquer dependências (por exemplo, jQuery). Simplesmente inclua o .js arquivo no seu HTML e designe o elemento SVG que você deseja animar, junto com algumas opções predefinidas para iniciar a animação imediatamente.
Por exemplo:
novo Vivus ('svg-element', type: 'oneByOne', duração: 200); O acima irá animar meu elemento SVG que tem o svg-element ID em 200 milissegundos. Cada elemento deste SVG será desenhado um após o outro dentro desse período de tempo.
2. bonsai
O Bonsai é uma poderosa biblioteca JavaScript que permite desenhar, transformar e animar elementos gráficos em páginas da web. Suporta o tipo de gráfico HTML5 Canvas e SVG. Com o Bonsai, você pode construir um retângulo simples ou um círculo ou, se preferir, um multiplayer completo jogo animado como este. Você pode usar o Orbit para sentir como o Bonsai trabalha em ação ao vivo ou verificar alguns desses exemplos impressionantes para se inspirar em.
3. Velocidade
Velocity é uma biblioteca JavaScript criada para animações rápidas. A velocidade da velocidade ao renderizar animações é incrivelmente rápida. Supera jQuery e até CSS, em comparação. A API do Velocity funciona de forma semelhante à animação no jQuery, exceto pelo fato de usar a palavra-chave alias $ .velocity () ao invés de $ .animate (). Além disso, você pode usar exatamente as mesmas palavras-chave de animação, como aparecimento gradual e desaparecer.
4. Rafael
O RaphaelJS é uma biblioteca que permite desenhar e animar gráficos vetoriais SVG em páginas da web. Ele suporta uma ampla gama de navegadores até o IE6, o que torna Raphael a biblioteca JavaScript mais confiável do nicho. Com o RaphaelJS, você pode criar gráficos analíticos interativos, mapas do mundo e interações de jogos semelhantes aos do Counter Strike..
5. Snap
O SnapSVG é outra biblioteca JavaScript popular para animação SVG desenvolvida pelo desenvolvedor Raphael, Dmitry Baranovskiy, junto com a Equipe de Plataforma Web da Adobe a partir do zero. Ao contrário de Raphael, o SnapSVG é destinado apenas aos navegadores mais recentes. Isso permite que a biblioteca seja significativamente menor que Raphael e suporte a recursos SVG como recorte e mascaramento.
6. pintor de linha preguiçoso
O Lazy Line Painter é um plugin do jQuery para animar caminhos SVG para animar a sequência de desenhos, similar ao Vivus. A má notícia é que este plugin só faz isso muito específico. Assim, quando você importar SVG de aplicativos como o Illustrator ou o Inkscape, verifique se não há cor de preenchimento no SVG, apenas os caminhos.
7. SVG.js
O SVG.js é uma biblioteca leve para manipular e animar o SVG. Com esta biblioteca, você poderá animar o tamanho, a posição ou a cor do seu elemento SVG. Não só anima entretanto; Você também pode aplicar plugins adicionais para adicionar funcionalidades extras. Este exemplo usa o plug-in svg.filter.js para aplicar filtros como desfoque gaussiano, dessaturação, contraste, sépia etc. à imagem..
8. Passarela
Passarela suporta três tipos de elementos, caminho, linha, e polilinha usado para desenhar linhas SVG. Aqui está um exemplo do Polygon que mostra a animação da linha de console do PlayStation 4.
