COMO CRIAR ANIMAÇÕES COM SVG'S?
O SVG é a abreviatura de Scalable Vector Graphics e permite
a utilização de gráficos vetoriais escaláveis principalmente utilizados para a
web. É representado por etiquetas XML que apresentam formas que podem conter
interação e animação através de CSS ou JavaScript.
VANTAGENS:
Os SVGs são flexíveis, não dependem da resolução e são bem
apresentados em ecrãs e impressão.
São leves por serem compostos de etiquetas de texto e ainda
podem ser comprimidas (gzip).
Podem ser estilizados com CSS e animados com CSS3.
Tem efeitos como corte, máscaras, fundos e filtros que
equivalem à edição de Photoshop no navegador.
1 - DESENHAR:
O código é exportado pelo Illustrator, Inkscape ou Sketch. Vamos
utilizar o Illustrator em que o método de trabalho é o seguinte:
1. Criar
um elemento de texto.
2. Converter
o texto para caminho (Ctrl+Shift+O).
3. Fundir
esses caminhos através da criação de caminho composto (Ctrl+8).
2 - PREPARAR O CÓDIGO SVG PARA EDIÇÃO:
Salvamos o ficheiro em formato.SVG para depois simplificar e
formatar o código para o tornar mais legível.
As opções seguintes são as melhores para exportar para a web:
É gerado um ficheiro SVG e pode ser aberto num editor de
texto:
O código exportado contém informação redundante que pode
ser otimizada através de programas como o SVGO ou deste editor online:
Vamos utilizar o editor online e fazer o upload do
ficheiro para depois otimizarmos:
Podemos verificar o tamanho do código antes e depois da otimização:
3 - Propriedades dos traços
Para obter esta animação utilizei as propriedades dos traços:
·
Stroke-width : a espessura do traço relativo ao
tamanho do SVG.
·
Stroke : a
cor do traço utilizando hue/saturation/lightness.
·
Stroke-dasharray : define o tamanho do traço e o
espaço entre eles.
·
Stroke-dashoffset : define o começo do traço em
relação ao comprimento do caminho.
4 - animar svg’s através
de css
Os SVG’s podem ser animados da mesma forma que os elementos
HTML através das etiquetas de transição e animação CSS.
Vamos ver o código onde foi definido a propriedade do
stroke-dasharray para ser o comprimento total do caminho. Depois o
stroke-dashoffset para ser o comprimento total do caminho para aparecer o
traço. A animação keyframe irá aparecer no stroke-dashoffset. No final a
propriedade fill-opacity é utilizada para preencher o texto.
html, body, svg { height:
100%; width: 100%; margin: 0; }
.st0 {
stroke-width: 1;
stroke: hsl(6, 63%, 36%);
stroke-dasharray: 1800px 1800px;
stroke-dashoffset: 1800px ;
fill-opacity: 0;
fill: hsl(6, 73%, 36%);
animation-name: stroke, fill;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
@keyframes stroke {
0% { stroke-dashoffset: 1800px; }
100% { stroke-dashoffset: 0 }
}
@keyframes fill {
0% { fill-opacity: 0; }
100% { fill-opacity: 1; }
}
CONCLUSÃO:
Esta é apenas uma das formas simples de animação de SVG’s utilizando CSS onde se pretende que sejam compreendidos os métodos de utilização do código.
Sem comentários:
Enviar um comentário